Zielstellung - Responsive Background-Grafik als Cover

Es gibt Templates, so z.B. Osmosis von RocketTheme, die arbeiten sehr intensiv mit Modulen als Content. Dabei werden im Grid-Layout von Gantry auch gern Grafiken als Hintergundbilder für Module verwendet. Wenn man konsequent responsiv gestaltet, ist das mit den Grafikhintergründen mitunter problematisch, denn die Module können im Grid-Layout je nach Bildschirmauflösung / Gerät sehr unterschiedliche Seitenverhältnisse haben. Trotzdem sollen die Grafiken modulfüllend und sinnvoll platziert angezeigt werden. Sinnvoll heißt, dass das Motiv der Grafik nicht durch schlechten Schnitt verunstaltet wird.

Zweckmäßig ist also hier mit der background-size - Angabe cover zu arbeiten und das Bild durch background-position vertikal und horizontal einzufügen. Sollte sich das Seitenverhältnis des Modulblocks z.B. von horizontal zu vertikal ändern, muss evtl. zusätzlich die Platzierung angepasst werden. Es ist also notwendig auf diese Responsive Darstellung dynamisch zu reagieren, was allein durch css-Style nicht erreicht werden kann, sondern durch JavaScript dynamisch unterstützt werden muss.

 

Nun kann man für dieses Ziel z.B. per jQuery Scripte bauen und an Elemente binden. Das setzt aber voraus, dass man die Elemente alle schon kennt. Will man aber dem Redakteur die Möglichkeit einräumen selbst zu entscheiden, wann ein Modul mit einem wie oben beschriebenen Bild-Hintergrund ausgestattet wird, dann muss man ihm dafür einfache Mittel zur Verfügung stellen. Eine Möglichkeit dies, mit vorhanden Mitteln des Gantry-Frameworks zu verwerkstelligen sei hier beschrieben.

 

Umsetzung - mit Joomla-Bordmitteln, Gantry und RokCandy

Voraussetzung ist die Nutzung von Joomla 3.x, Gantry als Template und die Installation der RocketTheme-Komponente RokCandy.

J!3 als Voraussetzung ermöglicht uns einem Modul eine Hintergrundgrafik mit zu übergeben, die dem Modul-Block-Elemente automatisch als Background-Image zugewiesen wird. Gantry ist zu empfehlen aber nicht zwingend notwendig. Ich habe noch nicht getestet, ob die Komponente RokCandy auch ohne Gantry-Framework funktioniert. RokCandy ist eine Komponente mit Plugin, welche die Erstellung und Verwaltung von Macros ermöglicht, welche über das Plugin in jegliche Inhalte über den Editor eingefügt werden können und dann ausgeführt werden können.



Diese RokCandy-Macros können idealerweise auch Java-Script enthalten. Normalerweise möchte man den Redakteuren keine JavaScript in Beiträgen oder Modulinhalten erlauben, weshalb die meisten Editoren JavaScript beim Speichern der Beiträge herauslöschen. Wir brauchen aber aus oben beschriebenen Gründen JavaScript, um die Hintergrund-Bilder der Module flexibel responsiv zu formatieren. Das erreichen wird ganz einfach über die RokCandy-Macros.

Hier nun die Schritte im Detail:

  1. Unter AdminMenü > Komponenten > RokCandy legen wir ein neues Makro an durch Klick auf den Button Neu.
  2. In das erste Feld Marco trägt man z.B. folgendes ein:[div class="stretchModulBkgdImg" pos="{BkgdPos}"]{id}[/div]
    Kurz erklärt: Das ist quasi der Macro-Plugin-String. RokCandy scannt die Beiträge auf Vorkommen dieses Strings. Wenn er gefunden wird, dann wird der String wie üblich bei Plugins durch entsprechende Plugin-Inhalte ersetzt. Hierbei ist es möglich MacroVariablen-Positionen zu platzieren, so wie es im Beispiel erfolgt durch {BkgdPos} und {id}. Diese können später durch den Redakteur durch konkrete Werte ersetzt werden.
  3. Nun können wir in das Feld Html eintragen, was durch das Plugin statt des Macro-Plugin-Strings ausgegeben werden soll ggf. unter Verwendung der MacroVariablen. Für unseren Zweck kann solches ein Script z.B. so aussehen:
    </p><div id="{id}"></div>

    <script type="text/javascript">
    var {id} = jQuery('div#{id}').parent();
    var BkgdPos = '{BkgdPos}';
    var {id}_Parent = {id}.parent();
    var {id}_Height = {id}_Parent.height();
    var {id}_Width = {id}_Parent.width();
    if ({id}_Height == 0) {
       {id}.css('height','100%');
    } else {
       {id}.height({id}_Height);
    }
    if (BkgdPos != '') { {id}.css('background-position','{BkgdPos}'); }
    </script><p>
    Auch das Beispiel kurz erklärt: Ganz wichtig ist hier die beispielhafte Verwendung der MacroVarialben {id} und {BkgdPos}. Diese werden vom Plugin durch ihre Übergabewerte ersetzt, so wie sie der Redakteur im Editor übergibt. D.h. sowohl im vorangestellten DIV-Block als auch im nachfolgenden JavaScript.
    Den vorangestellten DIV-Block mit der ID benötigen wir um ein jQuery-Objekt damit erzeugen zu können und dessen Eltern-Element ansprechen zu können.
    Das JavaScript ermittelt also den Parent von unserem per {id} eindeutigem DIV-Element, welches im Gantry-Template das äußerste DIV-Element im Modulpositions-Grid-Element ist und von Joomla das Hintergrundbild als Background zugewiesen bekommt, sowie auch die ModulKlassenSuffixe auf die wir uns dann beziehen können. Das ID-Element wird auf die gleiche Höhe gebracht wie sein Eltern-Element, damit das Hintergrundbild über die volle Höhe sichtbar wird. Dann erfolgt die Positionierung anhand optional übergebener Positionsangaben in {BkgdPos} z.B. mit dem Wert "center 10%", oder was auch immer der Redakteur schön findet.
    Das ganze wird gespeichert und steht nun als Macro zur Verfüfung.
  4. In einer css-Datei müssen noch die allgemein gültigen Styleangaben für das Cover-Hintergrundbild definiert werden. Ich arbeite hier z.B. mit dem Klassen-Selektor .StretchFullSizeBkgdImg. Das kann z.B. so aussehen:
    .StretchFullSizeBkgdImg {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat:no-repeat;
    background-position:center center;
    }

