if else condition in smarty .tpl for nth-child list/div

Question

I'm working with Smarty. I want to add an if else condition in my .tpl file for nth-child li/div classes.

I have two image sizes. I want to use the 600px image in the first li, the 400px image in the 2nd and 3rd, and again the 600px image in the 4th li and so on.

Currently I'm using the CSS3 nth-child selector and using scaled 400px images. But the load time is bad. I want to use smaller images where required.

I guess its very complex. Is it?

Here is my code:

<img src="{$purl}/thumbs/{$posts[i].pic}" alt="{$posts[i].story|stripslashes}" />

and it exists in loop {section name=i loop=$posts} {include file="posts.tpl"} {/section} inside posts.tpl.

Answer 1

cycle will be helpfull.

Let's assume that you have array with path to pictures stored in two fields: image-600 and image-400:

{foreach from=$images item=image}
    {capture assign=currentKey}image-{cycle values='600,400,400'}{/capture}
    <li><img src="{$image[$currentKey]}" alt="{$image.title}" /></li>
{/foreach}

in your case it will probably look like this:

{section name=i loop=$posts}
   {capture assign=thumbSize}{cycle values='big,small,small'}{/capture}
   <img src="{$purl}/thumbs/{if $thumbSize eq 'big'}{$posts[i].pic}{else}s-{$r[i].pic}{/if}" alt="{$posts[i].story|stripslashes}" />
{/section}