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!

  • 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 '13 at 15:29
  • I don't know exactly how many categories there will be. The client will decide that. – Amy Witty Mar 1 '13 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 '13 at 17:06
  • will do, glad it worked for now – mjr Mar 1 '13 at 17:22
1

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

| improve this answer | |
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>
| improve this answer | |
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.

| 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.