Damit sind schon alle Vorbereitungen durch den Webdesigner abgeschlossen. Alle anderen Dinge kann der Redakteur nur selbst erledigen.

Hinweis zur Klasse StretchFullSizeBkgdImg in unserem DIV-Element:

Diese hat hier keine formatierende Bedeutung. Es dient lediglich dazu den Macro-String zuverlässig einmalig zu machen, was für das RokCandy-Plugin notwendig ist.

Hinweis zu den <p> - Tags:

Ein kleiner Nachtrag: Manche Editoren haben je nach Konfiguration die Eigenschaft alle Editorblöcke in Absatz-Tags zu kapseln, folglich also auch unser RokCandy Macro-Plugin-String. Das kann a) zu unerwünschten Abständen im Modul führen und b) gravierender, zu unsauberem HTML-Code, weil die p-Tags sich auch um das JavaScript kapseln. Diese Unsauberkeit sollte man dann eleminieren, in dem man in Macro-Html entsprechende schließende und öffnende Gegenstück des p-Tags einfügt - so wie im obigen Scriptbeispiel zu sehen.

 

Was der Redakteur tun muss

Hier eine Anleitung wie der Redakteur mit diesem Werkzeug umgeht.

  1. Zunächst lädt er ganz normal eine Grafik hoch, die in seinem Modul als Hintergrund-Grafik dienen soll.
  2. Er erstellt z.B. ein neues Modul vom Typ "eigene Inhalte (leeres Modul)".
  3. Unter dem Modul-Registerreiter Optionen gibt es den Parameter Hintergrundbild auswählen. Hier wird das unter 1. hochgeladene Bild ausgewählt.
  4. Unter dem Modul-Registerreiter "Erweitert" gibt es den Parameter "Modulklassensuffix". Hier tragen wir mit führendem Leerzeichen unseren oben beispielhaft genannte Klassen-Selector StretchFullSizeBkgdImg ein.
  5. Ebenfalls unter "Erweitert" muss unter der Option Modulstil der Stil basic ausgewählt werden. Damit wird ein ganz schlichtes Modul-Template zugeweisen und in diesem Modul erfolgt auch die Ausgabe des Hintergrundbildes als style-Anweisung im Modul-Element. Alternativ können auch andere Stile verwendet werden, dann muss aber ggf. das JavaScript modifiziert werden um die Elemente korrekt zu finden.
  6. Unter dem Modul-Registerreiter Modul finden wir unseren Inhalte-Editor. Wenn das RokCandy-Plugin aktiviert ist, dann gibt es jeweil unter dem Editor eine Button RokCandy Macros. Den klicken wir und erhalten eine Auswahlliste aller RokCandy-Plugins. Darunter auch unser oben beschriebenes erstelltes Makro. Das klicken wir an und es wird exakt die Macor-Plugin-String als Zeile in den Editor eingefügt.
  7. Nun müssen noch die MacroVariablen-Platzhalter durch konkrete Werte ersetzt werden. Zum einen die ID ({id}). Diese sollte natürlich vom Redakteur eindeutig gewählt werden, damit es nicht zu Fehlverhalten kommt. Zum anderen unseren Positionsanweisung falls wir den in der css-Datei evtl. vorgegebene center center Positionierung überschreiben wollen.
  8. Nun können die evtl. weiteren Modulinhalte eingegeben werden und dann das Modul gespeichert und veröffentlicht werden.

Das waren die Schritte, die der Redakteur vornehmen muss. Auf diese Weise lassen sich weitere Module mit passend skaliertem Hintergrundbild ausstatten. Wichtig ist nur, immer different zueinander ID's zu verwenden - jedes Modul seine eigene ID.