makinacorpus/drupal-iresponsive

Image field formatter and theme functions for rendering responsive images using image styles

Responsive image formatter for Drupal

This module brings theme functions and a field formatter to display responsive images. It supports two different HTML tags:, _(*1)

• <IMG> tag using srcsrc attribute;
• <PICTURE> tag using <SOURCE> elements.

The <IMG> tag supports the sizes attribute allowing to set a relative viewport sizes for images at the field display configuration level, allowing the browser to proceed with better image selection for download., _(*2)

This modules won't allow you to provide your own image styles, it only provides two different modes:, _(*3)

• Image keeps the original image ratio;
• Square image.

Future plans is to support more complex image styles (maybe by merging this module own styles using a user provided one)., _(*4)

This ships the Picturefill 2.0 polyfill to ensure graceful downgrade for old browsers., _(*5)

Installation

Just download and enable the module., _(*6)

Confguration

You may want to override available sizes for images, default is:, _(*7)

[285, 570, 855, 1140, 1440], _(*8)

In order to override it, just add in your settings.php file:, _(*9)

$conf['iresponsive_image_size_list'] = [200, 300, 500, 1400, ...];

Usage

For image fields

Select Responsive image as display formatter, quite straightforward ?, _(*10)

Displaying manually an image

Use one of ireponsive_img or iresponsive_picture theme hooks and proceed this way with render arrays:, _(*11)

// Considering that $file is loaded file_managed.
$build['my_image'] = [
  '#theme'        => 'iresponsive_picture',
  '#image_uri'    => $file->uri,
  '#image_width'  => $file->width,
  '#image_height' => $file->height,
  '#image_alt'    => t("Some alternative text"),
  '#image_title'  => t("Some HTML title tag"),
  // Note that 'w' is the default, and keeps ratio while 's' is for square.
  '#modifier'     => 'w',
  // Default size must exist in iresponsive_image_size_list() function defaults
  // the 'iresponsive_image_size_list' variable if you overrided it.
  '#default_size' => $settings['default_size'],
  // If you set to true, this will include the original image, but without
  // any transformation (no square, etc...) in the image sources.
  '#include_full' => false,
  // Targetted image size in viewport percent (aka 'vh' unit in CSS).
  '#viewport'     => 50,
];

Or if you write Drupal 6 old school code (but you should never do this):, _(*12)

// Considering that $file is loaded file_managed.
theme(''iresponsive_picture', [
  'image_uri'    => $file->uri,
  'image_width'  => $file->width,
  'image_height' => $file->height,
  'image_alt'    => t("Some alternative text"),
  'image_title'  => t("Some HTML title tag"),
  // Note that 'w' is the default, and keeps ratio while 's' is for square.
  'modifier'     => 'w',
  // Default size must exist in iresponsive_image_size_list() function defaults
  // the 'iresponsive_image_size_list' variable if you overrided it.
  'default_size' => $settings['default_size'],
  // If you set to true, this will include the original image, but without
  // any transformation (no square, etc...) in the image sources.
  'include_full' => false,
  // Targetted image size in viewport percent (aka 'vh' unit in CSS).
  'viewport'     => 50,
]);