1

I am exporting news articles into a page using channel entries in expression engine. I want the first article that appears to be 'col-md-4' the next 2 articles to be within 'col-md-3' the next 2 to be within 'col-md-3' and the last 3 articles to be within a 'col-md-2' container.

I have tried various ways to do this. I thought I had worked it out with the code below by editing the entries using an {if:else} statement and using the {count} variable. Although I realised I was selecting the entrie with that ID for example {count == 1} was the article with ID 1, not the first article to appear on the page.

Does anyone know how I can edit an article depending on the order it appears on the page?

 {exp:channel:entries channel="news|blogs" limit="8" dynamic="no"}

            {if count == 1}
            <div class="col-md-4">
                <div class="item news-v2">
                    <div class="news-v2-badge">
                        {if news_thumbnail == ""}
                        <a href="/news/article/{url_title}">
                            <img class="lazyOwl img-responsive" src="home_logo_filler_news_events.png" alt="">
                        </a>
                        {if:else}
                        <a href="/news/article/{url_title}">
                            <img class="lazyOwl img-responsive" src="{news_thumbnail}" alt="">
                        </a>
                        {/if}

                    </div>
                    <h4><a href="/news/article/{url_title}">{title}</a></h4>
                    <p>{news_tagline}</p>
                    <p>
                        <span>{entry_date format="%d"}</span>
                        <small>{entry_date format="%M"}</small>
                        <small>{entry_date format="%Y"}</small>
                    </p>
                </div>
            </div>
            {if:elseif count == 2 || count == 3 || count == 4 || count == 5}
            <div class="col-md-3">
                <div class="item news-v2">
                    <div class="news-v2-badge">
                        {if news_thumbnail == ""}
                        <a href="/news/article/{url_title}">
                            <img class="lazyOwl img-responsive" src="home_logo_filler_news_events.png" alt="">
                        </a>
                        {if:else}
                        <a href="/news/article/{url_title}">
                            <img class="lazyOwl img-responsive" src="{news_thumbnail}" alt="">
                        </a>
                        {/if}

                    </div>
                    <h4><a href="/news/article/{url_title}">{title}</a></h4>
                    <p>
                        <span>{entry_date format="%d"}</span>
                        <small>{entry_date format="%M"}</small>
                        <small>{entry_date format="%Y"}</small>
                    </p>
                </div>
            </div>
            {if:elseif count == 6 || count == 7 || count == 8}
            <div class="col-md-2">
                <div class="item news-v2">
                    <h4><a href="/news/article/{url_title}">{title}</a></h4>
                    <p>{news_tagline}</p>
                    <p>
                        <span>{entry_date format="%d"}</span>
                        <small>{entry_date format="%M"}</small>
                        <small>{entry_date format="%Y"}</small>
                    </p>
                </div>
            </div>
            {/if}

            {/exp:channel:entries}
1

You could also use {switch} to vary the div classes. Not sure if this is a better way, but its an alternative to if/else

<div class="col-md-{switch='4|3|3|3|3|2|2|2'}">

Just remember that switch loops, so after the 8th entry you'll get a col-md-4 again.

| improve this answer | |
0

Not sure what order you're wanting to output the entries, but assuming it's date:

{exp:channel:entries 
    channel="news|blogs" 
    limit="8" 
    dynamic="no"
    orderby="date"
    sort="desc"
}
    {if count == 1}
        <div class="col-md-4">
            ...
        </div>
    {if:elseif count <= 5}
        <div class="col-md-3">
            ...
        </div>
    {if:else}
        <div class="col-md-2">
            ...
        </div>
    {/if}
{/exp:channel:entries}

Or if wanting to order by entry_id from latest, use parameter:

orderby="entry_id"

https://docs.expressionengine.com/latest/channel/channel_entries.html#id46

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.