Dynamic Classes Help

#1 / Sep 20, 2011 10:58am

liquiduscreative

13 posts

I’m attempting to display channel entries in a jQuery Slider. I need Two entries per “Panel/Slide” and 3-4 would start a new panel/slide 4-5 new panel/slide, etc. I’ve tried using {switch=} and {count} but can’t seem to get this working…any insights would be much appreciated! There’s gotta be a simple way to do this.

Here’s my markup:

{exp:channel:entries 
  channel="channel" 
  disable="categories|member_data|pagination" 
  sort="asc"
}
<div class="panel">
  <div class="panel-wrapper">
    
    <div class="client-content">
      {client_logo_small}
      <h2 class="underline">{title}</h2>
      {exp:word_limit total="14"}
        {epic_partner_excerpt}
      {/exp:word_limit}
  <ul>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Profile</a></li>
  </ul>
 </div><!--end client content-->
 
</div><!--end panel wrapper-->
</div><!--end panel-->
{/exp:channel:entries}

#2 / Sep 20, 2011 5:31pm

liquiduscreative
13 posts

Can someone give me any insights? I swear when I post to the forums I rarely if ever get a response? What am I doing wrong???
#3 / Sep 20, 2011 7:29pm
John St-Amand
865 posts
That mean you want:
```
<div class="panel-wrapper">
    
    <div class="client-content">
      {client_logo_small}
      <h2 class="underline">{title}</h2>
      {exp:word_limit total="14"}
        {epic_partner_excerpt}
      {/exp:word_limit}
  <ul>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Profile</a></li>
  </ul>
 </div>
 
</div>
```
repeated twice within your “panel” DIV? and then have the panel wrapper twice within each subsequent “panel” DIV? I know how to do what you’re looking to do, but I want to confirm the intended structure of the rendered entries before replying with specifics. Switch is the key, but you have to get a bit clever with it.

#4 / Sep 20, 2011 7:50pm

liquiduscreative

13 posts

@John St-Amand, Thanks for responding! Yeah, that’s basically what I want to do. There needs to be Two entries in One slide/panel and the subsequent two entries will auto create a new panel. Basically, these are “Featured Clients” with their logo, excerpt and links fields and will be displayed two at a time per slide.

SO….I think what needs to happen is (See inline comments):

{exp:channel:entries 
  channel="channel" 
  disable="categories|member_data|pagination" 
  sort="asc"
}
<div class="panel"><!--two channel entries contained in this panel-->
  <div class="panel-wrapper"><!--two channel entries contained in this panel-->
    <div class="client-content"><!--this class should repeat with each entry-->
      {client_logo_small}
      <h2 class="underline">{title}</h2>
      {exp:word_limit total="14"}
        {epic_partner_excerpt}
      {/exp:word_limit}
  <ul>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Profile</a></li>
  </ul>
 </div><!--end client content-->
</div><!--end panel wrapper-->
</div><!--end panel-->
<!--Next two entries starts new panel and classes!-->
{/exp:channel:entries}

I hope this makes sense…It’s a simple concept in my head but I can’t seem to make it work on paper!

Thanks for your help in advance,

- Jay

#5 / Sep 20, 2011 8:21pm

John St-Amand

865 posts

So what you’re looking for in the finished code is:

<!-- PANEL ONE -->
<div class="panel">
  <div class="panel-wrapper">

    <!-- ENTRY ONE -->
      <div class="client-content">
          {client_logo_small}
          <h2 class="underline">{title}</h2>
          {exp:word_limit total="14"}
          {epic_partner_excerpt}
          {/exp:word_limit}
          <ul>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Profile</a></li>
          </ul>
      </div><!--end client content-->

    <!-- ENTRY TWO -->
      <div class="client-content">
          {client_logo_small}
          <h2 class="underline">{title}</h2>
          {exp:word_limit total="14"}
          {epic_partner_excerpt}
          {/exp:word_limit}
          <ul>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Profile</a></li>
          </ul>
      </div><!--end client content-->


</div><!--end panel wrapper-->
</div><!--end panel-->

