Bei dem Template Override "Newsbox mit Bildoverlay" handelt es sich um ein Override von "mod_article_latest" und ist der erste Prototyp, ein framework-dynamisches Override zur Verfügung zu stellen.
Bislang waren die Overrides immer für ein bestimmtes Framework (Bootstrap, UIKit etc.) ausgelegt. In dieser "Newsbox mit Bildoverlay" kann der Benutzer sein gewünschtes Framework mit dem Setzen einer Variable selbst bestimmen.
Folgende Zeilen die der Benutzer als Einstellungsmöglichkeiten nutzen kann / muss, sind mit ToDo betitelt:
Zeile 21: // ToDo: Wähle dein Framework aus
$framework = $bs3;Hier kann der Benutzer sein Framework austauschen, in unserem Beispiel wird das Framework "Bootstrap 3" genutzt. Dem Benutzer stehen folgende Frameworks zur Auswahl:
- $bs3 (Bootstrap 3)
- $bs4 (Bootstrap 4)
- $uikit3 (UIKit 3)
Ein Austausch der Variable $bs3 genügt, um das verwendete Framework auszutauschen.
Zeile 24: // ToDo: Wähle deine Spaltenbreiten aus
$small = 12;
$medium = 6;
$large = 4;Wer mit den Frameworks arbeitet, sollte sich die grundlegenden Einstellungen des Grid-Systems anschauen. Die Variable $small beschreibt die Anzahl der Spalten auf kleinen Bildschirmgrößen, $medium die Anzahl Spalten für mittlere Bildschirmgrößen und $large für große Bildschirmgrößen.
Zeile 29: // ToDo: Wähle deine Überschriftengröße aus
$headlineTag = 'h3';Der Titel des Beitrages wird als Headline ausgegeben. Hier habt ihr die Möglichkeit die entsprechende Headlinegröße in den gängigen Headtags anzugeben (h1, h2, h3, h4, h5 oder h6).
Zeile 32: // ToDo: Wähle die Länge des Introtextes
$introtext = 150;Um die Boxen identisch zu halten, wird der Einleitungstext auf eine bestimmte Anzahl Zeichen begrenzt. Dies kann der Benutzer hier einstellen.
Zusätzlich wird der Sprachstring "TPL_HAUGIT_UNPUBLISHED" verwendet. Solltet ihr Newsbeiträge im Voraus planen, werden diese mit einem gelben Label und dem Inhalt des Sprachstrings neben den Schlagworten angezeigt (nur als eingeloggter Benutzer im Frontend).
Benötigte Override-Dateien
-
<?php /** * @package Joomla.Site * @subpackage mod_articles_latest * * @copyright Copyright (C) 2005 - 2019 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('TagsHelperRoute', JPATH_BASE . '/components/com_tags/helpers/route.php'); $tags = new JHelperTags; // Frameworks (nicht ändern / don't change) $uikit3 = 'uikit3'; $bs4 = 'bs4'; $bs3 = 'bs3'; // ToDo: Wähle dein Framework aus $framework = $bs3; // ToDo: Wähle deine Spaltenbreiten aus $small = 12; $medium = 6; $large = 4; // ToDo: Wähle deine Überschriftengröße aus $headlineTag = 'h3'; // ToDo: Wähle die Länge des Introtextes $introtext = 150; if ($framework == $uikit3) { $row = 'uk-grid'; $grid = 'uk-width-1-' . $small; $grid .= ' uk-width-1-' . $medium . '@m'; $grid .= ' uk-width-1-' . $large . '@l'; $card = 'uk-card'; $cardImage = 'blogImage'; $cardImageClass = 'uk-card-media-top'; $cardBody = 'uk-card-body'; $overlay = 'uk-overlay'; $label = 'uk-label'; $labelWarning = 'uk-label-warning'; } elseif ($framework == $bs4) { $row = 'row'; $grid = 'col-sm-' . $small; $grid .= ' col-md-' . $medium; $grid .= ' col-lg-' . $large; $card = 'card'; $cardBody = 'card-body'; $cardImage = 'blogImage'; $cardImageClass = 'card-img-top'; $overlay = 'overlay'; $label = 'badge badge-primary'; $labelWarning = 'badge-warning'; } elseif ($framework == $bs3) { $row = 'row'; $grid = 'col-sm-' . $small; $grid .= ' col-md-' . $medium; $grid .= ' col-lg-' . $large; $card = 'card'; $cardBody = 'card-body'; $cardImage = 'blogImage'; $cardImageClass = 'card-img-top'; $overlay = 'overlay'; $label = 'label label-primary'; $labelWarning = 'label-warning'; } ?> <div class="<?php echo $row;?>" <?php if($framework == $uikit3) { echo ' uk-grid'; }?>> <?php foreach ($list as $item) : ?> <?php $images = json_decode($item->images); $tags->getItemTags('com_content.article', $item->id); ?> <div class="<?php echo $grid;?>" itemscope itemtype="https://schema.org/Article"> <div class="<?php echo $card;?>"> <a href="<?php echo $item->link; ?>" itemprop="url" title="<?php echo $item->title; ?>"> <div class="<?php echo $cardImage;?>"> <?php if (!empty($images->image_intro)) : ?> <img<?php if ($framework == $bs3 OR $framework == $bs4) {echo ' class="' . $cardImageClass . '" ';} ?> src="/<?php echo htmlspecialchars($images->image_intro, ENT_COMPAT, 'UTF-8'); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt, ENT_COMPAT, 'UTF-8'); ?>" itemprop="thumbnailUrl"/> <?php endif; ?> <div class="<?php echo $overlay;?>"> <<?php echo $headlineTag;?> itemprop="name"> <?php echo $item->title; ?> </<?php echo $headlineTag;?>> </div> </div> </a> <div class="<?php echo $cardBody;?>"> <div> <span class="author"> <?php echo str_replace('%s', '', JText::_('COM_CONTENT_WRITTEN_BY'));?> <span itemprop="author"><?php echo $item->author;?></span> </span> <span class="datePublished"> <?php echo str_replace('%s', '', JText::_('COM_CONTENT_PUBLISHED_DATE_ON'));?> <span itemprop="datePublished"> <?php echo JHtml::_('date', $item->publish_up, JText::_('DATE_FORMAT_LC4')); ?> </span> </span> </div> <div> <?php foreach ($tags->itemTags as $tag) : ?> <a href="<?php echo JRoute::_(TagsHelperRoute::getTagRoute($tag->tag_id . ':' . $tag->alias)); ?>" title="<?php echo $tag->title;?>" class="<?php echo $label;?>"> <?php echo $tag->title;?> </a> <?php endforeach; ?> <?php if ($item->state == 0 || strtotime($item->publish_up) > strtotime(JFactory::getDate()) || ((strtotime($item->publish_down) < strtotime(JFactory::getDate())) && $item->publish_down != JFactory::getDbo()->getNullDate())) : ?> <span class="<?php echo $label . ' ' . $labelWarning;?>"><?php echo JText::_('TPL_HAUGIT_UNPUBLISHED');?></span> <?php endif;?> </div> <p> <?php echo substr($item->introtext, 0, $introtext) . '...'; ?> </p> </div> </div> </div> <?php endforeach; ?> </div> -
.blogImage { position: relative; width: 100%; overflow: hidden; } .blogImage img { width: 100%; height: 300px; } .blogImage .overlay { position: absolute; top: 0; bottom: 0; left: auto; right: 0; height: 100%; width: 100%; text-align: right; padding-right: 1rem; padding-top: 1rem; padding-left: 35%; background: transparent; transition: all 0.5s; } .blogImage .overlay h1, .blogImage .overlay h2, .blogImage .overlay h3, .blogImage .overlay h4, .blogImage .overlay h5, .blogImage .overlay h6 { font-size: 1.75rem; font-weight: 800; font-style: italic; text-shadow: 0 -1px #fff, 1px 0 #fff, 0 1px #fff, -1px 0 #fff; } .blogImage:hover .overlay, .blogImage:focus .overlay { background: rgba(82, 48, 124, .85); transition: all 0.5s; } .blogImage:hover .overlay h1, .blogImage:focus .overlay h1, .blogImage:hover .overlay h2, .blogImage:focus .overlay h2, .blogImage:hover .overlay h3, .blogImage:focus .overlay h3, .blogImage:hover .overlay h4, .blogImage:focus .overlay h4, .blogImage:hover .overlay h5, .blogImage:focus .overlay h5, .blogImage:hover .overlay h6, .blogImage:focus .overlay h6 { color: #fff; text-shadow: none; }
