Download the PHP package webfactory/responsive-image-bundle without Composer

WebfactoryResponsiveImageBundle

A convenience Symfony bundle tailored for current responsive images needs of the webfactory GmbH, without any claims on reusability outside of this scope. Ye be warned.

Installation

composer req webfactory/responsive-image-bundle

Activate the bundle, e.g. in src/bundles.php:

If you intend to use lazyloading for images (which is the default), require "lazysizes": "^5.3" in your /package.json.

Twig macros

Responsive image:

responsiveImg(image, options) with:

• image: an array with the following keys:
  • url (mandatory): the URL of the image
  • alt (optional): the alternative text for the image. Defaults to empty string.
  • title (optional): the title text for the image. Defaults to empty string.
• options: an array with the following keys:
  • sizes (optional): a string that sets the sizes-Attribut. Defaults to auto, or to 100% if lazyloading is disabled and sizes is empty.
  • transformations_to_widths (optional): an object with thumbor transformation names as keys and image widths as values. Sets the srcset-Attribute, with the thumbor image URLs based on the given transformations as the source. Defaults to a srcset with keys from imagex_xxxs to image_xl respectively to values from 160w to 1600w.
  • class (optional): CSS classes to add to the image. Defaults to empty string.
  • data_attributes (optional): an iterable object with data-attribute names (= the part after data-) and values as key/value pairs. Defaults to empty string.
  • placeholder_filter: a string with the name of the thumbor transformation (i.e. image_lqip) which is added to the placeholder image when lazyloading the image. Should match the target dimensions of the image. A list of default transformations is provided with this bundle (see below) and can be overwritten / extended in the application configuration, e.g. the config.yml.
  • lazyload (optional): Use lazyloading. Defaults to true.
  • lqip (optional): Use the LQIP-method (original concept (2013), current popular LQIP options) of always loading a low-quality placeholder image. Defaults to true.

Example:

Responsive image with art direction:

macro responsivePicture(formats, options) with:

• formats: Array of objects, with each object describing a different format variant of the motive/picture by the following keys:
  • image_url (mandatory): the URL of the image in this format
  • options (optional): an array with the following keys that parametrize this format variant:
    • sizes (optional): a string that sets the sizes-Attribut. Defaults to auto, or to 100% if lazyloading is disabled and sizes is empty.
    • transformations_to_widths (optional): an object with thumbor transformation names as keys and image widths as values. Sets the srcset-Attribute, with the thumbor image URLs based on the given transformations as the source. Defaults to a srcset with keys from imagex_xxxs to image_xl respectively to values from 160w to 1600w.
    • media_query (optional): a string that sets the media query for the source element
• options: an array with the following keys:
  • class: Optional class to add to the img-tag. Defaults to empty class attribute is no value is given to keep the code readable.
  • alt (optional): the alternative text for the image. Defaults to empty string.
  • title (optional): the title text for the image. Defaults to empty string.
  • data_attributes (optional): an iterable object with data-attribute names (= the part after data-) and values as key/value pairs.
  • placeholder_filter: a string with the name of the thumbor transformation (i.e. image_lqip) which is added to the placeholder image when lazyloading the image. Should match the target dimensions of the image. A list of default transformations is provided with this bundle (see below) and can be overwritten / extended in the application configuration, e.g. the config.yml.
  • lazyload (optional): Use lazyloading. Defaults to true.
  • lqip (optional): Use the LQIP-method (original concept (2013), current popular LQIP options) of always loading a low-quality placeholder image. Defaults to true.

Example:

Responsive Background Video

responsiveBackgroundVideo(video, options) with:

• video: an array with the following keys:
  • url (mandatory): the URL of the image

• options: an array with the following keys:

  • transformations (optional): an object with thumbor transformation names as keys and MIME-Types as values. Defaults to

  • class (optional): CSS classes to add to the image. Defaults to empty string.
  • data_attributes (optional): an iterable object with data-attribute names (= the part after data-) and values as key/value pairs. Defaults to empty string.

Example:

Default Configuration for JbPhumborBundle

This bundle configures the JbPhumborBundle via the Resources/config/jb_phumbor-default-config*.yaml files, setting some default transformations and the Thumbor server settings. You can overwrite any jb_phumbor-setting in your application config.