Show the category image belonging to specific post

Question

So on the Happy Monday website (http://www.happymondaypodcast.com) we have different sponsors for each show, these sponsors are set up as categories and assigned to the "Episodes" channel. I want to be able to select the sponsor for each show and have the category image (mailchimp, typekit etc.) show up for each episode.

The problem I'm having is that it's showing all sponsors, regardless of what has been selected in the individual episode posts.

The code I'm using is:

 {exp:channel:entries channel="podcast_episodes" category="1" limit="1" dynamic="no"}
<div class="hero_show" style="background: url('{guest_picture}') no-repeat right top #ffffff;">
            <div class="show_info">

                <h3><a href="{url_title_path='episodes'}">{episode_number} {title}</a></h3>
                <span class="date">{entry_date format="%l %d%S %F %Y"}</span>
                        <!--<p>{podcast_description}</p>-->

                {podcast_player_link}

    <div class="sponsors_small">
        <p>Made possible by:</p>
        {exp:channel:categories channel="podcast_episodes" category_group="2" style="linear" show_empty="no"}

               <img class="category_image" src="{category_image}" alt="{category_name}" title="{category_name}"  />
            {/exp:channel:categories}

        </div>

            </div>  

{/exp:channel:entries}  

Any help would be so much appreciated. Completely stuck.

Answer 1

{exp:channel:categories} is used to output a list of categories belonging to a category group or assigned to a channel.

What you want here is a list of categories assigned to an entry so you should use the category variable pair

{categories show_group="2"}{category_image}{/categories}

That should get you what you need.

Alternative setup

As always with EE, there are multiple ways to skin a cat. Instead of using categories, you could also consider using a sponsors channel and then use a relationship between your episodes and the sponsors.

The advantage of that approach is that you get to use all the custom fields you want to define your sponsors data structure (multiple thumbnails, name, type of sponsors, etc.).

PS: Happy Monday makes my Mondays brighter, keep it up.

Answer 2

Just a few small tweaks needed. Firstly you're including dynamic="no" in your Channel Entries tag. Normally EE will grab the URL title to determine which entry to display but by including that tag you're telling it not to.

With regards to the categories you can remove the {exp:channel:categories} tag pair and replace with the {categories} tag pair:

{categories show_group="2"}
    <img class="category_image" src="{category_image}" alt="{category_name}" title="{category_name}"  />
{/categories}

So now EE is dynamically grabbing the entry and then looping through that individual entry's categories to show the desired information for each one. In full it should look something like this:

{exp:channel:entries channel="podcast_episodes" limit="1"}
    <div class="hero_show" style="background: url('{guest_picture}') no-repeat right top #ffffff;">
        <div class="show_info">
            <h3><a href="{url_title_path='episodes'}">{episode_number} {title}</a></h3>
            <span class="date">{entry_date format="%l %d%S %F %Y"}</span>
            <!--<p>{podcast_description}</p>-->

            {podcast_player_link}

            <div class="sponsors_small">
                <p>Made possible by:</p>

                {categories show_group="2"}
                    <img class="category_image" src="{category_image}" alt="{category_name}" title="{category_name}"  />
                {/categories}
            </div>
    </div>  
{/exp:channel:entries}

Answer 3

Have you tried the categories tag pair parameters something like this

{categories show_group="1" limit="1"}{category_image}{/categories}