1.8. Afbeelding: Werken met afbeeldingen, presets.
Drupal kan niet alleen werken met tekstpagina’s, maar ook met afbeeldingen. Hiervoor moet je de module Afbeelding (Image) inschakelen. De Image-module maakt het mogelijk om foto’s aan nodes te koppelen en deze weer te geven met het formaat dat we nodig hebben. Bovendien kunnen deze formaten op verschillende plaatsen variëren. Zo kunnen we bijvoorbeeld in de teaser van een node een kleine foto gebruiken, en op de volledige node een grotere.
In eerdere lessen hebben we het inhoudstype Werknemer (Employee) aangemaakt. Laten we naar het tabblad Velden beheren van dit inhoudstype gaan en een afbeeldingsveld toevoegen.
Nu zal er in het formulier voor het aanmaken/bewerken van een werknemer een veld verschijnen voor het uploaden van een afbeelding:
Deze afbeelding wordt op de pagina van de werknemer weergegeven, maar in originele grootte en met het label van het afbeeldingsveld. Om de uitvoer te configureren, moeten we naar het tabblad Weergave beheren gaan in de instellingen van het inhoudstype Werknemer.
Laten we het afbeeldingsveld naar boven verplaatsen, de veldnaam verbergen en op het tandwielicoon klikken om de afbeeldingsgrootte in te stellen. Standaard hebben we al enkele vooraf ingestelde formaten (presets): Large (480x480), Medium (220x220) en Thumbnail (100x100). Laten we voor de teaser Thumbnail instellen en voor de volledige node Medium. Ook stellen we in dat de afbeelding in de teaser een link is naar de volledige werknemerspagina:
Nu zal in de teaserlijst elke werknemerafbeelding linken naar de volledige werknemerspagina.
Naast de standaardpresets Large, Medium en Thumbnail kun je ook je eigen afbeeldingsformaten maken. Ga naar Configuratie → Afbeeldingsstijlen:
/admin/config/media/image-styles
Daar zie je de bestaande presets en de knop Afbeeldingsstijl toevoegen:
Laten we een nieuw formaat van 150x150 pixels maken en het ook zo noemen. Op de bewerkpagina van de preset zien we acties die we kunnen toevoegen:
Convert – converteert de afbeelding naar een ander formaat.
Crop – snijdt de foto bij zonder te schalen.
Desaturate – maakt de afbeelding zwart-wit.
Resize – verandert de afmetingen zonder verhoudingen te behouden.
Rotation – roteert de afbeelding in een gewenste hoek.
Scale – verandert de afmetingen met behoud van verhoudingen.
Je kunt meerdere acties selecteren. Laten we bijvoorbeeld eerst de afbeelding schalen naar 150x150 en daarna zwart-wit maken.
Scale:
Ga nu terug naar het tabblad Weergave beheren en stel in dat het afbeeldingsveld in de teaser van de werknemer via de preset 150x150 wordt weergegeven.
Nu ziet de teaser van de werknemer er zo uit:
Je weet nu hoe je afbeeldingen in Drupal kunt uploaden en weergeven op de manier die jij wilt. In de volgende lessen bekijken we hoe we op een vergelijkbare manier een fotogalerij kunnen maken.