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.
Sie befinden Sich in der Detailansicht eines Blog-Eintrags.
Um alle Blog-Einträge zu sehen, wechseln Sie bitte zur Nachrichten-Übersicht.
Einen Kommentar schreiben