4

I would like to insert a clearfix div after every third category listing. I have used this method successfully when outputting from {exp:channel:entries} tag pairs, but it appears that the {switch} variable is not available for {exp:channel:categories} tag pairs.

Is there another way to accomplish this (perhaps with CSS, jQuery, or another EE function I'm unaware of)?

{exp:channel:categories channel="Projects" style="linear" show_empty="no" dynamic="no" disable="member_data|pagination"}
<div class="column one-third">
    <div class="pic">
        <a href="{path='our-work/list'}">
        {if category_image}{exp:ce_img:single src="{category_image}" crop="yes" width="420" height="290" filter="auto_sharpen"}
        {if:else}<img src="{lv_shortcuts_project_image_none}" alt=""/>{/if}
        <div class="img_overlay"></div></a>
    </div>
    <h3><a href="{path='our-work/list'}">{category_name}</a></h3>
    <p>{category_description}</p>
</div>
{switch='||<div class="clearfix"></div>'} <!-- DOES NOT WORK -->
{/exp:channel:categories}

Thanks!

4
  • 1
    Do you know the exact number of categories that will be displayed? You may be able to use a conditional with the {count} variable.
    – mjr
    Mar 1, 2013 at 15:29
  • I don't know exactly how many categories there will be. The client will decide that.
    – Amy Witty
    Mar 1, 2013 at 15:33
  • @mjr, Thanks for the idea. I did get it working with {if count == "3" OR count == "6"}<div class="clearfix"></div>{/if} for now. It is unlikely they will ever have more than 8 categories. Do you want to post your idea as an answer so I can give you credit?
    – Amy Witty
    Mar 1, 2013 at 17:06
  • will do, glad it worked for now
    – mjr
    Mar 1, 2013 at 17:22

3 Answers 3

1

If you know the exact number of categories that will be displayed, you can use conditionals in combination with the {count} variable.

5

The GWcode Alternate addon will accomplish what you need.

This simple plugin for ExpressionEngine 1 and 2 lets you rotate through any number of values to create alternations, for CSS classes for example.

You can use this plugin to rotate through any number of values, similar to the switch variable in the {exp:channel:entries} tag for example.

The most straightforward use for this would be to alternate CSS classes.

Code example

<ul>
    {exp:channel:categories channel="example" style="linear"}
        {exp:gwcode_alternate count="{count}" alternate="one|two|three"}<li class="{alternate_value}">{alternate_value}: {category_name}</li>{/exp:gwcode_alternate}
    {/exp:channel:categories}
</ul>
3

I see this has already been answered, but there is a jQuery option that might be better for you. At least it won't matter how many categories there are:

$('.selector:nth-child(3n)').after($('<div />').addClass('clearfix'));

This will select every 3rd element that matches .selector and insert <div class="clearfix"></div> after it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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