Select Page

Het uitlijnen van afbeeldingen in WordPress verklaard

Het uitlijnen van afbeeldingen in WordPress verklaard

Het begrip uitlijnen van afbeeldingen wordt nog als eens verkeerd begrepen door WordPress beginnelingen. Wanneer u een afbeelding aan uw inhoud toevoegt, (hetzij in posts of in pagina’s) dan biedt WordPress 4 mogelijkheden om deze afbeelding uit te lijnen: links, midden, rechts en geen uitlijning.

Laten we deze eens achtereenvolgens bekijken:

Uitlijnen links

Een afbeelding die links uitgelijnd wordt, zal zich effectief aan de linkerzijde van de pagina bevinden, waar ze dan ook staat (dit kan de linkerkant van je WordPress post zijn of van de pagina-inhoud en voor gelijk welke andere inhoud (zoals tekst) zal de plaats rondom de andere 3 randen opgevuld worden – en zo wordt de plaats aan de rechterkant van de afbeelding helemaal opgevuld.

Een voorbeeld:

align-leftLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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. 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.

Uitlijnen in het midden

Wanneer u de positie van de afbeelding centraal wil uitlijnen (en dus gelijkmatig verdelen met een gelijke ruimte tussen de rechterkant en het midden en de linkerkant en het midden) dan kiest u voor uitlijnen in het midden. In tegenstelling met de uitlijning links zal de tekst in de buurt niet rond de afbeelding komen te staan. De tekst zal ofwel boven en onder de afbeelding komen te staan. Dit is afhankelijk van de plaats die u gekozen hebt voor uw afbeelding.

Voorbeeld:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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.

align-center

Uitlijnen rechts

Een afbeelding rechts uitlijnen, dat is zoals u zou kunnen verwachten, helemaal het tegenovergestelde van een afbeelding die links uitgelijnd wordt. De afbeelding zal dus gedrukt worden naar de rechterkant van het gedeelte van de pagina of post waar zij zich bevindt (dus de rechterkant van je WordPress pagina of inhoud) en alle andere inhoud zal zich rond de 3 andere randen positioneren en aldus zullen ze de linkerkant van de ruimte vullen.

Voorbeeld:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in align-rightvoluptate 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. 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.

Geen uitlijning

Afbeeldingen die geen uitlijning toegewezen kregen (door voor uitlijning: geen te kiezen) zullen zich precies bevinden op de plaats waar u ze neerzet. D.w.z. als u voor een positie kiest van een afbeelding door bewust geen uitlijning te kiezen binnen een paragraaf vol tekst (zie ook het onderstaande voorbeeld) dan zal de afbeelding binnen de lijnen van deze tekst vallen. En dat zal voor resultaat hebben dat er een stukje tekst zal kunnen gevonden worden aan de linkerkant, zowel als aan de rechterkant van de afbeelding (en dat is ervan uitgaande dat de afbeelding niet even breed is of breder dan de plaats waarin ze zich bevindt)

Maar dit is een beetje verwarrend: een afbeelding zonder uitlijning die zowel in de paragraaf zelf zit (dus op een nieuwe lijn binnen de WordPress editor en/ of specifiek binnen de HTML tags ‘p’) zal worden gepositioneerd aan de linkerzijde van de plaats waarbinnen het zich bevindt. (eigenlijk op een gelijkaardige plaats wanneer de uitlijning links gebeurd zou zijn), maar dan zonder tekst aan de rechterkant. Waarom? Omdat een afbeelding geen specifieke uitlijning heeft (of technisch uitgelegd: geen specifieke links – rechts uitlijning) binnen de eigen paragraaf (met geen andere elementen binnen de eigen paragraaf.) Ze zal gescheiden worden van de voorgaande en de daaropvolgende inhoud door een vooraf bepaalde ruimte aan witte lijnen, net zoals bij iedere andere paragraaf.

Voorbeeld:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non align-noneproident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Wat is er hier dus eigenlijk aan de hand?

Maar waarom gebeurt dit allemaal? Dit is eigenlijk allemaal te danken aan de computertaal die gebruikt wordt om de presentatie te maken. (lay-out, verhoudingen, kleuren, etc.) van webelementen die bekend zijn onder de naam cascading style sheets of css in het kort. In feite, iedere keer dat u een uitlijning links toekent aan een post of een pagina, zo kent WordPress bijvoorbeeld HTML klasse ‘links uitlijnen’ toe aan een afbeelding wat dan de afbeelding ertoe dwingt om een specifiek setje van css commando’s te volgen die de afbeelding vertellen wat zijn plaats is op de pagina – eenvoudig. Op dezelfde manier zal WordPress voor alle andere vermelde uitlijningen andere namen van klassen toekennen zoals uitlijnen centraal (voor afbeeldingen uitlijnen in het midden), uitlijnen rechts (voor afbeeldingen uitlijnen rechts) en uitlijnen geen voor afbeeldingen die geen specifieke uitlijning meegekregen hebben – zodat voor iedere referentie een ander stel van CSS commando’s bestaat.

Maar we moeten het toegeven dat het idee van css commando’s onder de knie te krijgen een beetje afschrikwekkend kan zijn voor de gemiddelde WordPress gebruiker. Maar indien u interesse hebt om hier meer over te weten te komen, dan krijgt u meteen een groot vrijheidsgevoel wanneer het gaat om uw inhoud te stylen. Of zelfs je ganse website. Als u geïnteresseerd bent in iets bij te leren, dan kunt u zichzelf ook eens goed laten gaan op Google, of binnenkort in ons artikel over het leren van CSS.

Samenvatting:

Dus hier kunt u het vinden: een uitleg over uitlijnen van afbeeldingen! In het kort: gebruik uitlijnen links wanneer u wilt dat een afbeelding zich aan de linkerkant bevindt en de andere elementen zich rond de afbeelding positioneren, gebruik centraal uitlijnen wanneer u de afbeelding in het midden/ centraal wilt hebben zonder andere dingen langs de zijkanten, en gebruik uitlijnen rechts wanneer u een element langs rechts wilt laten zitten en zodat andere elementen er rond kunnen zitten langs de linkerkant. Gebruik uitlijnen geen wanneer u een element zelf wilt kunnen positioneren in verhouding tot de andere elementen zoals tekst bvb. En als laatste: als u een bepaald element wilt laten zitten aan de linkerkant van de inhoud waar het zich bevindt, maar u wilt geen tekst aan de rechterkant ervan, gebruik dan geen uitlijning en zorg ervoor dat het in een eigen privé-paragraaf zit.

Welke manier van uitlijning gebruik jij het liefst? En waarom? Laat het ons weten in de comments!

About The Author

Peter Kuipers

Peter is WordPress fanaat, Hosting en Linux specialist en uitgever van diverse online magazines. Daarnaast houd hij van Lekker eten, woont sinds kort in Oostende, en bezoekt regelmatig een WP Meetup.

Door de site te te blijven gebruiken, gaat u akkoord met het gebruik van cookies. meer informatie

Deze site gebruikt cookies om haar services te leveren, advertenties te personaliseren en verkeer te analyseren. Informatie over je gebruik van deze site wordt gedeeld met Google. Als je deze site gebruikt, ga je akkoord met het gebruik van cookies.

Sluiten