Smarty Help: Responsive Images
Posted: Mon Jul 09, 2018 2:07 pm
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?
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?