1.8. Afbeelding - Werken met afbeeldingen en afbeeldingsstijlen.
Drupal kan niet alleen met tekstpagina’s werken, maar ook met afbeeldingen. Hiervoor moet je de Image-module inschakelen. De Image-module laat je toe om foto’s aan nodes toe te voegen en deze weer te geven in het formaat dat jij nodig hebt. Op verschillende plaatsen kunnen deze formaten variëren. Zo kunnen we bijvoorbeeld in de teaser van een node een kleine afbeelding tonen, en op de volledige node een grotere.
In de vorige lessen hebben we het inhoudstype Werknemer aangemaakt. Laten we nu naar het beheer van de velden van dit inhoudstype gaan en een afbeeldingsveld toevoegen.
Nu zal er in het formulier voor het aanmaken/bewerken van een werknemer een afbeeldingsveld verschijnen:
Deze afbeelding wordt weergegeven op de werknemerspagina, maar in de originele grootte en met het label “Afbeelding”. Om de weergave aan te passen, ga je naar het tabblad Weergave beheren (Manage display) in de instellingen van het inhoudstype Werknemer.
Verplaats het afbeeldingsveld naar boven, verwijder de veldnaamweergave en klik op het tandwiel (instellingen) om de afbeeldingsgrootte in te stellen. Standaard bestaan er al afbeeldingsstijlen: Large (480x480), Medium (220x220), Thumbnail (100x100). Stel in dat de teaser de stijl Thumbnail gebruikt en de volledige node Medium. Zorg er ook voor dat in de teaser de afbeelding een link is naar de volledige inhoud van de werknemer:
Nu zullen werknemers in teaser-lijsten klikbare links zijn naar hun volledige pagina. Naast de bestaande stijlen Large, Medium en Thumbnail kun je ook eigen afbeeldingsstijlen aanmaken. Ga hiervoor naar Configuratie → Afbeeldingsstijlen:
/admin/config/media/image-styles
Daar zie je de bestaande stijlen en de knop Afbeeldingsstijl toevoegen.
Stel de grootte in op 150x150 pixels en geef de stijl een herkenbare naam zodat je deze later gemakkelijk kunt terugvinden. Op de bewerkingspagina zie je de acties die kunnen worden toegevoegd:
Convert – converteert een foto naar de gewenste resolutie.
Crop – snijdt de foto bij zonder te schalen.
Desaturate – maakt de foto zwart-wit.
Resize – wijzigt het formaat zonder de verhoudingen te behouden.
Rotate – draait de foto in de gewenste hoek.
Scale – wijzigt de grootte met behoud van de verhoudingen.
Scale and crop – schaalt de afbeelding met behoud van de verhoudingen en snijdt vervolgens bij aan de lange zijde.
Je kunt meerdere acties selecteren. Laten we bijvoorbeeld eerst schalen naar 150x150 en daarna de foto zwart-wit maken.
Schalen:
Het zou er ongeveer zo moeten uitzien:
Ga nu terug naar de pagina Weergave beheren van het veld en stel voor de teaser van de werknemer de afbeeldingsstijl 150x150 in.
De teaser van de werknemer zal er nu als volgt uitzien:
Nu weet je hoe je foto’s kunt uploaden in Drupal en hoe je ze kunt weergeven op de manier die jij wilt. In de volgende lessen zullen we uitleggen hoe je op een gelijkaardige manier een fotogalerij kunt maken.