CMS-Contao: Deutsche Labels für Slimbox (Lightbox, Bildergalerie)

Bei der slimbox (Lightbox, Bilder-Galerie, Gallery-Modul) von Contao (ex Typolight) sind die Labels (prev, next, close, Image x of y) standardmäßig auf englisch. Ich möchte sie aber sprachabhängig haben, z.B. auf deutsch - je nachdem, welche Sprache im Frontend gerade aktiv ist.

Die Bildunterschrift kann konfiguriert werden, next, prev und close sind aber (leider) Bilddateien, die im CSS des Slmibox-Plugins hart verdrahtet sind.

Folgenden Weg habe ich gewählt.


1. Bilder für prev, next, close

Die Bilder für prev, next, close sind zu finden unter plugins/slimbox/css als prevlabel.gif, nextlabel.gif und closelabel.gif. Diese habe ich kopiert und mit der Endung "_de" versehen, also z.B. "nextlabel_de.gif".

2. Extra Stylesheet für die neuen Label-Bilder

Die Bildnamen sind im CSS von Slimbox verdrahtet. Also lege ich zunächst eine separate CSS-Datei an, z.B. unter sys/slimbox_de.css mit folgendem Inhalt:

#lbCloseLink {
	width: 166px; /* width of my image closelabel_de.gif */
	background: transparent url(../plugins/slimbox/css/closelabel_de.gif) no-repeat center;
}
#lbPrevLink:hover {
	background: transparent url(../plugins/slimbox/css/prevlabel_de.gif) no-repeat 0 15%;
}
#lbNextLink:hover {
	background: transparent url(../plugins/slimbox/css/nextlabel_de.gif) no-repeat 100% 15%;
}

3. Integration

Die Konfiguration der Slimbox findet statt im Template unter /system/modules/frontend/templates/moo_slimbox.tpl. Dieses kopiere ich nach /templates/[my theme title]/moo_slimbox.tpl - damit wird dieses Template beim Seiten-Rendern genutzt und nicht das Original. In der Template-Kopie mache ich die folgenden Änderungen:

<?php

// Add slimbox style sheet
$GLOBALS['TL_CSS'][] = 'plugins/slimbox/css/slimbox.css?'. SLIMBOX .'|screen';

$imglabel = '';
if ($GLOBALS['TL_LANGUAGE'] == 'de') {
    /* Add my stylesheet with the german label images... */
    $GLOBALS['TL_CSS'][] = 'sys/slimbox_de.css?'. SLIMBOX .'|screen';
    /* ... and set the german subtitle/image label. */
    $imglabel = 'Bild {x} von {y}';
}
?>

<script type="text/javascript" src="plugins/slimbox/js/slimbox.js?<?php echo SLIMBOX; ?>"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
Slimbox.scanPage = function() {
  $$(document.links).filter(function(el) {
    return el.rel && el.rel.test(/^lightbox/i);
  }).slimbox({loop: true<?php if ($imglabel): ?>, counterText: "<?php echo $imglabel ?>"<?php endif ?>}, null, function(el) {
    return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
  });
};
window.addEvent("domready", Slimbox.scanPage);
//--><!]]>
</script>

Wenn also die aktuelle Sprache deutsch ist, dann wird das Label für die Bildunterschrift (Bild x von y) in die Slimbox-Initialisierung hineingenommen (zudem habe ich spaßeshalber noch das Looping mit aufgenommen: "loop: true") und mein o.g. Stylesheet integriert, dass die deutschen Label-Bilder definiert.
Für andere Sprachen werden weiterhin die Default-Werte herangezogen.

Möchte ich zudem, dass die prev- und next-Labels dauerhaft stehen bleiben, dann ändere ich mein o.g. CSS, indem ich die beiden :hover-Blöcke kopiere und jeweils das :hover entferne. So ist gesichert, dass die Labels immer erscheinen und auch beim Mouse-Over nicht durch die defaults überschrieben werden.