How to display multiple fields from a taxonomy term on a node (and control the html) I have a content type (product) with a term reference field (colour).

When I create a new product and select a colour I would like the display of that node to render the taxonomy items term name and an image that I've attached to each term + control the html markup.

Via the Display Suite module I've managed to render the term's title and colour on the node using "Rendered taxonomy term" format on the field (screenshot below), however I want more control in how the title and image are outputted in the html markup. This is halfway there.

[![enter image description here][2]][2]

The title and image appear right after each other in the markup (as it is correctly rendering the taxononmy term) but to achieve the layout the designer wants I need to be able to render the title and image individually (essentially separate fields "taxonomy title" and "taxonomy image" on my "Product" node's display, instead of just the single "Rendered taxonomy term" that I currently have configured.

Any help would be greatly appreciated.

Edit:

"Product" and "Colour" were just an example. In reality my site has a content type called a "lift" and it has a term reference field linking to a "location" vocab.

So if I add a "lift" and say the location is "Sydney" then when viewing that node I want to be able to pull the "Sydney" term's title and image..but as explained I need greater control over the positioning of the markup (specifically in relation to the "lift" nodes other fields)

Example of what I want the node to look like:
Sounds like this this could be achieved with Inline Entity Display.


  Overview
  Make available the fields and text properties from referenced entities into the parent entity template and the manage fields display overview.


This should allow you to move individual fields from your referenced taxonomy terms aroung independently on you node's manage display setting page.