Mediabox updatesicher anpassen und dt. Sprache einstellen

von Oliver Richter (Kommentare: 0)

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.

 

Zurück

Einen Kommentar schreiben

Bachten Sie: Für die Zuordnung Ihrer Nachricht werden die hier anzugebenden Daten Name, E-Mailadresse, Ihr Kommentar gespeichert. Sofern Sie den Wunsch der E-Mail-Benachrichtigung angegeben haben, wird aufgrund technischer Notwendigkeit auch dieser Wert gespeichert. Durch Absenden des Formulars erklären Sie sich damit einverstanden. Alternativ kontaktieren Sie mich bitte über meine E-Mailadresse oder Telefon.
Detaillierte und weitere Hinweise, insb. zum Widerrufsrecht finden Sie in der Datenschutzerklärung.

Sie befinden Sich in der Detailansicht eines Blog-Eintrags.

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

Wie kann ich Ihnen helfen?

Sie erreichen mich über mein Kontaktformular.