1

I'm trying to apply a class of odd or even based on the count within a playa field. My website is for a company with 13 branches & 15 products. Not all branches sell all products so I have created a Products channel & an Offices channel and used Playa to add relevant products to each office.

What I'd like to happen is for a class of odd or even to be applied to the opening div that will make the products display either two or three across, depending on the count.

What's actually happening is that no matter what my count, the first div always gets applied as odd and the rest as even. I've tried total_count but that won't even apply the right class to the first div. Am I doing something fundamentally wrong or is this just not the right approach to take?

{exp:playa:children field="office_products"}
            {if {count} == "1|3|5|7|9|11|13|15"}
                <div class="product odd">
            {if:else}
                <div class="product even">
            {/if}
                <div class="insurance_type">
                    <div class="product_image">
                        {exp:ce_img:pair src="{product_logo}"}
                                <img src="{made}" alt="{title}" width="{width}" height="{height}" />
                        {/exp:ce_img:pair}
                    </div>
                    <h2>{title}</h2>
                    {exp:ce_str:ing truncate="88"}<h3>{product_short_intro}</h3>{/exp:ce_str:ing}
                    {exp:switchee variable="{segment_3}" parse="inward"}
                        {case value=""}
                            <a href="#" data-reveal-id="myModal_{url_title}" class="button">Get A Quote</a>
                        {/case}
                        {case value="services"}
                        <a href="{site_url}offices/{segment_2}/services/{url_title}" class="button">More Information</a>
                        {/case}
                    {/exp:switchee}
                </div>
            </div>

            <div id="myModal_{url_title}" class="reveal-modal small">
              <h2>Get a {title} Quote</h2>

                {exp:forms:form form_name="quote_now" display_error="inline"}
                    {forms:fields}
                            {forms:field}
                    {/forms:fields}
                {/exp:forms:form}

              <p></p>
              <a class="close-reveal-modal">&#215;</a>
            </div>
        {/exp:playa:children}
1

Switch is the correct way to do this, on a related note the new Modulus operator introduced in 2.7.1 can also help in similar cases. [http://ellislab.com/blog/entry/the-modulus-operator][1]

| improve this answer | |
  • I wasn't aware this had been introduced. I might investigate this as an option, using modulus as how the classes are applied with the nth-child CSS. Lots of new ideas now. Thanks very much. – StvCummins Nov 26 '13 at 21:30
0

Try switch instead:

{switch="<div class='product odd'>|<div class='product even'>"}

Or nth-child CSS selector if you need this for styling:

.product:nth-child(odd)
.product:nth-child(even)
| improve this answer | |
  • Thanks for replying :-) I'll try switch in the morning. What I want to do is apply one style if the total number is in the list beside the count and a different style then if it falls outside. Basically I want to have two in a row & then three in a row and not have any empty spaces at the end. – StvCummins Nov 26 '13 at 17:51
0

Changed approach on this slightly. What I wanted to happen was that for an odd count the first row would have two columns, second row would have three and then keep going like that so that I don't end up with a single product on its own at the bottom. By using a combination of switchee and count this is the code i'm using that gives me the result I need.

{exp:playa:children field="office_products"}
            {exp:switchee variable="{total_results}" parse="inward"}
                {case value="1|3|5|7|9|11|13|15"}
                <div class="product odd{count}">
                {/case}
                {case value="2|4|6|8|10|12|14"}
                <div class="product even">
                {/case}
            {/exp:switchee}
                <div class="insurance_type">

                    {exp:switchee variable="{segment_3}" parse="inward"}
                        {case value=""}
                            <a href="{site_url}offices/{segment_2}/services/{url_title}">
                                <div class="product_image">

                                    {exp:ce_img:pair src="{product_logo}"}
                                            <img src="{made}" alt="{title}" width="{width}" height="{height}" />
                                    {/exp:ce_img:pair}
                                </div>
                                <h2>{title}</h2>
                            </a>
                            {exp:ce_str:ing truncate="88"}<h3>{product_short_intro}</h3>{/exp:ce_str:ing}
                            <a href="#" data-reveal-id="myModal_{url_title}" class="button">Get A Quote</a>
                        {/case}
                        {case value="services"}
                            <a href="{site_url}offices/{segment_2}/services/{url_title}">
                                <div class="product_image">
                                    {exp:ce_img:pair src="{product_logo}"}
                                            <img src="{made}" alt="{title}" width="{width}" height="{height}" />
                                    {/exp:ce_img:pair}
                                </div>
                                <h2>{title}</h2>
                            </a>
                            {exp:ce_str:ing truncate="88"}<h3>{product_short_intro}</h3>{/exp:ce_str:ing}
                            <a href="{site_url}offices/{segment_2}/services/{url_title}" class="button">More Information</a>
                        {/case}
                    {/exp:switchee}
                </div>
            </div>

            <div id="myModal_{url_title}" class="reveal-modal small">
              <h2>Get a {title} Quote</h2>

                {exp:forms:form form_name="quote_now" display_error="inline"}
                    {forms:fields}
                            {forms:field}
                    {/forms:fields}
                {/exp:forms:form}

              <p></p>
              <a class="close-reveal-modal">&#215;</a>
            </div>
        {/exp:playa:children}
| 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.