• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 1 post ] 
Author Message
 Post subject: Foundation Interchange with CGSmartImage
PostPosted: Thu Apr 13, 2017 2:37 am 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Wed Feb 25, 2009 4:25 am
Posts: 161
Location: Victoria, BC
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)

_________________
You might actually like me when I'm angry, who knows?


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 1 post ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
HostPapa CMS Made Simple hosting