I’m trying to figure out the best way for a client to select an icon to go alongside a heading. See this screenshot for an example of what I mean, each heading has a different icon, which the client can choose in the Manager.
At the moment I have setup a radio option Template Variable so the client can select the icon to go with the article:
Then in the getPage template for each article I have this code:
<h1
[[+article-category:is=`euro`:then=`class="euro"`:else=`class="none"`]]
[[+article-category:is=`shopping`:then=`class="shopping"`:else=`class="none"`]]
[[+article-category:is=`house`:then=`class="house"`:else=`class="none"`]]
[[+article-category:is=`sun`:then=`class="sun"`:else=`class="none"`]]
>
This is the bit I don’t like and I’m sure there’s a better way to do this... this code will run a check for each possible TV option, if its true it will return a CSS class for the icon and add it to the heading.
This will become messy when more icons are added, potentially there could be 15-25 icons to choose from; which running this check inside each template would become too processor intensive and could slow the site down. Especially displaying something like six articles on the homepage; that could be up to 150 checks

its also not that easy to update and modify.
Anybody got any good ideas?