<!-- PANEL TWO -->
<div class="panel">
  <div class="panel-wrapper">

    <!-- ENTRY THREE -->
      <div class="client-content">
          {client_logo_small}
          <h2 class="underline">{title}</h2>
          {exp:word_limit total="14"}
          {epic_partner_excerpt}
          {/exp:word_limit}
          <ul>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Profile</a></li>
          </ul>
      </div><!--end client content-->

    <!-- ENTRY FOUR -->
      <div class="client-content">
          {client_logo_small}
          <h2 class="underline">{title}</h2>
          {exp:word_limit total="14"}
          {epic_partner_excerpt}
          {/exp:word_limit}
          <ul>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Profile</a></li>
          </ul>
      </div><!--end client content-->


</div><!--end panel wrapper-->
</div><!--end panel-->

<!-- PANEL THREE -->
<div class="panel">
  <div class="panel-wrapper">

    <!-- ENTRY FIVE -->
      <div class="client-content">
          {client_logo_small}
          <h2 class="underline">{title}</h2>
          {exp:word_limit total="14"}
          {epic_partner_excerpt}
          {/exp:word_limit}
          <ul>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Profile</a></li>
          </ul>
      </div><!--end client content-->

    <!-- ENTRY SIX -->
      <div class="client-content">
          {client_logo_small}
          <h2 class="underline">{title}</h2>
          {exp:word_limit total="14"}
          {epic_partner_excerpt}
          {/exp:word_limit}
          <ul>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Profile</a></li>
          </ul>
      </div><!--end client content-->


</div><!--end panel wrapper-->
</div><!--end panel-->

ETC. is that right?

#6 / Sep 20, 2011 8:28pm

liquiduscreative
13 posts

Yup! That’s what I’m after 🐛
#7 / Sep 20, 2011 8:58pm

John St-Amand
865 posts

Final question - does it loop forever or is it to have a reasonable limit?
#8 / Sep 20, 2011 10:30pm
John St-Amand
865 posts
Alright. So here’s what may blow your mind. The switch variable is not only applicable to classes - it can conditionally insert code at predefined intervals (determined by what you pipe into it) if you get clever with it. So here goes:
```
{exp:channel:entries channel="channel" disable="categories|member_data|pagination" sort="asc"}

{switch="<div class='panel'><div class='panel-wrapper'>|"}

    
      <div class="client-content {switch="odd|even"}">
          {client_logo_small}
          <h2 class="underline">{title}</h2>
          {exp:word_limit total="14"}
          {epic_partner_excerpt}
          {/exp:word_limit}
          <ul>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Profile</a></li>
          </ul>
      </div>

{switch="|</div></div>"}

{/exp:channel:entries}
```
To explain…

The first instance of switch inserts the opening of the panel and panel wrapper divs BEFORE the odd instances of entries (1, 3, 5, 7, etc.).

