Page 1 of 1

Smarty Help: Responsive Images

Posted: Mon Jul 09, 2018 2:07 pm
by greenftechn
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?

Re: Smarty Help: Responsive Images

Posted: Mon Jul 09, 2018 2:18 pm
by DIGI3
Those are content blocks, so they'll be populated when editing the content page, under a tab called "Images"

[solved] Re: Smarty Help: Responsive Images

Posted: Mon Jul 09, 2018 2:25 pm
by greenftechn
Thanks. That was easy.