If conditional using category selections

Question

Is there a way of saying

If a category contains two selections, display this CSS If a category contains one selection display this CSS instead.

I can't seem to find the right formula of {if} conditional with a category selection.

Any help much appreciated.

Answer 1

add a count to the output maybe? Something like this might help: https://github.com/erikreagan/er.entry_category_count.ee_addon

This way you could append a class like 'count_1' etc to each category which is output.

Actually this might be more suitable as it's EE2.x compatible: http://devot-ee.com/add-ons/bw-category-count

Answer 2

Would you be be able to use an :nth-child pseudo class in your css?

http://css-tricks.com/how-nth-child-works/

If you are using jquery it should work in ie

Answer 3

Given the sponsorship example, you could fairly easily figure out how many "active" sponsors you have just using the {exp:channel:entries} tag if all sponsors are in their own sponsors channel for example.

You could then use the {absolute_results} variable to get a number of the amount of sponsors.

Here is an example:

{exp:channel:entries
  channel="sponsors"
  disable="category_fields|member_data|pagination|trackbacks"
  dynamic="off"
}

  {if "{absolute_results}" == "1"}
    {!-- Do something when 1 entry is shown from the "sponsors" channel. --}
  {/if}

{/exp:channel:entries}

Alternatively, if you must use categories, you can try the following which uses the Category Count plugin.

{exp:channel:entries
  channel="sponsors"
  disable="category_fields|member_data|pagination|trackbacks"
  dynamic="off"
}

  {if "{categories}{exp:catcount cat_id='{category_id}'}{/categories}" == "1"}
    {!-- Do something when 1 entry is in the category. --}
  {/if}

{/exp:channel:entries}

You may also want to use Switchee to only parse the actual code of your template that will be used.

Given Switchee your code might look like this:

{exp:channel:entries
  channel="sponsors"
  disable="category_fields|member_data|pagination|trackbacks"
  dynamic="off"
}

  {exp:switchee variable="{absolute_results}" parse="inward"}
    {case value="1"}
      {!-- Only gets evaluated by the template parser and rendered if the case is matched. --}
    {/case}
  {/exp:switchee}

{/exp:channel:entries}

Answer 4

have you looked at http://gwcode.com/add-ons/gwcode-categories/documentation - it has a parameter that grabs the categories an entry has - you should be able to manipulate category presentation using the plugins variables 

Answer 5

I would try to use {total_results} to add a css class to your markup then write your styles around that.

Something like:

<div class="count{total_results}">
    Stuff here
</div>

and in your CSS

.count1 { make the thing really big }
.count2 { make the thing a bit smaller }
.count3 { make the thing a bit smaller again }
.count4 { make the thing teeny tiny }

That's not a full answer but it may give you food for thought.

Answer 6

Given how you've described the end result of what you're looking for, here's how I might choose to handle it:

First, I'd have a channel of sponsors. Custom fields like logo, description, URL - whatever you need for each one.

Second, I'd have a channel for weekly sponsors (or simply a custom field in your weekly setup) that is nothing more than a weekly identification of which sponsors apply for THIS weekly edition using Playa.

The total results of the Playa field would be your total count of sponsors in a given week. That would determine the requirements of the grid for displaying the sponsors - presumably you would have a maximum as determine by what fits naturally across the top where you have them positioned currently - let's use four as an example.

{exp:channel:entries channel="weekly_sponsors" limit="1" disable="categories|member_data|pagination"}

    <p>This week, made possible by:</p>

    {exp:playa:children channel="sponsors"}
        {if count == "1"}<ul class="weekly_sponsors {total_results}">{/if}
           <li><img src="{logo}" alt="{title}"/></li>
        {if count == total_results}{/if}
    {/exp:playa:children}

{/exp:channel:entries}

As I mentioned, this could simply be a playa field in your weekly entry setup.

Because you would have a logical maximum number of sponsors to fit across - in this example four, you would just need the width of each LI to adjust, depending on the total_results class applied to the list. So without any margin or padding applied, it might be something like this:

.weekly_sponsors.5-sponsors li {
    width: 20%;
}

.weekly_sponsors.4-sponsors li {
    width: 25%;
}

.weekly_sponsors.3-sponsors li {
    width: 33%;
}

.weekly_sponsors.2-sponsors li {
    width: 50%;
}

.weekly_sponsors.1-sponsors li {
    width: 100%;
}

I'm not suggesting your widths would actually always divide evenly - this is just an example. But that's likely how I would handle it to future proof it as much as possible. This would also give you the ability to break the list and create a new row if needed following the same pattern.

Hope that helps.

Answer 7

I can imagine a way to this on EECMS, using two {categories} tag pairs, but, since its is a design issue that can be solved just on CSS, lets do it. Besides, the solution using CSS is much easier.

If you can drop support to IE6 and IE7, you can use display:table-cell.

.sponsor.group {display: table;}
.sponsor.group > a {display: table-cell;}
.category_image {display: block; margin: 0 auto; padding: 10px; width: 85%;}

Some older versions of webkit may need a child element of div.sponsor.group to play the role of table-row.

---

In case somebody really needs to use a class name to represent how many categories a entry has, this is the easier solution:

<div class="sponsor group {categories show_group="2"}s{/categories}">
{categories show_group="2"}
    <a href="..."><img class="category_image" src="{category_image}" /></a>
{/categories}
</div>

On css:

.s {}
.ss {}
.sss {}
.ssss {}