I'm using a theme based on Foundation with the following code blocks:
Early in Head:
{block name='top'}
{* Define the main content block, and header image. Three versions of the header image are requested, which allows for smaller versions to be served for mobile devices *}
{$content="{content}" scope=global}
{$header_large="{content_image block='header_large' tab='Images' label='Header Image (desktop: at least 1200px wide)' urlonly=1}" scope=global}
{$header_medium="{content_image block='header_medium' tab='Images' label='Header Image (tablet: 1024px wide)' urlonly=1}" scope=global}
{$header_small="{content_image block='header_small' tab='Images' label='Header Image (mobile: 640px wide)' urlonly=1}" scope=global}
{/block}
Then, there a header image is called using Interchange:
{block name='header-image'}
{* Header image uses the Interchange plugin - see the Zurb Foundation documentation for more information *}
{if $header_large}
<div id="header-image" class="row expanded text-center">
<img alt="{title}" data-interchange="[{$header_small}, small], [{$header_medium}, medium], [{$header_large}, large]">
</div>
{/if}
{/block}
I have experimented with assigning the internal urls to each size image, but I've not gotten it right. Where/how is this done?
Smarty Help: Responsive Images
-
- Forum Members
- Posts: 36
- Joined: Wed Sep 26, 2007 10:53 pm
Re: Smarty Help: Responsive Images
Those are content blocks, so they'll be populated when editing the content page, under a tab called "Images"
Last edited by DIGI3 on Mon Jul 09, 2018 2:19 pm, edited 1 time in total.
Reason: add image
Reason: add image
Not getting the answer you need? CMSMS support options
-
- Forum Members
- Posts: 36
- Joined: Wed Sep 26, 2007 10:53 pm
[solved] Re: Smarty Help: Responsive Images
Thanks. That was easy.