Page 1 of 1

Foundation Interchange with CGSmartImage

Posted: Thu Apr 13, 2017 2:37 am
by DIGI3
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.

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]">
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)