larva components: `c-lazy-image`

Available Variants

prototype

c-lazy-image README

This is our lazy loading, responsive image pattern. It is optimized to provide an aspect ratio and no reflow when the image is loaded for a smooth user experience. Images loaded using this pattern must:

Option 1: Be cropped using a class from a-crop applied to c_lazy_image_crop_class. This is the most common and simplest option.

Option 2: Calculate a padding-bottom value based on the image's height and width in c_lazy_image_crop_style_attr. This is useful for images with unpredictable aspect ratios such as those in the_contentin WordPress.

Option 2: Inline aspect ratio

An example of calculating the padding-bottom attribute in a PHP object is as follows:

if ( ! empty( $image_height ) && ! empty( $image_width ) ) {
    $post_content_image['c_lazy_image_crop_style_attr'] = 'padding-bottom:calc((' . $image_height . '/' . $image_width . ')*100%);';
}

Assuming an image URL in the following format: https://pmcdeadline2.files.wordpress.com/2019/10/monica-beletsky-apple.jpg?w=450&h=253&crop=1

The image's dimensions are retrieved from the image URL in class-image-caption.php using the following regex (adapted from the ArtNews 2019 theme in class-image-captions.php):

$image_src    = '';
$image_height = '';
$image_width  = '';
if ( preg_match(
    "/\<img.+src\=(?:\"|\')(.+?)(?:\"|\').+width\=(?:\"|\')(.+?)(?:\"|\').+height\=(?:\"|\')(.+?)(?:\"|\')\>/",
    $content,
    $matches
) ) {
    $image_src    = $matches[1]; // @codeCoverageIgnore
    $image_width  = $matches[2]; // @codeCoverageIgnore
    $image_height = $matches[3]; // @codeCoverageIgnore
}

c-lazy-image Twig The markup file.

<div class="c-lazy-image {{ modifier_class }} {{ c_lazy_image_classes }}">
	{% if c_lazy_image_link_url %}
		<a href="{{ c_lazy_image_link_url }}" class="c-lazy-image__link {{ c_lazy_image_link_classes }}"
			{% if c_lazy_image_link_tab_index_attr %}
				tabindex="{{ c_lazy_image_link_tab_index_attr }}"
			{% endif %}
		>
	{% endif %}

	{% if c_lazy_image_crop_class %}
		<div class="{{ c_lazy_image_crop_class }}" style="{{ c_lazy_image_crop_style_attr }}">
	{% endif %}

	{% if c_lazy_image_markup %}
		{{ c_lazy_image_markup }}
	{% else %}
		{% if c_lazy_image_in_initial_viewport %}
			<img class="c-lazy-image__img {{ c_lazy_image_img_classes }}" src="{{ c_lazy_image_src_url }}" alt="{{ c_lazy_image_alt_attr }}" srcset="{{ c_lazy_image_srcset_attr }}" sizes="{{ c_lazy_image_sizes_attr }}" height="{{ c_lazy_image_height_attr }}" width="{{ c_lazy_image_width_attr }}" decoding="{{ c_lazy_image_decoding_attr }}">
		{% else %}
			<img class="c-lazy-image__img {{ c_lazy_image_img_classes }}" src="{{ c_lazy_image_placeholder_url }}" data-lazy-src="{{ c_lazy_image_src_url }}" alt="{{ c_lazy_image_alt_attr }}" data-lazy-srcset="{{ c_lazy_image_srcset_attr }}" data-lazy-sizes="{{ c_lazy_image_sizes_attr }}" height="{{ c_lazy_image_height_attr }}" width="{{ c_lazy_image_width_attr }}" decoding="{{ c_lazy_image_decoding_attr }}">
		{% endif %}
	{% endif %}

	{% if c_lazy_image_crop_class %}
		</div>
	{% endif %}

	{% if c_lazy_image_link_url %}
		</a>
	{% endif %}
</div>

c-lazy-image JSON The data object for this pattern.

{
	"c_lazy_image_classes": "",
	"c_lazy_image_link_url": false,
	"c_lazy_image_link_classes": "lrv-a-unstyle-link",
	"c_lazy_image_crop_class": "lrv-a-crop-16x9",
	"c_lazy_image_crop_style_attr": false,
	"c_lazy_image_link_tab_index_attr": false,
	"c_lazy_image_alt_attr": "Lazy loaded image",
	"c_lazy_image_src_url": "https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg",
	"c_lazy_image_placeholder_url": "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==",
	"c_lazy_image_srcset_attr": "https://farm5.staticflickr.com/4078/5441060528_31db7838ba_m.jpg 240w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba_n.jpg 320w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba.jpg 500w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg 640w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba_b.jpg 1024w",
	"c_lazy_image_sizes_attr": "auto",
	"c_lazy_image_img_classes": "lrv-u-background-color-grey-lightest lrv-u-width-100p lrv-u-display-block lrv-u-height-auto",
	"c_lazy_image_height_attr": "",
	"c_lazy_image_width_attr": "",
	"c_lazy_image_in_initial_viewport": false,
	"c_lazy_image_decoding_attr": "async"
}