Styr billeder i WordPressWordPress og billeder - driller det dig at placere billeder rigtigt i forhold til tekst? Det er ret nemt, hvis du bare lige ved, hvordan det skal gøres - og hvis du har installeret et smart plugin

Billedet til højre har jeg valgt at vise med en tynd ramme om. Og med 25 pixel luft mellem billedet og teksten til venstre samt 5 pixels luft under billedet. Rammen og luften mellem billede og tekst er nemt at indsætte på grund af det smarte plugin.

Det kan installeres på få minutter og gør det nemt for dig at:

  • Lave ramme om billeder
  • Fjerne ramme om billeder
  • Styre afstanden til tekst

Start med at installere plugin’net.

Uden det skal du nemlig være lidt af en kodenørd for at få billeder til at makke ret og placere sig dér, hvor du ønsker dem.

Billedredigering i WordPress

 

Normalt får du boksen herover frem, hvis du klikker på et indsat billede og vælger at redigere det ved at aktivere ikonet med blyanten.

Du kan styre billedets størrelse.
Du kan også styre justering - altså billedets placering i forhold til teksten. Du kan vælge venstre (til venstre for tekst), center (centreret over teksten), højre (til højre for tekst) eller ingen (tekst placeres under billedet). Mere om det senere.

Luft mellem billede og tekst

Vil du nemt kunne styre, om der skal være 10 eller 25 pixels luft fra billedet til teksten - og om der skal være ramme eller ej om billede - skal du lige installere det smarte plugin.

Installer plugin - advanced image styles

Du skal finde det plugin, der hedder Advanced Image Styles.
Installer det ved at logge på din WordPress og gå ind i området “Plugins”.

Advanced image styles

Når plugin’net er installeret og aktiveret, får du nye muligheder at se, når du vælger at redigere et billede (ved at akivere ikonet med en blyant).

Styre billeders placering i WordPress

Læg mærke til de valgmuligheder, du nu har fået nederst i boksen - lige under “Avancerede indstillinger”.

Rammer eller ej

Du kan vælge Image border - altså styre, om der skal være ramme om billedet.
Skriver du 0 i boksen kommer der ingen ramme om billedet.
Smart, hvis der er tale om et såkaldt fritskrabet motiv.

Skriver du 1 i boksen kommer der en tynd ramme.
Skriver du 2 … det kan du selv regne ud.

Margin om billeder

Du kan også - med tal - styre, hvor mange pixels luft der skal være fra billedet til teksten.
Skriver du 25 kommer der 25 pixels luft.

Og så et smart lille trick.
Skriver du et minus-tal, kan du få billedet til at rykke sig.
Prøv at skrive -150 i boksen under top - og billedet vil rykke 150 pixel opad.

Den nemmeste måde at lære det på er at lege og prøve sig frem.

Undgå at billeder linker til sig selv

Undgå link på billederDet er en helt almindelig fejl, at billeder indsættes i en minde størrelse og med link til en større version af samme billede.

Det er fint at gøre, hvis du viser et udsnit af et kort. Eller en alt for lille version af et meget stort billede.
Det er naturligvis også i orden, hvis billedet er en knap, der SKAL linke til enten en mailadresse, en side, et blogindlæg eller en bestemt funktion.

Men i langt de fleste tilfælde er det uheldigt at gøre billeder til aktive link. Det er især træls for de brugere, der kommer til at placere tommeltotten på billedet, når de surfer via smartphone eller tablet. Lige pludselig havner man et andet sted en ventet.

Gør det derfor til en vane at sikre, at billedet IKKE er forsynet med et aktivt link. Medmindre, naturligvis, at det er nødvendigt.

Gør en knap til et aktivt link

HHent gratis ebog om at blogge dig til succeser ser du en knap, der linker til en eBog om at blogge. Du hverken køber eller bestiller noget ved at klikke på den her. Den fører blot til siden, hvor du kan hente eBogen - som i øvrigt er gratis.

Herunder kan du se de indstillinger, jeg har valgt til knappen.

