Foundation Interchange with CGSmartImage
Posted: Thu Apr 13, 2017 2:37 am
The Foundation framework has a great utility for serving up different sized images for different device widths. It's a really simple way to save bandwidth and speed up page loads, and it's even easier with CGSmartImage.
Adjust widths and image path as needed. You can also add xlarge, xxlarge, portrait, landscape, and retina queries (see http://foundation.zurb.com/sites/docs/interchange.html)
Code: Select all
{$banner_image="{uploads_url}/path/banner.jpg"}
{$banner_small="{CGSmartImage src=$banner_image max_width=640 noembed=1 notag=1 force_ext=1}"}
{$banner_medium="{CGSmartImage src=$banner_image max_width=1024 noembed=1 notag=1 force_ext=1}"}
{$banner_large="{CGSmartImage src=$banner_image max_width=1200 noembed=1 notag=1 force_ext=1}"}
<img data-interchange="[{$banner_small}, small], [{$banner_medium}, medium], [{$banner_large}, large]">