Prevent first entry to be shown conditional

Question

I'm trying to prevent that the first entry has a certain class in this case the class 'wide'. I call the class from a channel-field called {format}. But i want the use the param orderby="random" in the entries tag.

Now sometimes the first entry with the class 'wide' is still shown, how can i prevent this?

This my code so far..

{exp:channel:entries channel="work" orderby="random"  status="open|featured"}

{if count == 1 AND '{format}' != 'wide'}
<div class="item {format} photography">
  <div class="item-content" style="background-image:url({beelden limit="1"}{url}{/beelden})"></div>
                            <div class="item-overlay">
                                <span class="item-title">{templates}</span>                    
                                <span class="item-title">{title}</span>

                            </div>
                        </div>
{if:else}
<div class="item {format} photography">
<div class="item-content" style="background-image:url({beelden limit="1"}{url}{/beelden})"></div>
                            <div class="item-overlay">
                                <span class="item-title">{templates}</span>                    
                                <span class="item-title">{title}</span>

                            </div>
                       </div>
{/if}

  {/exp:channel:entries}

Answer 1

Use two channel entries tags with one in an embed.

{!-- Main template; First entry --}
{exp:channel:entries channel="work" orderby="random" limit="1" search:format="=not wide" status="open|featured"}

  <div class="item {format} photography">
    <div class="item-content" style="background-image:url({beelden limit="1"}{url}{/beelden})"></div>
    <div class="item-overlay">
      <span class="item-title">{templates}</span>                    
      <span class="item-title">{title}</span>
    </div>
  </div>
  {embed="TEMPLATEGROUP/TEMPLATE" first_entry_id="{entry_id}"}
{/exp:channel:entries}

.

{!-- Embedded template: TEMPLATEGROUP/TEMPLATE --}
{exp:channel:entries channel="work" orderby="random" entry_id="not {embed:first_entry_id}" status="open|featured"}
  <div class="item {format} photography">
    <div class="item-content" style="background-image:url({beelden limit="1"}{url}{/beelden})"></div>
    <div class="item-overlay">
      <span class="item-title">{templates}</span>                    
      <span class="item-title">{title}</span>
    </div>
  </div>
{/exp:channel:entries}

Answer 2

Maybe a bit wasteful but you could just hide the first entry with the "wide" class using CSS.

Note: if you're using pagination or using other conditionals related to the count or total number of entries then this won't be helpful.

First, get all your entries as normal but add a special class (.first-entry) to the first entry that is output....

{exp:channel:entries channel="work" orderby="random" status="open|featured"}
    <div class="item {format} {if count==1}first-entry{/if} photography">
        <div class="item-content" style="background-image:url({beelden limit="1"}{url}{/beelden})"></div>
        <div class="item-overlay">
            <span class="item-title">{templates}</span>                    
            <span class="item-title">{title}</span>
        </div>
    </div>
{/exp:channel:entries}

Then apply a bit of css to find anything with the first-entry AND the .wide class.

.first-entry.wide{
    display:none;
}

If the first entry doesn't have the wide class then nothing will change. If it does have the wide class then it will be hidden.

It's the simplest, if not the most efficient, way of doing it.