Ideal way to handle layout changes in a list

expressionengine

Solution

Just output the class name based on the value of `{count}`. I've output the whole opening `<li>` tag here to keep it simple but you could just output the class attribute or class name itself.

{if count<=2}
    <li class="special">
{if:else}
    <li>
{/if}
        <h1>{title}</h1>
        ... etc.
    </li>

Incidentally, I don't think you can have class names that begin with a number.

Problem

So I've stupidly designed a list of recent articles, all is good with the world BUT the first 2 entries html are markedly different then the remainder of entries. I am yet to turn a line of code so any advice anyone an offer is greatly appreciated. Simplistically the ul would look like: ``` <li class="1of2"> /* It's number 1 – give it a class to identify it as special */ <h1>{title}</h1> <p>{short_desc}</p> </li> <li class="1of2"> /* It's number 2 – give it a class to identify it as special */ <h1>{title}</h1> <p>{short_desc}</p> </li> <li> /* It's not number 1 or 2 – ie. every other item, NO class per se */ <h1>{title}</h1> <p>{short_desc}</p> </li> ``` If you imagine a 3 column grid for all entries but the first 2 entries are 1.5 columns each. Bit of a noodle scratch going on here, any thoughts gratefully voted upon. PS. I will be using Stash if that helps !

Original source