Responsive Images

JSON

{
	"default": {
		"src": "https://www.lean-labs.com/hubfs/sr-assets/pattern-library/sr-bling-graphic-01/sr-bling-graphic-01.jpg",
		"alt": "Describe your image",
		"width": "900",
		"height": "600"
	},
	"label": "Image",
	"name": "bling_image",
	"type": "image",
	"help_text": "Recommended size: 900x600px"
},
{
	"default": true,
	"label": "SR Default Image Size",
	"name": "sr_default_image_size",
	"type": "boolean"
}

Note: Background images do not require the "SR Default Image Size" boolean.

Using Images in Modules / Templates

Format: {{ var.image(src, width, alt) }} where width is the 1x image size for large screens in pixels.

{% if module.sr_default_image_size %}
	{{ var.image(module.bling_image.src, '600', module.bling_image.alt) }}
{% else %}
	{{ var.image(module.bling_image.src, module.bling_image.width, module.bling_image.alt) }}
{% endif %}

Using Background Images in CSS

Format: {{ var.bg_image(src, width) }} where the first instance of width is the 1x image size for small screens in pixels and the second one for large screens.

.{{ name }} {
	{{ var.bg_image(module.background_image.src, '600') }}
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
}
@media (min-width: 768px) {
	.{{ name }} {
		{{ var.bg_image(module.background_image.src, '1440') }}
	}
}