Smarty Help: Responsive Images

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Locked
greenftechn
Forum Members
Forum Members
Posts: 36
Joined: Wed Sep 26, 2007 10:53 pm

Smarty Help: Responsive Images

Post 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?
User avatar
DIGI3
Dev Team Member
Dev Team Member
Posts: 1609
Joined: Wed Feb 25, 2009 4:25 am
Location: Victoria, BC

Re: Smarty Help: Responsive Images

Post by DIGI3 »

Those are content blocks, so they'll be populated when editing the content page, under a tab called "Images"
Attachments
screenshot
screenshot
Last edited by DIGI3 on Mon Jul 09, 2018 2:19 pm, edited 1 time in total.
Reason: add image
Not getting the answer you need? CMSMS support options
greenftechn
Forum Members
Forum Members
Posts: 36
Joined: Wed Sep 26, 2007 10:53 pm

[solved] Re: Smarty Help: Responsive Images

Post by greenftechn »

Thanks. That was easy.
Locked

Return to “Layout and Design (CSS & HTML)”