WideCMS

Bildegallerier

Bildegalleri-funksjonen i WideCMS gjør det enkelt for webside-administratoren å plassere bildegallerier på flere forskjellige sider, uten å behøve å ta hensyn til design og funksjonalitet. Bildegalleri-funksjonen er malbasert, og gjør at du som webdesigner kan bestemme hvordan et galleri skal se ut og fungere (for eksempel med en lightbox). Webside-administratoren kan dermed lage egne gallerier bare ved å plukke bilder, endre rekkefølge og plassere galleriene på ønskede sider.

Det er dessuten mulig å lage flere bildegalleri-oppsett, og webside-administratoren velger hvilket oppsett som skal benyttes når et galleri opprettes.
 

Forberedelse

På forhånd bør du ha laget et "dummy-galleri" så du ser at det fungerer både med stående og liggende bilder, og med forskjellig antall bilder. Da får du også, på en enkel måte testet om feks. lightbox-funksjonalitet fungerer.

Oppsett

  1. Gå til Oppsett & innstillinger, deretter Bildegalleri-oppsett og velg Nytt galleri-malsett
  2. Gi malsettet et visningsnavn. Hvis du skal opprette flere malsett, og ønsker at dette skal være standard malsett, kryss av for dette. Klikk på Gå videre.

Du har nå 4 kodefelter du kan legge inn maler i, i tillegg til ett valg:

Galleri-layout Her legger du HTML-kodene som "omkapsler" galleriet. Der du ønsker at bildene skal plasseres, legger du inn elementet [%images%]
Bilde-objekt Dette feltet representerer ett bilde. Som regel plasseres et lite bilde (thumbnail) i et img-element og link til en større utgave av samme bilde i et a-element.
Bilde-stier legges inn ved å benytte følgende element:

[%image versionid="1"%]

Tallet som er oppgitt innenfor versionid, er ID-nummeret til bildemalen for bilde-stien man ønsker. Disse finner du på Oppsett & innstillinger > Bildebehandling > <Navn på bildemalsett> > Bildemaler.
Er for eksempel IDen til thumbnail-versjonen 25 og IDen til full versjon 32, kan et naturlig oppsett her for eksempel være:

<a href="[%image versionid="32"%]"><img src="[%image versionid="25"%]"/></a>

 I tillegg kan du hente ut metainformasjon om bilde ved å bruke meta-elementet for bildegalleri-objekter.
Kode før rad
Kode etter rad
Avbrekk etter 		 Bilde-objektene innkapsles av kode før rad og kode etter rad. Men hvis feltet "Avbrekk etter" er et tall større enn 0, vil innholdet i feltet "Kode etter rad" forekomme så snart det antall bilder/objekter er vist.

Eksempel:

Kode før rad: <ul>
Kode etter rad: </ul>
Avbrekk etter: 3

Ved for eksempel 7 bilder vil det gi følgende:
<ul>
   <Bilde 1>
   <Bilde 2>
   <Bilde 3>
</ul>
<ul>
   <Bilde 4>
   <Bilde 5>
   <Bilde 6>
</ul>
<ul>
   <Bilde 7>
</ul>
Ved bruk av HTML-elementene ul og li, der li er stilsatt til display:inline; vil det ikke nødvendigvis noe poeng i å definere "Avbrekk etter". Denne funksjonen har forøvrig en nytte om du benytter feks. HTML-elementene table, tr og td.

 

Eksempel på maler

Galleri-layout

<div class="gallery">
   <h3>Bildegalleri</h3>
   [%images%]
</div>

Bilde-objekt

<li>
   <a href="[%image versionid="3"%]" rel="tn">
      <img src="[%image versionid="1"%]" alt="[%meta name="title"%]"/>
   </a>
</li>

Kode før rad

<ul>

Kode etter rad

</ul>


Relaterte sider: