CMS Made Simple Forums
https://forum.cmsmadesimple.org/

Foundation Interchange with CGSmartImage
https://forum.cmsmadesimple.org/viewtopic.php?f=4&t=76466
Page 1 of 1

Author:  DIGI3 [ Thu Apr 13, 2017 2:37 am ]
Post subject:  Foundation Interchange with CGSmartImage

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:
{$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)

Page 1 of 1 All times are UTC
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/