Bilder i Joomla-artikler

I dette eksempelet bruker vi tekstbehandleren / editoren JCE. Hele prosessen - fra opplasting til plassering - gjøres fra bildebehandleren, som du åpner ved å klikke på ikonet Insert / Edit image. Husk å plassere markøren på den tekstlinjen bildet skal være justert i forhold til.

Last opp bildet

Før du kan plassere bildet i artikkelen, må du laste det opp til serveren.

I vinduet Add / Insert image klikker du på ikonet Last opp, og du vil få opp en ny boks kalt Upload. Boksen består av flere små felter.

Browse

Klikk på Add for å velge et bilde fra din datamaskin for opplasting. Det er mulig å velge flere bilder før du klikker Upload. Listen over bilder som er klare til opplasting befinner seg i feltet Queue ( Kø ).

Resize

Det er en stor fordel om du lager bildet i riktig størrelse før du laster det opp til websiden din. Riktig størrelse er den størrelsen bildet skal vises i på web.

Hvis du ikke har et bildebehandlingsprogram tilgjengelig, kan du bruker Resize-funksjonen in JCE. Angi høyde og bredde, og bildestørrelsen endres under opplastingen.

Rotate

Denne funksjonen brukes hvis du ønsker å vise et stående bilde i liggende format eller omvendt. Den er ikke mye brukt, fordi man vanligvis gjør slike endringer i et bildebehandligsprogram. Men det er mulig å gjøre det her.

Thumbnail

Et thumbnail-bilde er en mindre versjon av originalen. Det er vanlig å plassere et klikkbart thumbnail-bilde i en artikkel, og la den store versjonen "poppe opp" når man klikker på det. Bildet til høyre er et eksempel på dette.

Når du laster opp et bilde, kan du sette editoren til å generere en thumnail-versjon i samme slengen. Huk av i boksen for Thumbnail og definer lengden på bildets lengste side (høyden når bildet er stående, lengden når bildet er liggende).

Se Thumbnails og Popups lenger nede på denne siden

Når du har tatt dine valg, klikk Upload.

Plassere bildet i artikkelen

Når bildet er lastet opp, vil du finne det i listen over bilder i boksen Insert / Edit image. Klikk på filnavnet for å få frem bildeadressen og annen relevant informasjon. Du kan deretter endre innstillingene for bildet slik at det plasseres slik du ønsker:

Nettadresse

Dette er adressen til bildefilen. Den må være på plass for at bildet skal kunne plasseres i artikkelen.

Alternate Text

Beskriver bildet for søkemotorer og nettbrukere med nedsatt syn etc.

Dimensions

Som nevnt tidligere i denne artikkelen bør du laste opp bildet i det formatet det skal vises på nettet.

I feltet Dimensions kan du tvinge et bilde til å vises i en annen størrelse enn det i virkeligheten har. Du kan for eksempel få et bilde som er 2500 piksler bredt til å se 200 piksler bredt ut. Dette er ikke tilrådelig.

Grunnen til at vi fraråder å bruke Dimensions, er at store bilder gjør at det tar mer tid å laste inn websiden din. Og et bilde på 700 kilobyte er 700 kilobyte selv om du tvinger det til å vises i 200 pikslers bredde.

Justering

Her bestemmer du hvordan bildet skal justeres i forhold til teksten. De mest brukte alternativene er Høyre og Venstre.

Margin

Det ser ikke bra ut når bilde og tekst er klint inntil hverandre. Legg til noen piksler margin rundt bildet, så tar det seg bedre ut.

Ramme

Du kan legge en ramme rundt bildet, hvis du ønsker det. Her velger du tykkelse, stil og farge på rammen.

Merk! Hvis du ønsker at alle bilder på websiden din skal ha en ramme i en bestemt stil, er det bedre å få dette definert i CSS-koden til websidens template. Da vil nemlig bilder få den ønskede stylingen uten at du trenger å gjøre noe som helst med Rammer når du legger inn bildet. Les mer om Design og CSS.

Sett bildet inn i artikkelen ved å klikke på Insert.

Slik ble resultatet med innstillingene i feltet Image Manager Extended over.

Thumbnails og Popups

Steg for steg-beskrivelse av hvordan man legger inn et popup-bilde i en artikkel.

1. Last opp et stort bilde ( 800 x 600 piksler for eksempel ), huk av i Thumbnail-boksen og sett bredden thumbnail-versjonen skal ha, for eksempel 150 piksler.

Thumnail-bildet lagres automatisk i en mappe under mappen hovedbildet ligger i, kalt /thumbnails.

2. Når du skal sette inn bildet, går du til fanen Popup i Image Manager Extended-boksen.

Huk av i boksen Aktiver og klikk på filnavnet til det store bildet. På spørsmålet Use associated thumbnail? ( Bruk tilhørende thumnail-bilde? ) svarer på Ja. På den måten trenger du ikke å lete frem riktig thumnail-version selv.

Legg en relevant tekst i Caption-feltet. Merk og kopier denne teksten.

3. Gå til fanen Bilde. Fremgangsmåten for å legge inn thumnail-bilder er lik den man bruker for å legge inn ordnære bilder.

Lim inn bildebeskrivelsen i feltet Alternate text.

Angi Justering og Margin. Klikk deretter på Insert for å plassere bildet i artikkelen.

Lagre artikkelen og thumnail / popup-bildet skal være på plass.

Resultat

Det store bildet ( popup-versjonen ) åpner seg når man klikker på det lille bildet i artikkelen ( thumbnail-versjonen). Billedteksten vises fordi den er definert under innlegging av bildene.