The second instance of switch inserts an additional class on your client-content div - even and odd - to give you a bit of targeted formatting control of one versus the other (if you need margin on the left one and no margin on the right one, assuming they’re side by side, for example.

The third and final instance of switch inserts the closing of the panel wrapper and panel divs AFTER the even instances of entries (2, 4, 6, 8, etc).

That’s how I’ve started using switch, so unless I’ve typo’d something here, it ought to work for you too. Please give it a try and let me know how you make out. One caveat - since this may not be the “typical” use of switch, I’m not certain if this has performance implications. It didn’t seem to slow anything down for me, but please be forewarned that I don’t know for sure if this is as smart a way to use switch as I think it may be. 😊

Cheers,
John

#9 / Sep 21, 2011 11:56am

liquiduscreative

13 posts

Sweet! I did not know this…it’s actually really close. The output is just a little off though:

<div class='panel'><div class='panel-wrapper'>
    <div class="client-content odd">
      <a href="http://localhost/epic/images/partner_logos/terra.png">http://localhost/epic/images/partner_logos/terra.png</a>
      <h2 class="underline">Terra Mining</h2>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed arcu lorem. Maecenas suscipit…
  <ul>
    <li><a href="http://terra_mining">Contact</a></li>
    <li><a href="http://terra_mining">Profile</a></li>
  </ul>
 </div><!--end client content-->

    <div class="client-content even">
      <a href="http://localhost/epic/images/partner_logos/terra.png">http://localhost/epic/images/partner_logos/terra.png</a>
      <h2 class="underline">Terra Mining 2</h2>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed arcu lorem. Maecenas suscipit…
  <ul>
    <li><a href="http://terra_mining_2">Contact</a></li>
    <li><a href="http://terra_mining_2">Profile</a></li>
  </ul>
 </div><!--end client content-->
</div></div>


<div class='panel'><div class='panel-wrapper'>
    <div class="client-content odd">
      <a href="http://localhost/epic/images/partner_logos/terra.png">http://localhost/epic/images/partner_logos/terra.png</a>
      <h2 class="underline">Terrra Mining 3</h2>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed arcu lorem. Maecenas suscipit…
  <ul>
    <li><a href="http://terrra_mining_3">Contact</a></li>
    <li><a href="http://terrra_mining_3">Profile</a></li>
  </ul>
 </div><!--end client content-->

Just missing the closing div’s on the last panel…I’ll keep tweaking this though, it’s right there. Thanks again for your help!

#10 / Sep 21, 2011 12:02pm

liquiduscreative
13 posts

Hold Up! Actually, after I looked at this again, your logic make sense and it works, I just needed to add a fourth slide…and volla! It worked. I don’t know how many slides we’ll have initially but I can live with this…I can put in a place holder if I have to. You rock! I really appreciate your help…this had me stumped and was holding up the project.

Best,

- Jay
#11 / Sep 21, 2011 12:03pm
John St-Amand
865 posts
Ah - the problem is something i forgot. Since you’re loading two at a time, the fact that the last switch only inserts the closing DIVs AFTER an even entry means that if your entries loop ends on an odd entry, the two closing DIVs won’t get inserted. So in reality you may not be able to close the loop with the switch variable. Or at the very least, you may have to insert an additional conditional that compensates that will only close the loop when the switch doesn’t fall on an even entry.

So at the end of the whole thing, but still inside the entries loop, you could add:
```
{if count == total_results}
  {if count == "1" OR count == "3" OR count == "5" OR count == "7" OR count == "9"} 
  </div></div>
  {/if}
{/if}
```
It’s not a perfect solution obviously, but it would at least close that gap in the entries loop logic.
#12 / Sep 21, 2011 12:05pm

John St-Amand
865 posts

You just have to add enough of those count conditionals to be well above what the client would ever insert there (which you can easily control anyway by putting a limit parameter on the entries loop so that you don’t have to have the conditionals go on for too long).
#13 / Sep 21, 2011 12:15pm

liquiduscreative
13 posts

Gotcha, makes good sense…I’ll see what I can do with this. Thanks John

#14 / Sep 21, 2011 12:33pm

liquiduscreative

13 posts

DONE! Got it working and applying classes where needed. There was also a vertical divider that needed to be after each “odd” entry as well. Here’s the final result:

{exp:channel:entries 
  channel="epic_partners_slides" 
  disable="categories|member_data|pagination" 
  sort="asc"
}

{switch="<div class='panel'><div class='panel-wrapper'>|"}
    <div class="client-content {switch='odd|even'}">
      {client_logo_small}
      <h2>{title}</h2>
<p>      {exp:word_limit total="14"}<br />
        {epic_partner_excerpt}<br />
      {/exp:word_limit}<br />
  <ul><br />
    <li><a href="http://{url_title}">Contact</a></li><br />
    <li><a href="http://{url_title}">Profile</a></li><br />
  </ul><br />
 </div><!--end client content--><br />
 {if count == "1" OR count == "3" OR count == "5" OR count == "7" OR count == "9"}<br />
  <div class="divider"></div><br />
{/if}<br />
{switch="|</div></div>"}<br />
{if count == total_results}<br />
  {if count == "1" OR count == "3" OR count == "5" OR count == "7" OR count == "9"} <!-- YOU CAN ADD MORE IF NEEDED --><br />
  </div></div><br />
  {/if}<br />
{/if}<br />
{/exp:channel:entries}

Thread

liquiduscreative

liquiduscreative

John St-Amand

liquiduscreative

John St-Amand

liquiduscreative

John St-Amand

John St-Amand

liquiduscreative

liquiduscreative

John St-Amand

John St-Amand

liquiduscreative

liquiduscreative

Username

Password

Thread