Now when Taxonomy is an entity, and an entity can have fields; Taxonomy Image functionality can be achieved by adding a Image field to a vocabulary.

How to do this

  1. Enable Image module and its required modules.
  2. Go to the Taxonomy settings page (Administration » Structure » Taxonomy) and choose edit for the vocabulary that you would like to associate images and terms – and then go to Manage fields in the tabs menu.
  3. Now add a image field and make the necessary settings for that field.
  4. Now you have a image field to add images, when you add or edit terms that belong to the vocabulary that has the image field.

Display taxonomy images inside nodes

In the, not so crazy, scenario that you want to display the taxonomy image you just created inside a node, you can do this in Drupal 7 with the use of some extra modules.

First, you will need Entity API and EntityReference installed and enabled. Optionally, you may also want to have Entity View Mode so you can create a custom view mode for displaying the taxonomy term with just the image.

Then, follow the steps below:

  1. Go to the taxonomy admin page (Administration » Structure » Taxonomy), select edit on the vocabulary you wish to use. Then go to "Manage Display" to activate and edit a custom display to show the image.
  2. Go to your content type, add a field of type "Entity Reference", and on the "Field Settings" page set the target type to "Taxonomy Term" and select the vocabulary you want to use in "Target Bundles". Finish editing and save.
  3. Go to "Manage Display" for the content type this time. For the Entity Reference field select the Format column to be "Rendered Entity" and after clicking the gear icon, select the view mode you just edited.
  4. Optional: You may wish to use a custom taxonomy-term.tpl.php in order to render the taxonomy image without the term tag. See the code sample at bottom.

Display taxonomy images in Views

In Views you just need to add the Entity Reference field to the "Fields" section, select the formatter to be "Rendered Entity" as above, and use the same view mode, or another if you prefer. Using this method there is no need to add a relationship.

Note

It should be noted that you are essentially using Entity Reference in place of the normal core Term Reference in order to get more flexible display options. If you have to use the core Taxonomy Reference you may have to write a new field formatter, or you can use the Taxonomy Image module for Drupal 7 (still only in Git currently).

Code sample for taxonomy-term.tpl.php

If you are rendering the taxonomy term entity via entity reference, and have a custom view mode called taxonomy_term_image and a field on the taxonomy term called field_term_image, the following could be used to only display the image when you are referencing it.

<?php if($view_mode != 'taxonomy_term_image'): ?>
<div id="taxonomy-term-<?php print $term->tid; ?>" class="<?php print $classes; ?>">

  <?php if (!$page): ?>
    <h2><a href="<?php print $term_url; ?>"><?php print $term_name; ?></a></h2>
  <?php endif; ?>

  <div class="content">
    <?php print render($content); ?>
  </div>

</div>
<?php else: ?>
  <?php if(!empty($content['field_term_image'])): ?>
    <h2>
      <a href="<?php print $term_url; ?>">
      <?php print render($content['field_term_image'])?></a>
    </h2>
  <?php endif; ?>
<?php endif; ?>

Comments

Z2222’s picture

Quick tip: to add the taxonomy images to your views, first create a relationship to your taxonomy in the advanced settings of the views. Then a new field will appear for your taxonomy images.

daniorama’s picture

What do you mean with creating a relationship to the taxonomy? The entity reference field just allows to select "Rendered entity" as format, so a view mode for the vocabulary with just the image is needed.

I haven't found a direct way of referencing just a field of an entity. Do I miss anything?

Scyther’s picture

He/her means that in Views http://drupal.org/project/views you need to create a relation to the taxonomy to choose the image field for the taxonomy in views.

daniorama’s picture

Oh, I see, thanks :) But isn't that too much? I mean, if you just want to show icons from taxonomy a custom view mode for a vocabulary doesn't need views and follows drupal 7 core possibilities better.

airstarh’s picture

Hello, dears
Thus is great at all!
Except one:

When I look at taxonomy term, D7 says, there are no nodes in the term by now; while terms are added to few nodes vie Entity reference field.

Is it correct ? Is it bug?
How to full term pages using this method ?

Thanks in adbvance!

rjay3087’s picture

can you give me a instruction on how to add image in a taxonomy in drupal 7? im just a newbie here... thanks

Jibus’s picture

In the taxonomy section, you have have the ability to add fields. Simply add a image field type for the desired vocabulary.

Then, to display the picture into your node which has the term, you can use the taxonomy image module for D7.

annedougherty’s picture

This module is basically inoperable in D7. There is no way to configure the settings for it.

drupal a11y’s picture

Adding an image-field is really easy, but how can I display it on a node or view?

Z2222’s picture

Once you create the relationship in the view, you will be able to add the taxonomy image as a field.

Quadomated’s picture

This works great, but only shows one taxonomy term.

What if I have an event listing page and would like to show icons for each sport that is represented by that event. i.e. I have a multi-event summit meeting coming up for climbers, dogsledders, alpine skiers, snowboarders, snowshoers, etc.. How can I show an icon for each using this method?

daniorama’s picture

