Markup Snippets

This page details several Layouts markup snippets which are provided and available globally, by default.

responsiveImage

The responsiveImage includable helps to easily produce a responsive image tag, using the img tag, and the srcset attribute.

data

The responsiveImage includable takes a configuration data object with the following parameters.

imageSizes - array - Set of integer image sizes (widths) to add @media tags for. Must be in increasing order. Defaults to [200, 400, 800, 1200, 1600] when not specified.
imageRatio - string - Ratio of width to height, e.g. "4:3". Defaults to null.
Note that, when specified, this causes the image to be explicitly cropped to the given width and height.
sourceSizes - string - An optional string representing a valid source size list. Required when the imageSizes correspond to width descriptor, instead of pixel density descriptors.
See http://w3c.github.io/html/semantics-embedded-content.html#valid-source-size-list. for more info.
imageClass - string - An optional CSS class to apply to the img tag.

Example usage

<b:include name='responsiveImage'
           data='{
                    image: data:post.featuredImage,
                    imageSizes: [32, 64, 128, 256],
                    imageRatio: "1:1",
                    sourceSizes: "(max-width: 800px) 12vw, 128px"
                 }' />
This example features in the Contempo theme's Blog markup. Contempo uses square (1:1 ratio) images, which have CSS specifying a width of 12vw (12% of the viewport width) for up to 800px wide, and then a fixed width of 128px after that. The responsive image uses sizes 32, 64, 128, and the 256 in case the display is 2x (double pixel density).

responsiveImageStyle

The responsiveImageStyle includable helps to easily produce a responsive background in CSS, using a style tag and @media selectors.

data

The responsiveImageStyle includable takes a configuration data object with the following parameters.

imageSizes - array - Set of integer image sizes to add @media tags for. Defaults to [200, 400, 800, 1200, 1600] if not specified.
imageRatio - string - Ratio of width to height, e.g. "4:3". Defaults to null.
selector - string - Selector to use for the generated CSS rules.

Example usage


<div class='header-widget'></div>
<b:include name='responsiveImageStyle'
           cond='data:this.image'
           data='{
             image: data:this.image,
             selector: ".header-widget"
           }' />
This example features in the Header gadget's default markup. It is used when the 'Behind the title' option for the background is used, applying the image as the background of the header-widget div.