Foundation Interchange with CGSmartImage

Do something cool with CMS? Show us ...
This board is for 'Answers', and the discussion of answers... Not for questions.
Locked
User avatar
DIGI3
Dev Team Member
Dev Team Member
Posts: 1609
Joined: Wed Feb 25, 2009 4:25 am
Location: Victoria, BC

Foundation Interchange with CGSmartImage

Post 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)
Not getting the answer you need? CMSMS support options
Locked

Return to “Tips and Tricks”