- Get link
- Other Apps
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.
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"
}' />
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"
}' />