Templates bauen Teil 2 (Overrides)
Gestern haben wir ein Basis Template erstellt. Um Overrides soll es im heutigen Adventstürchen gehen.
Overrides und Alternative Layouts sind eigene Layouts, die man im Template anlegt um die Ausgabe von Joomla zu überschreiben. Man sollte NIE NIE NIE Systemdateien abändern. Beim nächsten Update werden die Änderungen sonst überschrieben und auch so tut man sich mit so einem Vorgehen keinen Gefallen.
(Mehr Hintergrundwissen zu Overrides kannst du dir hier durchlesen: https://docs.joomla.org/Understanding_Output_Overrides)
Du brauchst nicht immer irgendwelche Erweiterungen installieren, um mehr Pfiff auf deine Seite zu bekommen!
Joomla bietet bereits alles was man braucht:
Beiträge haben einen Titel, einen Einleitungs-Text und einen Weiterführenden-Text. Wir haben ein Einleitungs-Bild und ein Bild für den ganzen Beitrag sowie Links. Ganz zu schweigen von der Möglichkeit komplett individuelle Custom Fields für den Beitrag einzurichten.
Für das heutige Türchen habe ich ein besonderes Layout aus dem Internet ausgegraben und werde Euch zeigen, wie ich an die Umsetzung von so einem Override herangehe.
Ziel zum Ende des Beitrages ist ein Newsflash Modul, welches Beiträge aus einer Kategorie in einem eigenen Layout anzeigt.
1) Idee / Inspiration
Entweder hast du bereits eine abgefahrene Idee, wie du Beiträge in einem Newsflash Modul darstellen möchtest, oder du lässt dich von zahlreichen Beispielen im Internet inspirieren.
Quellen dafür könnten zum Beispiel sein:
https://css-tricks.com/
https://www.bootply.com/
https://codepen.io/
http://cssdeck.com/
Oder schmeiß einfach mal Google an und lass dich inspirieren!
Für diesen Beitrag habe ich folgendes Layout von Kseso ausgesucht:
https://codepen.io/Kseso/pen/zwKzQNhttps://codepen.io/Kseso/pen/zwKzQN
In der Demo siehst du, dass es sich um Bilder handelt die in einem Honigwaben Muster angeordnet sind. Wenn man mit der Maus über die Wabe fährt, sieht man einen Text.
Wir haben also die Elemente "Bild" und "Text". Kann uns das ein Joomla Beitrag bieten?
Aber natürlich!
Kann auch das Joomla Modul "Beiträge - Newsflash" diese Elemente ausgeben?
Klar!
Also wählen wir dieses Layout und erstellen für das Modul einen Override.
2) Inhalte anlegen
Eines ist offensichtlich. Für dieses Layout brauchen wir sieben Beiträge mit Bildern und einen kurzen Text. Lass uns also eine Kategorie anlegen und darin diese sieben Beiträge mit einem quadratischen Einleitungsbild. Ich habe hier ein paar Bilder vorbereitet, die unter der Creative Commons Lizenz veröffentlicht sind und somit benutzt werden können: Download
3) Modul anlegen
Nun legen wir ein Newsflash Modul an und nehmen dort die Einstellungen vor, die wir brauchen:
- Wähle die Kategorie aus, die du angelegt hast
- Wähle aus, dass ein Einleitungstext gezeigt werden soll
- Wähle aus, dass 7 Beiträge angezeigt werden sollen
- Wähle aus, dass die Überschrift im h4 tag eingebunden werden soll
- Veröffentliche das Modul auf der Position "oben" und weise es nur der Startseite zu
Sehen wir uns das jetzt auf der Seite an, dann sieht die Ausgabe irgendwie so aus:
Das ist jetzt aber meilenweit von einem innerlichen Weihnachtsfest entfernt.
4) Override anlegen.
Um einen Override anzulegen, können wir im Template Manager auf das Template klicken. Dann im zweiten Reiter auf "Overrides erstellen" und dann das Modul oder die Komponente wählen, für die wir das Override erstellen wollen. Joomla macht hier nichts anderes als die Systemdateien in dein Template in einen html Ordner zu kopieren, so dass du diese an dieser Stelle weiterverarbeiten kannst. Das geht ganz schnell, aber ich persönlich lege mir die Dateien lieber selbst an.
Nun haben wir folgende Dateien in unserem hohoho/html/mod_newsflash/ Ordner:
_item.php
default.php
horizontal.php
vertical.php
Die horizontale und die vertikale Version brauchen wir nicht. Wenn du dir die default.php Datei ansiehst, merkst du das sie nichts anderes macht als die _item.php Datei einzubinden.
Können wir auch gerne so lassen!
5) Code anpassen
Wenn wir nun im Codepen von Kseso https://codepen.io/Kseso/pen/zwKzQN spicken, sehen wir wie der Code strukturiert sein muss:
<section>
<article>
<figure>
<h2>Überschrift</h2>
<p>Absatz</p>
</figure>
<img alt src="/Bildadresse"/>
</article>
+ 6 weitere Wiederholungen der <article>Tags
</section>
In der Datei default.php tauschen wir nun daher den umliegenden <div> container durch einen <section> Tag aus. Und statt der Klasse newsflash nehmen wir einfach mal die Klasse hexanews
In der Zeile 13 beginnt eine foreach Schleife die das _item.php Layout ausgibt. Das bedeutet für jeden Beitrag, der angezeigt werden soll, wird das Layout _item.php wiederholt.
Öffne nun die _item.php Datei und füge dort die HTML Struktur ein, die wir benötigen:
<article> <figure> <h2>Überschrift</h2> <p>Absatz</p> </figure> <img alt src="/Bildadresse"/> </article>
Tausche die Elemente Überschrift und Absatz durch die bereits vorhandenen Elemente aus, die dir mod_newsflash zur Verfügung stellt:
<?php
/**
* @package Joomla.Site
* @subpackage mod_articles_news
*
* @copyright Copyright (C) 2005 - 2017 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
$item_heading = $params->get('item_heading', 'h4');
?>
<article>
<figure>
<?php if ($params->get('item_title')) : ?>
<<?php echo $item_heading; ?> class="newsflash-title<?php echo $params->get('moduleclass_sfx'); ?>">
<?php if ($item->link !== '' && $params->get('link_titles')) : ?>
<a href="/<?php echo $item->link; ?>">
<?php echo $item->title; ?>
</a>
<?php else : ?>
<?php echo $item->title; ?>
<?php endif; ?>
</<?php echo $item_heading; ?>>
<?php endif; ?>
<?php if (!$params->get('intro_only')) : ?>
<?php echo $item->afterDisplayTitle; ?>
<?php endif; ?>
<?php echo $item->beforeDisplayContent; ?>
<?php if ($params->get('show_introtext', '1')) : ?>
<?php echo $item->introtext; ?>
<?php if (isset($item->link) && $item->readmore != 0 && $params->get('readmore')) : ?>
<?php echo '<a class="readmore" href="' . $item->link . '">' . $item->linkText . '</a>'; ?>
<?php endif; ?>
<?php endif; ?>
<?php echo $item->afterDisplayContent; ?>
</figure>
<img src="/Bildpfad">
</article>
Jetzt müssen wir nur noch den <img> tag mit dem richtigen Einleitungsbild tauschen. Wenn du nicht weißt, welche Daten dir zur Verfügung stehen, dann gibt es da einen einfachen Trick.
Füge in dein Override folgenden PHP Code ein:
<?php print_r($item); ?>
Wenn du es nun auf der Seite aufrufst, siehst unter anderem folgende Ausgabe:
[images] => {"image_intro":"images\/headers\/08.png","float_intro":"","image_intro_alt":"","image_intro_caption":"","image_fulltext":"","float_fulltext":"","image_fulltext_alt":"","image_fulltext_caption":""}
Das Bild ist demnach in einem JSON Format hinterlegt und um das Einleitungsbild zu holen, decodieren wir zunächst das JSON und weisen die Ergebnisse für den Bildpfad und den alt-Text zwei kurzen Variablen zu.
Außerdem legen wir einen Link um die ganze Wabe, so dass man per Klick auf den Beitrag kommt.
<?php
/**
* @package Joomla.Site
* @subpackage mod_articles_news
*
* @copyright Copyright (C) 2005 - 2017 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
$item_heading = $params->get('item_heading', 'h4');
$images = json_decode($item->images);
$introimg = $images->image_intro;
$introimgalt = $images->image_intro_alt;
?>
<a href="/<?php echo $item->link; ?>">
<article>
<figure>
<?php if ($params->get('item_title')) : ?>
<<?php echo $item_heading; ?> class="newsflash-title<?php echo $params->get('moduleclass_sfx'); ?>">
<?php if ($item->link !== '' && $params->get('link_titles')) : ?>
<a href="/<?php echo $item->link; ?>">
<?php echo $item->title; ?>
</a>
<?php else : ?>
<?php echo $item->title; ?>
<?php endif; ?>
</<?php echo $item_heading; ?>>
<?php endif; ?>
<?php if (!$params->get('intro_only')) : ?>
<?php echo $item->afterDisplayTitle; ?>
<?php endif; ?>
<?php echo $item->beforeDisplayContent; ?>
<?php if ($params->get('show_introtext', '1')) : ?>
<?php echo $item->introtext; ?>
<?php if (isset($item->link) && $item->readmore != 0 && $params->get('readmore')) : ?>
<?php echo '<a class="readmore" href="' . $item->link . '">' . $item->linkText . '</a>'; ?>
<?php endif; ?>
<?php endif; ?>
<?php echo $item->afterDisplayContent; ?>
</figure>
<img src="/<?php echo $introimg; ?>" alt="<?php echo $introimgalt; ?>">
</article>
</a>
Nun müssen wir noch das entsprechende CSS einfügen. Dazu habe ich den CSS Code aus dem Codepen genommen, leicht entschlankt und angepasst, sowie unsere Klasse hexanews hinzugefügt.
Gut, noch ganz so schlank sieht es nicht aus, ich weiß - dafür würde ich empfehlen den Template Stil ohnehin in einer scss Datei zu verfassen und dann zu einem CSS zu kompilieren.
Füge den nachfolgenden CSS Code in deine template.css unter den bereits bestehenden Code ein:
/* mod_newsflash override */
:root {
--gap: 2vmin;
--radio: calc(100vmin / 3);
--width: calc(var(--radio) * .866);
--height: var(--radio);
--primarylight: #00b4ff;
--primarydark: #0377be;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
align-content: center;
}
section.hexanews {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 2vmin;
max-width: 100vmin;
padding-left: 2vmin;
margin: .5rem auto;
}
.hexanews article {
background: #fff;
color: #00b4ff;
width: var(--width);
height: var(--height);
overflow: hidden;
transition: 1s;
clip-path: url(#hexa-v);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
filter: drop-shadow(0 0 1px #fff);
}
.hexanews a:nth-of-type(1) {
grid-column: 2 / span 2;
grid-row: 1;
}
.hexanews a:nth-of-type(2) {
grid-column: 4 / span 2;
grid-row: 1;
}
.hexanews a:nth-of-type(3) {
grid-column: 1 / span 2;
grid-row: 2;
}
.hexanews a:nth-of-type(4) {
grid-column: 3 / span 2;
grid-row: 2;
}
.hexanews a:nth-of-type(5) {
grid-column: 5 / span 2;
grid-row: 2;
}
.hexanews a:nth-of-type(6) {
grid-column: 2 / span 2;
grid-row: 3;
}
.hexanews a:nth-of-type(7) {
grid-column: 4 / span 2;
grid-row: 3;
}
.hexanews a:nth-of-type(-n+2) {
margin-bottom: calc(var(--height) * -.2);
}
.hexanews a:nth-of-type(n+6):nth-of-type(-n+7) {
margin-top: calc(var(--height) * -.2);
}
.hexanews figure {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
height: 100%;
font-size: calc(1rem + 1vmin);
line-height: 1.2;
transition: .75s .05s;
hyphens: auto;
text-align: center;
}
.hexanews img {
background: #fff;
min-width: var(--radio);
min-height: var(--radio);
max-width: var(--width);
max-height: var(--height);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform-origin: 50% 0%;
transition: 1s;
clip-path: url(#hexagono);
clip-path: inherit;
z-index: 10;
}
.hexanews a:hover img {
transform: translate(-50%, -50%) rotateY(.25turn);
}
.hexanews h4 {
font-size: 100%;
font-weight: 200;
padding: 0 2vw;
}
.hexanews figure p {
font-size: 70%;
line-height: 1.2;
font-weight: 100;
width: 100%;
padding: 0 1vw;
}
.hexanews figure a {
display: block;
color: var(--primarydark);
text-decoration: none;
}
.hexanews figure a:hover {
color: var(--primarylight);
}
@media only screen and (max-width: 25em) {
.hexanews figure p {
display: none;
}
.hexanews figure h4 {
font-size: 1rem;
}
}
6) Ergebnis
Du siehst, mit einem einfachen Override kann man tolle Layouts erstellen. Möchtest du nicht alle mod_newsflash überschreiben, sondern nur bestimmte? Dann nenne die Datei nicht default.php sondern zum Beispiel honigwaben.php - Damit erstellst du ein Alternatives Layout, welches du in den Moduleinstellungen auswählen kannst.
Habe ich dir etwas zu oberflächlich erklärt? Siehe hier die Joomla Docs zum Thema Overrides.
https://docs.joomla.org/How_to_override_the_output_from_the_Joomla!_core/de
Morgen bin ich nochmal bei dir mit dem nächsten Türchen! HoHoHo!