Tutorial: Erstelle ein eigenes Custom Field Plugin - tmpl/owl.php

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.