Teknisk

Bilder, lenking og opphav

Hvert bilde som er brukt, for eksempel i snutter skal ha

  1. opphavsinformasjon synlig som tekst over bildet
  2. skal lenke til vedleggssiden (attatchment page)
  3. vedlegssiden skal også ha info om
    • Foto: Navn på fotograf, eller Illustrasjon: Navn på illustratør
    • «Navn på fotograf/illustratør» skal dersom det er mulig lenke til kilden der vi har hentet bildet fra.

HOWTO – ordne bildetekst og vedlegssiden for bilder fra Wikimedia Commons og andre steder

Legge til opphavsinformasjon som legger seg over bildet
Visual Editor > Trykk på bildet > Velg blyant (edit) > Image Details > Caption

<span class="opphav">Illustrasjon: Kari Nordmann</span>

<span class="opphav">Foto: Ola Nordmann</span>

Fiks et bilde som ikke lenker til vedleggssiden (og jobb rundt noen WordPress bugs)

Det kommer forklaringer når du trykker på bildene.

Lenke til et bilde fra flickr

Dette er en variant av attribution-coden fra wikimedia commons. Her har jeg lagt inn lenke til linsens (creative commons CC BY 2.0), og lenke til flickr-siden som bildet kommer fra.

Denne koden limes inn i description-feltet for det aktuelle bildet i media library.

Opphavsrett: Alastair Vance [<a href="https://creativecommons.org/licenses/by/2.0/">CC BY 2.0</a>], <a href="https://www.flickr.com/photos/alastairvance/4498154629/">www.flickr.com/photos/alastairvance/4498154629</a>

To kolonner (kode-mal) til f.eks snutter

Lag en kolonne for bilder og en kolonne for tekst

tom kodemal

Lim inn denne koden og plasser bilder i første kolonne, og tekst i andre kolonne:

<div class="columns"><!-- kolonner start --> <div class="column"><!-- kolonne 1 start (bilder) --> </div><!-- kolonne 1 slutt (bilder) --> <div class="column"><!-- kolonne 2 start (tekst) --> </div><!-- kolonne 2 slutt (tekst) --> </div><!-- kolonner slutt -->

kodemal (utfylt eksempel)

<div class="columns"><!-- kolonner start --> <div class="column"><!-- kolonne 1 start (bilder) --> [caption id="attachment_4181" align="alignnone" width="300"] <img class="wp-image-4181 size-medium" src="(...)" alt="" width="300" height="201" /> <span class="opphav">Foto: Finn Jensen</span> [/caption] [caption id="attachment_4181" align="alignnone" width="300"] <img class="wp-image-4181 size-medium" src="(...)" alt="" width="300" height="201" /> <span class="opphav">Foto: Finn Jensen</span> [/caption] </div><!-- kolonne 1 slutt (bilder) --> <div class="column"><!-- kolonne 2 start (tekst) --> Planta bruker sukkeret for å vokse. De lager sin egen mat. Bladet slipper ut oksygen. Vi mennesker puster inn oksygen og puster ut karbondioksyd. Vi gjør det omvendte av plantene. Alt liv på jorda er avhengig av fotosyntesen. Enten lever vi og dyrene av planter, eller av dyr som spiser planter. </div><!-- kolonne 2 slutt (tekst) --> </div><!-- kolonner slutt -->

Filmer i snutter (f.eks youtube film i kolonne 1)

  1. Start med youtube-lenken og besøk siden: https://www.youtube.com/watch?v=I8W4LyIXINE
  2. Det finnes en lenke under filmen som heter Del/Share.
  3. Trykk på den og så på lenken BYGG INN/EMBED som kommer nede i pop-up.
  4. Fjern "vis foreslåtte videoer når avspillingen er ferdig (eller tilsv. på engelsk.
  5. Kopier iframe-koden og lim inn på rett sted (se eksempel nedenfor)

Eksempel fra siden: Kap-4 snutter, kaktus blomstrer om natta <!-- kolonner start --> <div class="columns"> <!-- kolonne 1 start (bilder)--> <div class="column"> <iframe width="560" height="315" src="https://www.youtube.com/embed/I8W4LyIXINE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> <!-- kolonne 1 slutt (bilder)--> </div> <!-- kolonne 2 start (tekst)--> <div class="column">Dette er en fort film om kaktus som blomstrer om natta. Ikke stikk deg på kaktus! Det er ikke godt. Men kaktus har rare og pene blomster! Noen likner på et fyrverkeri på en mørk himmel! Kaktusene i filmen blomstrer i løpet av ei natt. Kanskje bare i en time eller to. Og så er den åpen bare noen timer til. Hva er det disse blomstene lokker med? <!-- kolonne 2 slutt (tekst)--></div> <!-- kolonner slutt --> </div>

Figurer med bilder og tekst, side om side (eller neste linje om nøevendig) - .flexr

Utfylt eksempel, bruker classen "flexr"

Se live demo her: Kap-4 snutter Hvor-er-sommerfuglen? <div class="flexr"> <figure> [caption id="attachment_3248" align="alignnone" width="300"]<a href="https://lumbrikus.no/kapitler/kap-4/snutter/hvor-er-sommerfuglen/attachment/000/"><img class="wp-image-3248 size-medium" src="https://lumbrikus.no/wp-content/uploads/000-300x225.jpeg" alt="" width="300" height="225" /></a> Hva er dette? <span class="opphav">Foto: Konrad Lackerbeck </span>[/caption] <figcaption> Kan du se en sommerfugl her? Den hviler seg om dagen. Om natta finner den mat hos blomstene. Den heter kveld-påfugl-øye. Oppkalt etter påfugl? Men har ikke påfugler fine farger? </figcaption> </figure> <figure> [caption id="attachment_4444" align="alignnone" width="300"]<a href="https://lumbrikus.no/smerinthus_ocellatus_mhnt_female_dos/"><img class="wp-image-4444 size-medium" src="https://lumbrikus.no/wp-content/uploads/Smerinthus_ocellatus_MHNT_Female_dos-300x160.jpg" alt="" width="300" height="160" /></a>Kveld-påfugl-øye <span class="opphav">Foto: Didier Descouens</span>[/caption] <figcaption> Dette er den samme sommerfuglen. Når det kommer en fugl, sprer sommerfuglen vingene. Da ser vi to blå flekker. De likner på fargene til en påfugl, ikke sant? Og to store øyne? Da kan fugler skremmes vekk. </figcaption> </figure> <figure> [caption id="attachment_4445" align="alignnone" width="300"]<a href="https://lumbrikus.no/peacock-687106_1280/"><img class="wp-image-4445 size-medium" src="https://lumbrikus.no/wp-content/uploads/peacock-687106_1280-300x201.jpg" alt="" width="300" height="201" /></a>Påfugl <span class="opphav">Foto: Ligiera</span>[/caption] <figcaption> I bildet nederst ser vi en påfugl. Forstår du hvorfor sommerfuglen har fått navnet sitt? <figcaption> </figure> </div>