Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Easy Responsive Images in ExpressionEngine with CE Image
<div class="module__image image--lazy"
data-image-src="Tim-Smith_220x140_220_140_int_c1.jpg"></div>
<div class="module__image image--lazy"
data-image-src="Tim-Smith_220x140_220_140_int_c1.jpg"
data-image-loaded=""
>
<img alt="" src="Tim-Smith_220x140_220_140_int_c1.jpg">
</div>
<div class="module__image image--lazy"
data-image="about_480_320_int_c1_small.jpg"
data-image-srcset="about_480_320_int_c1_small.jpg 480w,
about_800_350_int_c1_medium.jpg 800w,
about_940_343_int_s_c1_full.jpg 940w"></div>
{if testimonial_photo}
{exp:ce_img:pair
src="{testimonial_photo}"
width="223"
height="140"
allow_scale_larger="yes"
crop="yes"
interlace="yes"
cache_dir="/"
}
<div class="module__image image--lazy" data-image-src="{made}"></div>
{/exp:ce_img:pair}
{/if}
<picture class="page__image-header__photo">
<!--[if IE 9]><video style="display: none;"><![endif]-->
{exp:ce_img:pair
src="{content_focal_image}"
filename_suffix="_full"
width="940"
allow_scale_larger="yes"
crop="yes"
interlace="yes"
cache_dir="/"
}
<source srcset="{made}" media="(min-width: 40em)">
{/exp:ce_img:pair}
{exp:ce_img:pair
src="{content_focal_image}"
filename_suffix="_medium"
width="800"
height="600"
crop="yes"
interlace="yes"
cache_dir="/"
}
<source srcset="{made}" media="(min-width: 20em)">
{/exp:ce_img:pair}
{exp:ce_img:pair
src="{content_focal_image}"
filename_suffix="_small"
width="480"
height="360"
crop="yes"
interlace="yes"
cache_dir="/"
}
<source srcset="{made}">
<!--[if IE 9]></video><![endif]-->
<img src="{made}" alt="">
{/exp:ce_img:pair}
</picture>
{exp:ce_img:pair
src="{content_focal_image}"
filename_suffix="_full"
width="940"
allow_scale_larger="yes"
crop="yes"
interlace="yes"
cache_dir="/"
}
<source srcset="{made}" media="(min-width: 40em)">
{/exp:ce_img:pair}
<picture class="page__image-header__photo">
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="about_940_343_int_s_c1_full.jpg" media="(min-width: 40em)">
<source srcset="about_800_350_int_c1_medium.jpg" media="(min-width: 20em)">
<source srcset="about_480_350_int_c1_small.jpg">
<!--[if IE 9]></video><![endif]-->
<img src="{made}" alt="">
</picture>
<img class="page__image-header__photo" alt=""
{exp:ce_img:pair
src="{embed:image}"
filename_suffix="_small"
width="480"
height="320"
crop="yes"
interlace="yes"
cache_dir="/"
}
src="{made}"
srcset="{made} 480w,
{/exp:ce_img:pair}
{exp:ce_img:pair
src="{embed:image}"
filename_suffix="_medium"
width="800"
height="600"
crop="yes"
interlace="yes"
cache_dir="/"
}
{made} 800w,
{/exp:ce_img:pair}
{exp:ce_img:pair
src="{embed:image}"
filename_suffix="_full"
width="940"
allow_scale_larger="yes"
crop="yes"
interlace="yes"
cache_dir="/"
}
{made} 940w"
{/exp:ce_img:pair}
>
<img class="page__image-header__photo" alt=""
src="about_480_320_int_c1_small.jpg"
srcset="about_480_320_int_c1_small.jpg 480w,
about_800_350_int_c1_medium.jpg 800w,
about_940_343_int_s_c1_full.jpg 940w">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.