Vælg indstillingen Tilpasset URL (turkis pil) for at kunne indsætte det ønskede link i formularen ved den lilla pil.
Sæt flueben i boksen “Åbn link i et nyt vindue/faneblad” hvis du vil have, at folk ikke forsvinder fra den aktuelle side, når de aktiverer knappen.

Gør knap til aktivt link

Husk at gøre billeder klar til brug på nettet

Alt for mange sætter billeder ind direkte fra deres kamera - billeder, der ofte fylder mange megabyte.
Du bør have styr på, hvor stor dinne billeder er. Mine billeder i blogindlæg skal eksempelvis ikke være større end 650 pixels brede - ergo er der ingen grund til, at jeg uploadet dem i betydeligt større version.

Du SKAL lære at bruge et billedbehandlingsprogram til et minimum at billedbehandling. Eksempelvis til at forvandle billeder fra 24000 pixel brede til eksempelvis 650 pixel.

I WordPress kan du i øvrigt - under indstillinger - vælge hvilke størrelser billeder skal lagres i, når du uploader et billede. Uploader jeg eksempelvis et billede, der er 1000 pixel bred (den størrelse bruger jeg på siden uden højre kolonne) vil det også bliver gemt i bredden 650 pixel samt 350 pixel.

 

Billedplacering - venstre, centreret, højre, ingen

hismoglyf_no5Hismoglyffen er her indsat til at blive placeret til højre for teksten.
Når et billede placeres, er det i virkeligheden nogle koder til et billede, der sættes ind. Og de skal altid sættes ind i venstre side af teksten. Helst i begyndelsen af et afsnit. Derefter kan du styre, hvordan billedet skal placeres i forhold til teksten.

Jeg har her valgt, at der skal være en pixel ramme om billedet af hismoglyffen. Det ser ikke pænt ud, så de andre hismoglyffer sætter jeg ind uden ramme. Altså med border  = 0

 

 

hismoglyf_no2Den røde hismoglyf er sat ind til at blive placeret centreret. Det betyder, at al tekst placerer sig under billedet. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

hismoglyf_no4Hismoglyffen er her sat ind til at blive placeret til venstre for teksten. Og du skal bide mærke i den lille, men væsentlige detalje. Når du vælger placeringen venstre betyder det nemlig ikke kun “venstre side” - det betyder “til venstre for teksten”. Det betyder med andre ord, at teksten skal kravle op ad billedets højre side.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

hismoglyf_no3Hismoglyffen er indsat med placeringen ingen. Det betyder, at teksten ikke glider op omkring billedet på hverken den ene eller anden side. Ofte vil den første linje tekst stå lidt oppe af billedet. Det klarer du med et tryk på enter/retur-tasten.

Herunder har jeg sat alle hismoglyffer ind med placeringen ingen - samt en tynd ramme om, så du kan se, at der er seks billeder.

Er det små billeder placerer de sig i bedste fald pænt ved siden af hinanden.
Men der er ikke styr på dem. De vil ofte hoppe og danse ukontrollabelt - afhængigt af hvilken størrelse skærm de ses på.

Man kan altså ikke uden videre placere 2-3-4-5-6 ellere flere billeder ved siden af hinanden.

Men det kan du klare med et simpelt trick.

hismoglyf_no1hismoglyf_no6hismoglyf_no3hismoglyf_no4hismoglyf_no2hismoglyf_no5

Flere billeder ved siden af hinanden

Den nemme smutvej til at placere flere billeder ved siden af hinanden er at sætte dem ind ved siden af hinanden, så de står pænt, som de skal.
Du kan gøre det i WordPress eller i et tekstbehandlingsprogram eller et billedebehandlingsprogram.

Sørg for, at alle billeder står pænt ved siden af hinanden, med eller uden ramme omkring, og tag så et screendump af dem alle. Et klassebillede så at sige.

hismoglyffer på stribe

Herover ser du seks hismoglyffer i glas og ramme. Altså ikke seks billeder, men ét billede af seks hismoglyffer. Sådan kan man med et lille, simpelt husmandstrick nemt sætte 2-3 eller flere billeder ind ved siden af hinanden og sikre, at de holder sig pænt på række.

Jeg synes de er pænest uden ramme.

hismoglyffer på stribe