Content Image (or Video on silent loop)

A basic element for showing lazy loaded images and MP4 as silent looping video.

Examples

Default Lazyloaded Image

This is the default instance of this element - a lazyloaded image.

Source

HTML

<content-image alt="Test Alt Text" src="https://www.esteelauder.com/media/export/cms/special-offers/032121-promo-elements/se006_us_2_up_dw_1.jpg"></content-image>

<link rel="stylesheet" href="./style.css">
<script type="module" src="/vendor/content-blocks/content-blocks/content-blocks.esm.js"></script>

CSS

content-image video,
content-image picture {
  max-height: 400px;
  margin: auto;
}

Looping MP4 / Video as GIF

This demonstrates using an MP4 video instead of a GIF for animations.

Source

HTML

<content-image alt="Test Alt Text" src="https://www.clinique.com/media/export/cms/2102_assets/S21_Clinical_Reality_BMW_EBMU_dt_reduced.mp4"></content-image>

<link rel="stylesheet" href="./style.css">
<script type="module" src="/vendor/content-blocks/content-blocks/content-blocks.esm.js"></script>

CSS

content-image video,
content-image picture {
  max-height: 400px;
  margin: auto;
}

Change Source Using Pipe Delimiters

This demonstrates using the pipe delimiters to show different assets based on the screen viewport.

Source

HTML

<content-image width="3|886" height="4|307" src="https://m.bobbibrowncosmetics.com/media/export/cms/Homepage/SS21/SS21_Full_Size_Skincare_mob.jpeg|https://www.bobbibrowncosmetics.com/media/export/cms/Homepage/SS21/SS21_Full_Size_Skincare_pc.jpeg"></content-image>
<script type="module" src="/vendor/content-blocks/content-blocks/content-blocks.esm.js"></script>

CSS