Search code examples
expressionengine

Ideal way to handle layout changes in a list

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 !

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.