Een class toevoegen aan een image field

Tijdens het ontwikkelen van Drupal websites lopen we wel eens tegen specifieke problemen aan. Deze artikelen geven de opgedane ervaringen weer, zodat andere ontwikkelaars of geavanceerde gebruikers van Drupal daar eventueel hun voordeel mee kunnen doen.

Om een caption aan een afbeelding toe te voegen kan je gebruik maken van de Image Caption module. Deze module kijkt naar de 'title' attribuut van de afbeelding en maakt daar een caption van met jQuery. Om dit voor elkaar te krijgen moet je de 'caption' css class aan de afbeelding toevoegen.

Dat is voor een normale afbeelding niet zo moeilijk, zeker niet als je een wysiwyg editor als TinyMCE of CKEditor gebruikt.

Moeilijker wordt het als je een class toe wilt voegen aan een afbeeldingsveld (image field) dat je aan een inhoudstype hebt toegevoegd. In de standaard gebruikers interface is dat niet mogelijk, dus moet er in de code worden gedoken. Gelukkig gaat dat in Drupal redelijk eenvoudig. Er zijn meerdere mogelijkheden, maar een eenvoudige methode is het schrijven van een functie in template.php.

function THEMENAME_preprocess_image(&$variables) {
  // Als deze afbeelding van het type 'Werk overzicht' is, zet er dan extra css klasses in:
  if ($variables['style_name'] == 'werk-overzicht') {
    $variables['attributes']['class'][] = 'caption';
  }
}