Zwei konstengünstige concrete5 Erweiterungen werden zu einem neuen Feature vereinigt: responsive Image MAP erzeugt Popup Fenster mit der genauen Beschreibung der sensitiven Bild-Region.
Dazu werden die beiden Bausteine
- responsive Image Map und
- Webli Content Popup
benötigt.
Innerhalb der Seite wird ein Block-Element vom Typ "responsive Image Map" angelegt und die sensitiven Bereiche definiert:
Der CSS Name muss identisch sein mit dem Namen, der später dem Popup Element gegeben wird!
Dannach werden die POPUP Blöcke angelegt und beschrieben. Dabei ist zu beachten, dass als Linktyp CSS Selector eingestellt wird. Der CSS Name benötigt den bekannten "Punkt" am Anfang des Wortes, in diesem Fall '.thymus':
Und so sieht es dann aus:
Damit das Ganze im Zusammenspiel auch funktioniert musste ich noch das Blockelement "Image Map" beim Linktyp "Url" um die Möglichkeit, einen StyleSheet Klassenamen angeben zu können, erweitern.
Der Code dazu ist schnell beschrieben.
Im Backend muss die Maske um ein Textfeld für den CSS Namen erweitert werden (Datei: edit.php):
<div><?php echo $form->text('className[]', $area['className']); ?></div>
Auch die Datenbanktabelle "btImageMapArea" muss entsprechend erweitert werden:
<field name="className" type="C" size="255"></field>
Und im Frontendmodul (view.php) muss die Klasse beim Link eingetragen weden:
$className = ''; if ( $area['className'] != '' ) { $className = 'class="' . $area['className'] . '"'; }
<?php if ($url) { <a <?php echo $className; ?> ....