Grav: Afbeelding rechts uitlijnen

right-arrow

Ondertussen gebruik ik Grav al een tijdje. Ik moest wat wennen aan markdown - maar intussen kan ik mij prima redden met het opmaken van pagina's in Grav.

Wat ik wel mis is het eenvoudig uitlijnen van afbeeldingen. Ik vind het soms wel fraai om rechts van de tekst een afbeelding weer te geven - in en fatsoenlijk formaat - waarbij je door erop te klikken een groot formaat te zien krijgt.

Wat ik hierop gevonden heb is de volgende oplossing:

  • toevoeging custom CSS
  • gebruik maken van Lightbox in combinatie met Featherlight (plugin)

Eerst heb ik de plugin Featherlight geïnstalleerd.

Vervolgens heb ik de volgende CSS toegevoegd aan custom.scss in de map user/themes/g5_helium/custom/scss.

img.right30p {
 float: right; 
 margin-left: 5px;
 margin-bottom: 5px;
 max-width: 30%;
 height: auto;
}

Een afbeelding invoegen in een post doe ik als volgt:

![Afbeelding](Afbeelding.jpg?classes=right30p&lightbox)

Ik verklein de afbeelding naar 30 procent. Dit werkt prima op mobiele telefoons, tablets en computers. Misschien pas ik dat nog aan naar 33 procent. Maar veel meer dan 1/3ᵉ van het scherm is niet nodig.

Ik maak geen gebruik van &cropResize=30%. Ik heb de grootte (max-width) in de CSS verwerkt en de hoogte (height) heb ik op auto gezet. In plaats van max-width zou je nog gewoon width kunnen gebruiken.

Online vind ik diverse oplossingen waarbij onder andere met HTML tags gewerkt wordt - maar dat vind ik niet fraai wanneer markdown gebruikt wordt. Op deze manier houd ik het (zoveel mogelijk) bij markdown en hoef ik alleen maar te onthouden dat ik een class mee moet geven (classes) en dat ik een lightbox wil gebruiken (lightbox).

Volgende Post Vorige Post