adamrobinson
1/7/2020 - 2:23 PM

Drupal: Add classes to Responsive Image Formatter

Add classes to any image that has a responive image formatter.

numiko.theme
content_copyfile_download
function numiko_preprocess_responsive_image_formatter(array &$variables) {

  /**
   * Lazyload image classes
   **/
  $lazyloadResponsiveStyles = [
    'hero',
    'teaser'
  ];

  if (!empty($variables['responsive_image_style_id'])) {
    if (in_array($variables['responsive_image_style_id'], $lazyloadResponsiveStyles)){
      $variables['responsive_image']['#attributes']['class'][] = 'lazyload absolute w-full h-full object-cover top-0 left-0';
    }
  }


  /**
   *  Hero image classes
   **/ 
  if (!empty($variables['responsive_image_style_id'])) {
    if ($variables['responsive_image_style_id'] == 'hero'){
      $variables['responsive_image']['#attributes']['class'][] = 'absolute left-0 top-0 h-full w-full object-fit-cover';
    }
  }
}