smartVISU/IconHighlights in Menus

Mit dem folgenden Code lassen sich, zum Beispiel innerhalb vom Hauptmenu oder in der Raumübersicht die Icons farbig kennzeichnen.

Bis smartVISU v2.6

<a href="index.php?page=room_living">
 <img class="icon" src="{{ page == 'room_living' ? icon1 : icon0 }}scene_livingroom.png"/><h3>Wohnzimmer</h3></a>

Ab smartVISU v2.7 werden svg-Icons verwendet und deren Stile mit Klassen festgelegt:

<a class="icon1" href="index.php?page=room_living" >
<img class="icon{% if page == 'room_living' %} icon1 {% else %} icon0{% endif %}" src="{{ icon0 }}scene_livingroom.svg" alt="Wohnzimmer" /><h3>Wohnzimmer</h3></a>

Ab smartVISU v3.4 gibt es die Designs mit Dark Mode. Hier ist es sinnvoll, im Raummenü die folgende Schreibweise zu nutzen:

<a href="index.php?page=room_living">
     {{ lib.svgimg ('', 'scene livingroom.svg', page == 'room_living'?'icon1':'icon0', '')
    <h3>Wohnzimmer</h3>
</a>

Vorteil dieser Methode ist zusätzlich, dass das Icon schon während des Renderns durch Twig eingebettet wird und damit vom smartVISU-Cache gespeichert wird. Das bewirkt bei großen Seiten deutliche Performancegewinne auf langsamen Servern.

Wenn der Code in einem übergeordneten List-Element ist, muss dieses noch die Klasse

class="ui-li-has-thumb"

erhalten.