Mediabox updatesicher anpassen und dt. Sprache einstellen

von Oliver Richter

Ich möchte hier kurz einen Weg beschreiben, um die in Contao verwendete Mediabox updatesicher anzupassen und die deutsche Sprache für die Labels einzustellen.

 

Als erstes kopieren Sie die Standard Mediabox-Template-Datei moo_mediabox.xhtml oder moo_mediabox.html5 (welche Datei sie benötigen ist abhängig vom unter Themes-Layout eingestelltem Ausgabeformat - wenn Sie dort "XHTML" verwenden, nutzen Sie bitte hier die xhtml-Datei) aus dem Contao-Kern-Template-Verzeichnis (unter Contao 2 sind das die Templates im Ordner /system/modules/frontend/templates, unter Contao 3 sind es die Dateien unter /system/modules/core/templates/) in Ihren Template-Ordner unter /templates/(sofern Sie hier einen Themen-Unterordner verwenden, kopieren Sie die Datei entsprechend dorthin /templates/NameDesThemes/).

Als nächstes wird die zugehörige CSS-Datei für die Mediabox in ihren Projektordner unter /tl_files/ (bei Contao 2) oder /files/ (bei Contao 3) beziehungsweise innerhalb des Themen-Unterordners (zum Beispiel /files/NameDesThemes/) kopiert. Die CSS-Datei finden Sie unter Contao 2 unter /plugins/mediabox/css/, bei Contao 3 unter /assets/mootools/mediabox/1.4.6/css/. Kopieren Sie am besten stets die nicht komprimierte CSS-Datei (ist eine der CSS-Dateien mit "src" oder "uncompressed" im Dateinamen), um die Datei später einfach im Texteditor oder über das Contao-Backend bearbeiten zu können. Kopieren Sie also beispielsweise die Datei /assets/mootools/mediabox/1.4.6/css/mediaboxAdvWhite21-uncompressed.css nach /files/NameDesThemes/ und unbenennen diese nach mediabox.css.

Öffnen Sie nun die Datei /templates/NameDesThemes/moo_mediabox.xhtml (oder ...html5) in einem Texteditor. Die ersten Zeile dort sollten folgendermaßen aussehen:

 

<?php

// Add the mediabox style sheet
$GLOBALS['TL_CSS'][] = 'assets/mootools/mediabox/'. MEDIABOX .'/css/mediaboxAdvBlack21.css||static';

?>

<script type="text/javascript" src="<?php echo TL_ASSETS_URL; ?>assets/mootools/mediabox/<?php echo MEDIABOX; ?>/js/mediabox.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
(function($) {
  window.addEvent('domready', function() {
    var links = $$('a').filter(function(el) {
      return el.rel && el.rel.test(/^lightbox/i);
    });
    $$(links).mediabox({
      /* Put custom options here */
    }, null, function(el) {
    }, null, function(el) {

 

Passen Sie nun den Name und den Pfad zur CSS-Datei an.  Der Pfad sollte direkt zur der oben kopierten CSS-Datei führen, also beispielsiwese /files/NameDesThemes/mediaxbox.css lauten und der Dateiname mit der kopierten Datei identisch sein.  Die Datei könnte nach der Anpassung also beispielsweise so aussehen:

 

<?php

// Add the mediabox style sheet
$GLOBALS['TL_CSS'][] = 'files/NameDesThemes/css/mediabox.css||static'; 

?>

 

Sie können in dieser Template-Datei nun weitere Optionen der Mediabox einstellen. Dazu suchen Sie dort die Zeile mit dem Text  /* Put custom options here */. Dort werden nun weitere Angaben gemacht. Welche Angaben generell möglich sind, verrät ein Blick die original-Javascript-Datei zur Mediabox (dies soll aber hier keine Rolle spielen). Wichtig ist hier nur, den Text "Image X from Y" und die Button-Texte in einen deutschen Text umzuwandeln. Dazu geben Sie direkt hinter /* Put custom options here */ den folgenden Text ein:

counterText: '(Bild {x} von {y})',
buttonText: ['<strong>Zurück<strong>','<strong>Weiter</strong>','<Strong>x</Strong>']

Der Code-Bereich sollte dann folgendermaßen aussehen:

 

$$(links).mediabox({
      /* Put custom options here */
      counterText: '(Bild {x} von {y})',
      buttonText: ['<strong>Zurück<strong>','<strong>Weiter</strong>','<Strong>x</Strong>']
    }, null, function(el) {

 

Sie können nun auch die Mediabox mit Hilfe der kopierten CSS-Datei so gestalten, wie Sie es wünschen. Achten Sie aber darauf, dass eventuelle Bilderpfade in der CSS-Datei, die auf den bishergen Media-Box-Ordner verwiesen  angepasst werden oder jedenfalls sicher gestellt ist, dass die entsprechenden Grafiken unter dem angegebenen Pfad auch zu finden sind. Verwenden Sie beispielsweise Contao 3 und haben Ihre CSS-Datei nach /files/NameDesThemes/ kopiert und möchten die bisherigen Media-Box-Grafiken verwenden passen Sie den Pfad von

url("../images/80.png") nach

url("../../../plugins/mediabox/1.4.6/images/80.png") an.

 

Kommentare

Einen Kommentar schreiben

Bitte addieren Sie 4 und 2.

Sie befinden Sich in der Detailansicht eines Blog-Eintrags.

Um alle Blog-Einträge zu sehen, wechseln Sie bitte zur Nachrichten-Übersicht.