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.


No comments:

Post a Comment

Insert search keyword(s) & press enter...

Subscribe & Get Latest Stories via Mail...

 
Our website development is made possible by displaying online advertisements.
Please consider supporting us & our projects by disabling your Ad Blocker. Thank You.
Our website requires javascripts turned on for best user experience.
Please consider to turn on your web browser javascript. Thank You.
GDPR: Data submitted at our site is managed by 3rd party processors. Read more on how data is collected, managed & processed at our site. Learn More