I can use multiple terms with no problems using a custom core view mode with every field but the image hidden, instead of using a view. I haven't tried using fields but I'm not sure why won't you be able to use multiple terms.

Jibus’s picture

I set an imagefield in my vocabulary. I added one image in a term. This image is like a category image.
In my content type, i have a field wich is linked to my vocabulary.

My question is how to display the category image on a node ?

daniorama’s picture

With entity reference module, use a view to show the node or use a custom "view mode" in taxonomy that only shows images fields.

vegantriathlete’s picture

I created a forum topic that may answer your question.

thomaschall’s picture

A couple of clarifications that got me stuck on this.

Then go to "Manage Display" for the taxonomy term and activate and edit a custom display to show the image.

To clarify this instruction, you have to go to the "Manage Display" within the Node Content Type -> Manage Display Tab. From this point, you change the "Format" column of the newely created Entity Reference to "Rendered Entity".

On another note, I also added a file taxonomy-term.tpl.php to customize the taxonomy template within my theme. This overrides the default taxonomy-term.tpl.php, because I wanted to remove the

tag when rendered.

finnhappy’s picture

I tried to follow the tutorial and adapt it to my case - but with no success. Please could you point me what am I doing wrong?

I want to achieve simple thing - get Taxonomy image rendered according the Term ID in the url. I have the image field in the Vocabulary where I need it and have also the Views (Taxonomy) with the fields Title and Image. Title and description is showing OK but I cannot make to show the image.

Probably am I doing something wrong but I dont know how to proceed so I will appreciate any help.

vewakayeh’s picture

when adding Entity Reference field i choose

1) LABEL [for example: Term Icon]
2) FIELD TYPE [Entity Reference]
3) WIDGET [????????]

i see 4 widget:
a. check boxes/radio buttons
b Select list
c. Autocomplete
d. Autocomplete (tags style)

which one is the proper widget?
choosing any of this, allways resolv to aditional input field in the Create/Edit node with name 'Term Icon'

vjkaran’s picture

This worked well using Entity Reference field and I added the display of Image field in the node template file. But when I translate the Node the Image is not displayed. Any help please....

heartlesspigeon’s picture

Hello. I have several small icons that I would like to appear in a teaser. They are associated with different terms but of the same taxonomy and field. All the default display suite layouts force them into separate rows in the same column in a vertical layout. Short of creating a custom layout, is there any way to achieve this?
Thanks

Perseids’s picture

After several rounds of trial and error I finally got this to work.

You should note that "how to modify what is displayed on the node" is a separate issue, which causes extra-confusion here. To display whatever you want on a node, install a module called "display suite" it works a wonder, or edit the node-php if you're comfortable with code. The instructions above seem to have been written with display suite enabled, reading some of the comments above I think some aren't aware of this.

Note that you don't need views at all to display a "taxonomy image" in a node. Views' advanced setup with Taxonomy (validation term id etc) is also a separate issue IMO.

This is how I did it:

What I wanted to achieve is to have a vocabulary where I can insert a node author's name and have their image displayed that way it can link to all nodes that they have authored. I did not want to create an account for each contributor.

**Requirements:

*Modules: Entity API, EntityReference, Display suite

**Taxonomy setup

*Create a new Vocabulary, in my case it was "writer".
*Add an image field for "writer", let's call it "writer image". (Structure » Taxonomy » writer > manage fields)
*Add "writer image" to the writer display (Structure » Taxonomy » writer > manage display. [Beware of which "view mode" you're on, look at the upper right just below the "Manage fields/display" tabs. You will have to select the same "view mode" in order to show what you have chosen)

**Content type setup

*In my case, the content type with which I want to associate the "writer" vocabulary is "Guest post". Edit "Guest post" and add two fields: 1. "Writer" -> field type "Term reference" and associate it with the vocabulary "writer" 2. "Writer entity reference" -> field type -> "Entity reference" -> Set it to "Mode" -> "simple (with optional filter by bundle) -> target bundles -> "writer". (note: Target type must be set to "taxonomy term")
*Now manage display and add the two fields, that you just created, to the display. In my case it was: 1. writer and 2. writer entity reference, for which the format should be set to "rendered entity" (beware that you're setting on the same "view mode" in the upper right)

Now when creating or editing content of content type "Guest post", I have two additional fields: 1. the writer field 2. the writer entity reference. For example you should put in in both: "John Doe" (optionally wait for the auto-complete in the entity reference field, because it apparently adds a prefix to it) for a post written by John Doe. You shouldn't see anything yet on your node since we haven't added an image to "John Doe".

Go to structure->taxonomy and select your vocabulary name. In my case it was "writer"->list terms->then individually edit each "term ID" and add an image in the image field that you previously created (in the *Taxonomy setup* above). In my case it was "John Doe" then upload an image in the "write image" field.

Now whenever you submit a content type="Guest post" and select "John Doe" as an entity reference the image for John Doe should appear, along with "John Doe" linked to all nodes with that term reference, just like the tag style.

annedougherty’s picture

Thank you for the clarification. Followed your instructions and was able get an image to display for each taxonomy term.