Images

Theme base has a set of image macros to help with rendering images with different configurations. All add the lazy attribute to image by default.

Responsive Picture#

A shorthand for outputting responsive picture elemets. This macro will calculate image transforms at our breakpoints based on the designSize variable which is configured in the macro itself (default 1440).

imageWidth {Number} REQUIRED The width of the image in a 1440px design.
imageHeight {Number} optional The height of the image in a 1440px design.

  {% import '_inc/_macros/image' as imageMacros %}
  {{ imageMacros.responsive({
    image: myImage,
    imageWidth: 500,
    imageHeight: 500
  }) }}

Standard Image#

Outputs a standard img tag it takes the following options:

image {Craft image} REQUIRED A craft image object
classes {String} Space separated list of classes
styles {String} Styles to write to the image
transform {Craft transform} A craft transform object
alt {String} Content for the alt tag, will use image title if none supplied

Example with an image URL#

(Image URLs can't use transforms)

{% import '_inc/_macros/image' as imageMacros %}
{{
  imageMacros.img({
  image: "https://localhost:3000/uploads/images/image1.jpg",
  classes: "mt-1"
  })
}}

Example with a craft Image object#

{% import '_inc/_macros/image' as imageMacros %}
{{
  imageMacros.img({
    image: imageOne,
    classes: "mt-1",
    transform: {width:500, height:400, mode:'fit'},
    styles:'mb-5',
    alt: 'A developer reading docs.'
  })
}}

Picture#

Outputs a picture tag with srcset using native lazy loading

image {Craft image} REQUIRED A craft image object
srcsets {array} REQUIRED And array of srcsets to add using see below
classes {String} Space separated list of classes
styles {String} Styles to write to the image
alt {String} Content for the alt tag, will use image title if none supplied

srcset syntax#

See defaultOptions in the code for the default srcsets.

Each srcset in srcsets should be an object with these options:

image {Craft image} An image for this srcset instead of the one defined in the main options object (above)
transform {Craft transform} REQUIRED
rule {string} REQUIRED A media query for this srcset. Can be empty string.

Example with Two different images#

In some cases we might want to have a different image on one breakpoint and another image at second breakpoint e.g. a different hero on mobile and desktop browsers.

imageOne is rendered (transformed to 500px wide) up to 599px.

Then imageTwo is rendered (transformed to 1920px wide) above 600px

{% import '_inc/_macros/image' as imageMacros %}
{{ imageMacros.picture({
   image: imageOne,
   srcsets:[
    {
      image:imageTwo,
      rule:"(min-width: 600px)",
      transform:{width:1200, mode:'fit'},
    },
    {
      rule:"",
      transform:{width:500, mode:'fit'},
    }
   ]})
}}