Tutorial: Erstelle ein eigenes Custom Field Plugin - tmpl/owl.php
Elisa Foltyn
tmpl/owl.php
Nun machen wir uns an die Ausgabe des Templates.
<?php
/**
* @package Joomla.Plugin
* @subpackage Fields.Owlimg
*
* @copyright Copyright (C) 2005 - 2016 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
JLoader::register('JFolder', JPATH_LIBRARIES . '/joomla/filesystem/folder.php');
$folder = $field->value;
if (!$folder)
{
return;
}
Mit der Klasse JLoader::register
und der Methode JFolder importieren wir die Bibliothek folder.jpg.
Wir weisen der Variable $folder
den Feldwert zu. Falls unser Feldwert leer ist, geben wir nichts aus.
Nun weisen wir die abgerufenen Parameter einigen Variablen zu:
$items = $fieldParams->get('items', '3');
(Für eine vollständige Liste sehe dir die Template-Datei im Downloadpaket an)
Der erste Wert in der Klammer ist der Parametername, der zweite Wert ist der Defaultwert, falls der Parameter leer ist.
$images = JFolder::files('images/' . $folder);
if (!empty($images))
{
$folderpath = 'images/' . $folder . '/';
Wie kommen wir nun auf unseren Bildpfad? Mit der Klasse JFolder::files
lesen wir die Dateien in einem Joomla-Verzeichnis aus. In der Variable $images
sind also Pfade zu allen in diesem Ordner liegenden Bildern hinterlegt. Mit der nachfolgenden if Abfrage stellen wir sicher, dass der Code nur ausgeführt wird, wenn der definierte Bild-Ordner nicht leer ist.
JHtml::_('jquery.framework');
JHtml::_('script', 'media/plg_fields_owlimg/js/owl.carousel.min.js');
JHtml::_('stylesheet', 'media/plg_fields_owlimg/css/owl.carousel.min.css');
JHtml::_('stylesheet', 'media/plg_fields_owlimg/css/owl.theme.default.min.css');
if ($animatein || $animateout)
{
JHtml::_('stylesheet', 'media/plg_fields_owlimg/css/animate.min.css');
}
?>
Mit JHtml::_('jQuery.Framework');
rufen wir zunächst das jQuery Framework auf und stellen damit sicher dass es VOR unseren Skripten geladen wird. Das ist wichtig damit die Skripte richtig funktionieren.
Als nächstes laden wir das Owl Javascript und die Stylesheet-Dateien. Mit der JHtml::_
Klasse ermöglichen wir dem Template-Entwickler, dass diese Dateien durch ein Template Override überschrieben werden können. Hierbei bedienen wir uns den Methoden script
oder stylesheet
.
Der Vorteil: Der Template Entwickler kann zum Beispiel die Datei deintemplate/html/css/plg_fields_owlimg/owl.carousel.css
anlegen und Joomla! erkennt automatisch, dass die Datei media/plg_fields_owlimg/css/owl.carousel.css
überschrieben werden soll.
<div class="owl-carousel <?php echo ($customclass) ? $customclass : ''; ?> owl-theme">
<?php foreach ($images as $image) : ?>
<div class="item">
<img src="/%3C?php_echo_%24folderpath___%24image%3B_%3F%3E=">
</div>
<?php endforeach; ?>
</div>
Nun erstellen wir den Container für das Owl Carousel und importieren aus den Parametern den eindeutigen Klassennamen. Wenn im Parameter nichts gesetzt ist, dann wird der eingestellte Defaultwert "myowl" genommen.
Hinweis: Falls mehrere "Owls" auf einer Seite angezeigt werden sollen, muss dieser Klassenname eindeutig sein.
<script>
(function ($) {
$('.<?php echo ($customclass) ? $customclass : ''; ?>').owlCarousel({
<?php echo ($items) ? 'items:' . $items . ',' : ''; ?>
<?php echo ($margin) ? 'margin:' . $margin . ',' : ''; ?>
<?php echo ($stagepadding) ? 'stagePadding:' . $stagepadding . ',' : ''; ?>
<?php echo ($center) ? 'center:' . $center . ',' : ''; ?>
<?php echo ($autowidth) ? 'autoWidth:' . $autowidth . ',' : ''; ?>
<?php echo ($loop) ? 'loop:' . $loop . ',' : ''; ?>
<?php echo ($rewind) ? 'rewind:' . $rewind . ',' : ''; ?>
<?php echo ($lazyload) ? 'lazyLoad:' . $lazyload . ',' : ''; ?>
<?php echo ($mousedrag) ? 'mouseDrag:' . $mousedrag . ',' : ''; ?>
<?php echo ($touchdrag) ? 'touchDrag:' . $touchdrag . ',' : ''; ?>
<?php echo ($pulldrag) ? 'pullDrag:' . $pulldrag . ',' : ''; ?>
<?php echo ($freedrag) ? 'freeDrag:' . $freedrag . ',' : ''; ?>
<?php echo ($nav) ? 'nav:' . $nav . ',' : ''; ?>
<?php echo ($nav && $navtext) ? 'navText:[' . $navtext . '],' : ''; ?>
<?php echo ($dots) ? 'dots:' . $dots . ',' : ''; ?>
<?php echo ($autoplay) ? 'autoplay:' . $autoplay . ',' : ''; ?>
<?php echo ($autoplay && $hoverpause) ? 'autoplayHoverPause:' . $hoverpause . ',' : ''; ?>
<?php echo ($autoplay && $autoplayspeed) ? 'autoplaySpeed:' . $autoplayspeed . ',' : ''; ?>
<?php echo ($animatein) ? "animateIn:'" . $animatein . "'," : ""; ?>
<?php echo ($animateout) ? "animateOut:'" . $animateout . "'," : ""; ?>
<?php echo ($responsive) ? $responsiveoptions : ''; ?>
});
})(jQuery);
</script>
<?php
}
Zum Abschluss folgt das Owl-Script mit Optionen, die sich die jeweiligen Werte aus den Parametern ziehen.