Blogger Operator: sourceSet()

Blogger responsive image sourceSet operators are very useful when you want to ensure that an image is displayed in a suitable size for different devices. Generally this will be used to get a cropped thumbnail of an image, or to create a responsive image for a mobile-friendly template.

Syntax

sourceSet(imageUrl, newSizes, optionalRatio)

Syntax Details

imageUrl
The original URL of the resizable image.

newSizes
An array of new widths of the image

optionalRatio
The integer ratio of width to height for the resized image, e.g. “1:1” or “4:3”

Fallback

If the image URL parameter is not a resizable image, the sourceSet function will return an empty string.

Example Usages

<img expr:src=’data:post.firstImageUrl’ expr:srcset=’sourceSet(data:post.firstImageUrl, [128, 256, 512])’ />

The above returns 3 images sizes in 3 different breakpoints for screen widths.

On mobile devices screens, the image size of 128px will be used while on medium screen sizes ie tablets, the image size of 256px will be used instead.

Later the post image size of 512px will be used for larger screens.