Contao extension [mae_image_map]

Inhaltselement
Inhaltselement

Diese Erweiterung ermöglicht die Konfiguration von responsive ImageMaps im Contao Backend und stellt ein neues Inhaltselement zur Verfügung.

Der Vorteil dieser Erweiterung liegt darin, dass Redakteure selbstständig ImageMaps erstellen und bearbeiten können. Außerdem ist der Einsatz von Javascript nicht nötig, um die generierten ImageMaps responsive zu machen. Es werden nicht die üblichen <map> und <area> tags verwendet, sondern gewöhnliche Links mit Hintergrundbildern, die anstatt der Bildunterschrift in den Quellcode des Bildes eingefügt werden.

Eine mitgelieferte CSS Datei sorgt für die grundlegenden Formatierungen und der erzeugte HTML-Code ist so gestaltet, dass die Definition eigener Styles und die Zugriffe per JS möglichst einfach zu realisieren sind.

 

 

Frontend Beispiel

Ofen

Konfiguration

ImageMap

Backend - ImageMap
Backend - ImageMap
  • Vorlagenbreite und -höhe
    Hier werden die Dimensionen des Originalbildes eingegeben, in dem man die Koordinaten und Größen der Bereiche abmisst.
  • Standardbreite und -höhe der Bereiche
    Diese Einstellungen sind nützlich, wenn alle Bereiche gleich groß sein sollen und man in den Bereichen den Mittelpunkt als Koordinaten angibt. So hat man später die Möglichkeit, die Standardgröße zu ändern, ohne die Bereiche einzeln anpassen zu müssen.
  • Standard-Hintergrund
    Auch hier gilt der Vorteil, bei Änderungen nicht die einzelnen Bereiche anpassen zu müssen. Wird weder ein Standard-Hintergrund, noch ein spezieller Hintergrund am Bereich definiert, wird ein transparentes GIF verwendet, da der IE8 die Bereiche ohne Hintergrundgrafik nicht anzeigen würde.

Bereiche

Backend - Bereich
Backend - Bereich
  • Bezugspunkt
    Je nachdem, ob es einfacher ist, den Mittelpunkt oder die linke, obere Ecke des Bereichs auszumessen, kann hier der Bezugspunkt festgelegt werden. Der Mittelpunkt ist dahingehend zu bevorzugen, da er bei späteren Größenänderungen des Bereichs nicht angepasst werden muss.
  • Beschreibung
    Die Beschreibung ist im Frontend standardmäßig unsichtbar (Contao-Klasse "invisible").
  • Hintergrunddarstellung
    zentriert: proportinal in der Mitte des Bereichs
    linksbündig: proportional, links
    rechtsbündig: proportional, rechts
    bereichsfüllend: das HG-Bild wird so verzerrt, dass es den gesamten Bereich ausfüllt. Beim IE8 muss hier ggf. mit "DXImageTransform" nachgeholfen werden.
  • CSS-Klasse(n)
    Die Klassen dieser leerzeichengetrennten Liste werden sowohl dem a.area, als auch der .description hinzugefügt. Will man der gesamten ImageMap eine Klasse oder ID verpassen, kann man die Standardfelder im Inhaltselement verwenden.

Erzeugter HTML Code

<div style="margin-top:25px;" class="ce_mae_img_map block">
    <h2>Frontend Beispiel</h2>
    <figure class="image_container">
        <img width="1040" height="691" alt="Ofen" src="assets/images/7/oven-85292a47.jpg">
        <figcaption class="caption">
            <a style="width: 11.333%;height: 13.551%;left: 88.083%;top: 27.604%;background-image: url(stdBg.png);" data-description-id="areaDesc-1" title="Sicherungskasten" href="home.html" class="area stretch-bg hasDescription"></a>
            <div class="description invisible" id="areaDesc-1"><h2>Sicherungskasten</h2>
                <p>Ein alter, unsicherer Sicherungskasten</p></div>
            <a style="width: 9.833%;height: 16.562%;left: 26.5%;top: 33.124%;background-image: url(stdBg.png);" data-description-id="areaDesc-2" title="Stromding" href="home.html" class="area stretch-bg hasDescription"></a>
            <div class="description invisible" id="areaDesc-2"><h2>Stromding</h2>
                <p>Eine betagte Gerätschaft, die etwas mit Elektrizität zu tun haben mag</p></div>
            <a style="width: 14.167%;height: 17.566%;left: 6.667%;top: 56.964%;background-image: url(stdBg.png);" data-description-id="areaDesc-3" title="Hintertür" href="home.html" class="area stretch-bg hasDescription"></a>
            <div class="description invisible" id="areaDesc-3"><h2>Hintertür</h2>
                <p>rätselhafter Durchgang zu einer unbekannten Räumlichkeit</p></div>
        </figcaption>
    </figure>
</div>

Alle relevanten tags befinden sich innerhalb des <figcaption> Blocks, also ".ce_mae_img_map .caption"

  • a.area
    Die Bereiche verfügen über die Klasse "hasDescription", sofern eine Beschreibung für den Bereich eingegeben wurde und "hasLinktext", wenn ein Linktext vorhanden ist.
    Im Attribut "data-description-id" befindet sich die ID des zugehörigen ".description" Blocks. Zudem können im Backend individuelle Klassen pro Bereich definiert werden, die dann sowohl bei der area, als auch bei der description hinzugefügt werden.
  • div.description
    Die Beschreibung ist standardmäßig unsichtbar, weil davon ausgegangen wird, dass sie mittels eigenem Javascript Code verarbeitet wird. Die berechneten Positions- und Größenangaben, sowie das definierte Hintergrundbild werden als inline-styles hinzugefügt.

CSS Anpassungen

.ce_mae_img_map .image_container {position: relative;overflow: hidden}
.ce_mae_img_map .area {display: block;position: absolute;background-position: center center;background-repeat: no-repeat;background-size: contain}
    .ce_mae_img_map .area.stretch-bg {background-size: 100% 100%}
    .ce_mae_img_map .area.left-bg {background-position: left center}
    .ce_mae_img_map .area.right-bg {background-position: right center}

Dies sind die Standard CSS-Eigenschaften, die mit der Extension mit geliefert werden. Sie können natürlich jederzeit überschrieben, bzw. erweitert werden.

jQuery Codebeispiel

// Hover der area blendet die description ein
$('.ce_mae_img_map .area').mouseenter(function() {
	desc = $('#' + $(this).attr('data-description-id'));
	desc.css('display', 'none');
	desc.removeClass('invisible');
	desc.fadeIn(300);
});