Zum Inhalt springen
Astrid

Joomla 4 Cassiopeia - Individuelles Layout, Trennung von Inhalt und Design - wie macht man es richtig?

Individuelles Layout, Trennung von Inhalt und Design - wie macht man es richtig?

Die Überschrift dieses Beitrags war eine Frage im deutschen Joomla Forum1.

Abgesehen davon, dass es meiner Meinung nach kein Richtig und kein Falsch gibt, hängt die Antwort von dem Ziel ab, das man mit seiner Website verfolgen und welche Voraussetzungen man mitbringt.

Generell gilt: Websites, die ihre Besucher begeistern, hinterlassen einen bleibenden Eindruck. Das ist das Ziel einer jeden Website. Dabei kommt es in meinen Augen nicht nur auf das Design an, sondern auch auf die geschickte Umsetzung, wenn man ein leistungsfähiges Content Management System (CMS) wie Joomla verwendet. Den ein schickes Design, in dem die Inhalte nicht gepflegt werden, begeistert niemanden lange.

In diesem Artikel werfen wir einen genaueren Blick darauf, wie Joomla selbst uns hilft, die beste Praxis der Trennung von Inhalt und Design umzusetzen und dabei den Content nicht aus dem Auge zu verlieren. Denn letzterer ist das A und O einer jeden Website.

Warum ist die Trennung von Inhalt und Design wichtig? Durch die Trennung von Inhalt und Design können wir Änderungen am Design vornehmen, ohne den eigentlichen Inhalt zu beeinflussen. Auf diese Weise wird die Aktualisierung des visuellen Erscheinungsbildes der Website einfacher, ohne dass umfangreiche inhaltliche Anpassungen erforderlich sind. Darüber hinaus ermöglicht uns dieser Ansatz, dass verschiedene Teams gleichzeitig an der Website arbeiten können - Webdesigner können sich auf das Erscheinungsbild konzentrieren, während Redakteure und Autoren Inhalte erstellen und aktualisieren, ohne die Website offline zu nehmen oder sich komplexen technischen Herausforderungen stellen zu müssen.

Joomla bietet eine Vielzahl von Funktionen, um Inhalt und Design auf benutzerfreundliche und individuelle Weise zu trennen. Dieser Artikel beschreibt,

  • wie Joomla uns unterstützt,
  • welche Best Practices zu beachten sind und
  • wie wir das Beste aus dem CMS herausholen können, indem wir es klug einsetzen.

Dieser Beitrag beinhaltet nur einen kleiner Ausschnitt von dem, was Joomla an Flexibilität liefert. Ein Weg von den vielen, die nach Rom führen.

Webdesign versus Grafikdesign

Bei der Planung einer neuen Website passiert es mir immer wieder, dass ich Layouts als Skizze sehe, ohne dass der Content dazu beschrieben wird. Meiner Meinung nach ist dies bei der Planung mit einem Content Management System nur die halbe Information. In einer Skizze für ein CMS ist es wichtig zu wissen, welcher Inhalt an einer Layout-Position angezeigt werden soll. Wie der Name sagt, ist dies der große Vorteil eines Content Management Systems. Es managed den Inhalt oder anders ausgedrückt: Es passt den Inhalt dynamisch an ein Layout an.

Um die Funktionen eines CMS clever zu nutzen, ist es aus diesem Grund meiner Meinung nach wichtig, ob an einer Layout-Positon ein Inhalt ausgegeben werden soll,

  • der an mehreren Stellen der Website ausgegeben wird,
  • er in einer Beziehung zu anderen Inhalten steht oder
  • es sich um einen Inhalt handelt, der nur zu dem gerade angezeigten Inhalt passt.

Ein konkretes Beispiel ist das Layout das in der Frage im Forum als Skizze gezeigt wurde.

Layout-Skizzen als Entwurf für die Erstellung einer Joomla Website

Als erstes habe ich mich gefragt, ob auf den verschieden Unterseiten die gleichen allgemeinen Inhalte dargestellt werden sollen. In diesem Fall würde ich ganz anders an den Joomla Entwurf herangehen, als wenn es sich um spezifische und zum Inhalt der Unterseite gehörende Inhalte handelt.

Layout-Skizzen als Entwurf für die Erstellung einer Joomla Website - Inhalt auf mehreren Unterseiten gleich?

Beim Betrachten der Skizze für die Anzeige einer Leistung fragte ich mich, ob alle Inhalte tatsächlich für jede Leistung unterschiedlich sind oder ob es nicht teilweise Informationen sind, die auf jede Leistung zutreffen. Dann verwende ich unterschiedliche Werkzeuge. Falls der Inhalt spezifisch ist nutze ich ein Custom Field. Wenn etwas für jede Leistung gleich ist, ist ein Modul in der Regel meine Wahl.

Layout-Skizzen als Entwurf für die Erstellung einer Joomla Website - Inhalt spezifisch für den angezeigten Inhalt?

Zuletzt fiel mir auf, dass das die Website unterschiedlich endet. Gewollt ist sicherlich, dass eine einheitliche Fußzeile erscheint. Die Skizzen zeigen lediglich den relevanten Inhalt. Ich möchte es nur nicht unerwähnt lassen, dass ich der Meinung bin, dass bestimmte Bereiche einer Website gleich aussehen sollten, damit einem Besucher die Orientierung leicht fällt und er erkennt, dass er die Website nicht verlassen hat. Ein einheitlicher Footer und ein ähnlicher Header gehören für mich zu diesen Bereichen, neben der zusammenpassenden Farbgestaltung und Schriftwahl.

Dass eine Website nicht statisch wie ein Flyer auf Papier ausgegeben wird und deshalb auf unterschiedlichen Displaybreiten idealerwiese anders strukturiert dargestellt wird ist meiner Meinung heutzutage bei jedem angekommen, der offen für Neues ist.

Exkurs: Joomla 4 bietet fünf Arten von Erweiterungen

Verschaffen wir uns kurz einen Überblick über die Hauptbestandteile einer Joomla-Website:

  • Komponenten: Eine Komponente füllt den Hauptinhalt der Site. In der Regel nutzt diese Daten, die in der Datenbank gespeichert werden. Der Hauptinhalt der Unterseite Übersicht der Leistungen ist beispielsweise die Ansicht der Kategorie, in der alle Leistungen gespeichert sind. Die Detailansicht zeigt dann alle Informationen zu der entsprechenden Leistung an.
  • Module: Ein Modul ist ein Add-On zur Site, das die Funktionalität erweitert. Es nimmt einen sekundären Teil der Webseite ein und wird an verschiedenen Positionen angezeigt. Auf welchen aktiven Menüelementen es ausgegeben wird ist wählbar. Module sind leichte und flexible Erweiterungen. Man verwendet sie für kleine Teile der Seite, die weniger komplex sind und über verschiedene Komponenten hinweg angezeigt werden. Ein Beispiel sind Öffnungszeiten oder Ansprechpartner, die man vielleicht auf jeder Unterseite in einer Seitenleiste anzeigen möchte. Sie gehören nicht direkt zum Inhalt, ergänzen diesen aber in der Regel sinnvoll.
  • Plugins: Ein Plugin bearbeitet die Ausgabe, die vom System generiert wurde. Es wird normalerweise nicht als separater Teil der Site aufgerufen. Es nimmt Daten aus anderen Quellen und manipuliert diese vor der Ausgabe. Ein Plugin arbeitet im Hintergrund. Custom Fields sind beispielsweise Plugins, die den Hauptinhalt ergänzen. Ist das Plugin zum Custom Field aktiviert, prüft es beim Aufruf der Unterseite,
    • was es an dieser Stelle genau an Programmcode aufrufen soll und
    • ob etwas Spezielles für diese Unterseite in der Datenbank gespeichert ist. Mit Custom Fields ist es möglich Inhalte vom
    • einfachen Text bis hin zur
    • digitalen Karte mit Markern, Geocoding und Routing Funktionen zu einem Hauptinhalt individuell angepasst hinzuzufügen.
  • Sprachen: Die grundlegendsten Erweiterungen sind Sprachen. Im Wesentlichen bestehen die Sprachpaketdateien aus Schlüssel/Wert-Paaren, die die Übersetzung statischer Textzeichenfolgen im Joomla Quellcode ermöglichen.
  • Templates: Ein Template bestimmt das Design deiner Joomla Website.

Content mit Kategorien und Schlagworten strukturieren

Bootstrap 5 bietet ein statisches und ein fluid Layout. In den Beispielen nutze ich das fluid, welches die volle Bildschirmbreite nutzt. Deshalb habe ich diese Option in den Option des Cassiopeia Templates eingestellt.

Die Übersicht der Leistungen ist ein schönes Beispiel, wie man mit einem Content Management System wie Joomla Inhalte strukturiert. Für die Übersicht der Leistungen habe ich als erstes eine Kategorie mit dem Namen Leistungen angelegt.

Joomla - Eine Kategorie anlegen.

Dann habe ich 6 Artikel erstellt, die die Leistungen beschreiben - naja, ich habe Lorom ipsum und die Batch-Funktion in Joomla zu Hilfe genommen.

Joomla - Inhalte für die Kategorie Leistungen anlegen.

Als nächstes habe ich einen Menüpunkt erstellt, der die Kategorie Leistungen anzeigt

Joomla - Einen Menüpunkt für die Kategorie Leistungen anlegen.

und das Layout festgelegt

Joomla - Das Layout der Kategorie Leistungen mit Joomla Core festlegen.

Im Joomla Magazin gibt es einen Artikel, der die Optionen erklärt.

Mit dem optionalen zusätzlichen CSS, welches den Rahmen anzeigt,

.com-content-category-blog__item {
  border:solid 2px;
}

Joomla - Die Kategorie Leistungen mit CSS stylen.

ist der Entwurf für die Übersicht der Leistungen erstellt.

Joomla - Die Ansicht der Kategorie Leistungen im Frontend.

Das Schöne an einem dynamischen Content Management System wie Joomla ist, dass die Leitungen nicht auf 6 beschränkt sind, wie in einem Flyer auf Papier. Im gleichen Layout werden weitere Inhalte, die unter der Kategorie Leistungen veröffentlicht werden, angefügt.

Custom Field = Die zum Inhalt gehörenden Informationen darzustellen

Bei den Inhalten, die in der Detailansicht zur Leistung angezeigt werden, bin ich davon ausgegangen, dass diese spezifisch zum Inhalt gehören.

Layout-Skizzen als Entwurf für die Erstellung einer Joomla Website - Inhalt spezifisch für den angezeigten Inhalt?

Ich habe Custom Fields mit Gruppen kombiniert und eine Menge davon erstellt. Zunächst habe ich fünf Gruppen erstellt, damit die Eingabe bei der Erstellung eines Beitrags später übersichtlich ist:

  • Erste Reihe - zwei Elemente
  • Zweite Reihe - volle Breite
  • Dritte Reihe - drei Elemente
  • Vierte Reihe - volle Breite
  • Fünfte Reihe - Ein Beispiel für ein Subform

Joomla - Custom Field Gruppen anlegen.

Bei der Eingabe im Beitrag erscheinen die Custom Field später übersichtlich pro Gruppe in einem Tabulator.

Joomla - Custom Field Ansicht der Gruppen bei der Bearbeitung eines Beitrags.

Optional: Weil diese Custom Fields nur für die Kategorie Leistungen wichtig sind, habe ich in den Gruppen zusätzlich die Kategorie eingeschränkt.

Angelegt habe ich die Custom Fields

  • oben1 (Erste Reihe - zwei Elemente)
  • oben2 (Erste Reihe - zwei Elemente)
  • oben (obenvollebreite)
  • obenvollebreite (Zweite Reihe - volle Breite)
  • unten1 (Dritte Reihe - drei Elemente)
  • unten2 (Dritte Reihe - drei Elemente)
  • unten3 (Dritte Reihe - drei Elemente)
  • untenvollebreite (Vierte Reihe - volle Breite)
  • eins
  • zwei
  • drei
  • vier
  • subform (Fünfte Reihe - Ein Beispiel für ein Subform)

Der Einfachheit halber habe ich, abgesehen vom Subform, jeweils den Typ ‘Editor’ gewählt. Joomla bietet bereits viele verschiedene Typen, die je nach Inhalt verwendet werden sollten.

Joomla - Erstellte Custom Fields.

Meiner Meinung nach ist das Subform am Interessantesten für die Arbeit mit einem Content Managment System. Es verdeutlicht die Flexibilität. Das Custom Field vom Typ Subform, welches ich auch subform genannt habe, verwendet vier andere Custom Fields.

Ich habe diese vier anderen Custom Fields auf die Verwendung in einem Subform per Option beschränkt. Das ist aber nicht zwingend.

Joomla - Erstellte Custom Fields.

Im Beispiel habe ich die Anzeige für jedes Custom Field auf Do not automatic display gesetzt, weil ich die Anzeige im Override selbst bestimmen möchten.

Joomla - Custom Field anzeige.

Dann habe ich ein Override für die Anzeige der Leistungen erstellt.

Joomla - Erstellte Custom Fields.

Der am Ende dieses Abschnitts gezeigte Codeschnipsel zeigt den Code im Ganzen. Dabei ist der letzte Teil für unser Beispiel relevant, welches die Ausgabe der Custom Fields zeigt. Der erste Teil ist eine 1:1 Kopie des Standardtemplates, in meinem Fall von /templates/cassiopeia/html/com_content/article/default.php.

Zu Beginn speichere ich die Werte der Custom Fields mithilfe von

$fieldsData = [];

if (!empty($this->item->jcfields)) {
    $fieldsData['com_fields'] = [];

    foreach ($this->item->jcfields as $field) {
        $fieldsData[$field->id] = $field->rawvalue;
    }
}

Anstelle von $field->id kann man auch $field->name verwenden, wenn man lieber mit Namen als Zahlen arbeitet.

Die Ausgabe am Ende ist für jemanden der Bootstrap 5 kennt selbsterklärend. Nur das Subfield ist in meinen Augen etwas Besonderes. Deshalb schauen wir uns dieses vorher einmal genauer an. Der nachfolgende Codeschnipsel zeigt, dass man eine Zeile beliebig oft für eine Leistung wiederholen kann. Eine Schleife fragt alle Elemente im Custom Field ab. Wenn man lediglich 4 Zeilen sehen möchte, muss man dies begrenzen. Wer es dynamisch haben möchte, mag meine Implememtierung übernehmen.

Randbemerkung: Wer alle Inhalte an ein starres Layout anpassen möchte, sollte sich überlegen, ob ein Content Management System das passende Werkzeug ist. Das gleiche gilt in meinen Augen, wenn der Inhalt der Website - der Content - sich nicht oft ändert oder von einem Webentwickler bearbeitet wird. Für diese Anwendungsfälle gibt es meiner Meinung nach bessere Tools. An manchen Stellen hat ein starres Layout aber natürlich auch in einem CMS eine Berechtigung.

<?php foreach (json_decode($fieldsData[13]) as $row): ?>
<div class="container-fluid com-content-article item-page">
    <div class="row">
        <div class="col-1 myfieldscol">
          <?php echo $row->field9; ?>  	
        </div>
        <div class="col-5 myfieldscol">
         	<?php echo $row->field10; ?>  
        </div>
        <div class="col-1 myfieldscol">
         	<?php echo $row->field11; ?>  
        </div>
        <div class="col-5 myfieldscol">
         	<?php echo $row->field12; ?>   
        </div>
    </div>
</div>    
<?php endforeach; ?>

Hier nun der vollständige Code, der auf dem Standardlayout in Joomla aufbaut.

<?php

/**
 * @package     Joomla.Site
 * @subpackage  com_content
 *
 * @copyright   (C) 2006 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

use Joomla\CMS\Factory;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Associations;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Layout\FileLayout;
use Joomla\CMS\Layout\LayoutHelper;
use Joomla\CMS\Router\Route;
use Joomla\CMS\Uri\Uri;
use Joomla\Component\Content\Administrator\Extension\ContentComponent;
use Joomla\Component\Content\Site\Helper\RouteHelper;

// Create shortcuts to some parameters.
$params  = $this->item->params;
$canEdit = $params->get('access-edit');
$user    = Factory::getUser();
$info    = $params->get('info_block_position', 0);
$htag    = $this->params->get('show_page_heading') ? 'h2' : 'h1';

// Check if associations are implemented. If they are, define the parameter.
$assocParam        = (Associations::isEnabled() && $params->get('show_associations'));
$currentDate       = Factory::getDate()->format('Y-m-d H:i:s');
$isNotPublishedYet = $this->item->publish_up > $currentDate;
$isExpired         = !is_null($this->item->publish_down) && $this->item->publish_down < $currentDate;
            
$fieldsData = [];

if (!empty($this->item->jcfields)) {
    $fieldsData['com_fields'] = [];

    foreach ($this->item->jcfields as $field) {
        $fieldsData[$field->id] = $field->rawvalue;
    }
}

?>
<div class="com-content-article item-page<?php echo $this->pageclass_sfx; ?>" itemscope itemtype="https://schema.org/Article">
    <meta itemprop="inLanguage" content="<?php echo ($this->item->language === '*') ? Factory::getApplication()->get('language') : $this->item->language; ?>">
    <?php if ($this->params->get('show_page_heading')) : ?>
    <div class="page-header">
        <h1> <?php echo $this->escape($this->params->get('page_heading')); ?> </h1>
    </div>
    <?php endif;
    if (!empty($this->item->pagination) && !$this->item->paginationposition && $this->item->paginationrelative) {
        echo $this->item->pagination;
    }
    ?>

    <?php $useDefList = $params->get('show_modify_date') || $params->get('show_publish_date') || $params->get('show_create_date')
    || $params->get('show_hits') || $params->get('show_category') || $params->get('show_parent_category') || $params->get('show_author') || $assocParam; ?>

    <?php if ($params->get('show_title')) : ?>
    <div class="page-header">
        <<?php echo $htag; ?> itemprop="headline">
            <?php echo $this->escape($this->item->title); ?>
        </<?php echo $htag; ?>>
        <?php if ($this->item->state == ContentComponent::CONDITION_UNPUBLISHED) : ?>
            <span class="badge bg-warning text-light"><?php echo Text::_('JUNPUBLISHED'); ?></span>
        <?php endif; ?>
        <?php if ($isNotPublishedYet) : ?>
            <span class="badge bg-warning text-light"><?php echo Text::_('JNOTPUBLISHEDYET'); ?></span>
        <?php endif; ?>
        <?php if ($isExpired) : ?>
            <span class="badge bg-warning text-light"><?php echo Text::_('JEXPIRED'); ?></span>
        <?php endif; ?>
    </div>
    <?php endif; ?>
    <?php if ($canEdit) : ?>
        <?php echo LayoutHelper::render('joomla.content.icons', ['params' => $params, 'item' => $this->item]); ?>
    <?php endif; ?>

    <?php // Content is generated by content plugin event "onContentAfterTitle" ?>
    <?php echo $this->item->event->afterDisplayTitle; ?>

    <?php if ($useDefList && ($info == 0 || $info == 2)) : ?>
        <?php echo LayoutHelper::render('joomla.content.info_block', ['item' => $this->item, 'params' => $params, 'position' => 'above']); ?>
    <?php endif; ?>

    <?php if ($info == 0 && $params->get('show_tags', 1) && !empty($this->item->tags->itemTags)) : ?>
        <?php $this->item->tagLayout = new FileLayout('joomla.content.tags'); ?>

        <?php echo $this->item->tagLayout->render($this->item->tags->itemTags); ?>
    <?php endif; ?>

    <?php // Content is generated by content plugin event "onContentBeforeDisplay" ?>
    <?php echo $this->item->event->beforeDisplayContent; ?>

    <?php if ((int) $params->get('urls_position', 0) === 0) : ?>
        <?php echo $this->loadTemplate('links'); ?>
    <?php endif; ?>
    <?php if ($params->get('access-view')) : ?>
        <?php echo LayoutHelper::render('joomla.content.full_image', $this->item); ?>
        <?php
        if (!empty($this->item->pagination) && !$this->item->paginationposition && !$this->item->paginationrelative) :
            echo $this->item->pagination;
        endif;
        ?>
        <?php if (isset($this->item->toc)) :
            echo $this->item->toc;
        endif; ?>
    <div itemprop="articleBody" class="com-content-article__body">
        <?php echo $this->item->text; ?>
    </div>

        <?php if ($info == 1 || $info == 2) : ?>
            <?php if ($useDefList) : ?>
                <?php echo LayoutHelper::render('joomla.content.info_block', ['item' => $this->item, 'params' => $params, 'position' => 'below']); ?>
            <?php endif; ?>
            <?php if ($params->get('show_tags', 1) && !empty($this->item->tags->itemTags)) : ?>
                <?php $this->item->tagLayout = new FileLayout('joomla.content.tags'); ?>
                <?php echo $this->item->tagLayout->render($this->item->tags->itemTags); ?>
            <?php endif; ?>
        <?php endif; ?>

        <?php
        if (!empty($this->item->pagination) && $this->item->paginationposition && !$this->item->paginationrelative) :
            echo $this->item->pagination;
            ?>
        <?php endif; ?>
        <?php if ((int) $params->get('urls_position', 0) === 1) : ?>
            <?php echo $this->loadTemplate('links'); ?>
        <?php endif; ?>
        <?php // Optional teaser intro text for guests ?>
    <?php elseif ($params->get('show_noauth') == true && $user->get('guest')) : ?>
        <?php echo LayoutHelper::render('joomla.content.intro_image', $this->item); ?>
        <?php echo HTMLHelper::_('content.prepare', $this->item->introtext); ?>
        <?php // Optional link to let them register to see the whole article. ?>
        <?php if ($params->get('show_readmore') && $this->item->fulltext != null) : ?>
            <?php $menu = Factory::getApplication()->getMenu(); ?>
            <?php $active = $menu->getActive(); ?>
            <?php $itemId = $active->id; ?>
            <?php $link = new Uri(Route::_('index.php?option=com_users&view=login&Itemid=' . $itemId, false)); ?>
            <?php $link->setVar('return', base64_encode(RouteHelper::getArticleRoute($this->item->slug, $this->item->catid, $this->item->language))); ?>
            <?php echo LayoutHelper::render('joomla.content.readmore', ['item' => $this->item, 'params' => $params, 'link' => $link]); ?>
        <?php endif; ?>
    <?php endif; ?>
    <?php
    if (!empty($this->item->pagination) && $this->item->paginationposition && $this->item->paginationrelative) :
        echo $this->item->pagination;
        ?>
    <?php endif; ?>
    <?php // Content is generated by content plugin event "onContentAfterDisplay" ?>
    <?php echo $this->item->event->afterDisplayContent; ?>
</div>

<div class="container-fluid com-content-article item-page">
    <div class="row">
        <div class="col myfieldscol">
            <?php echo $fieldsData[1]; ?>
        </div>
        <div class="col myfieldscol">
            <?php echo $fieldsData[2]; ?>
        </div>
    </div>
</div>    

<div class="container-fluid com-content-article item-page">
    <div class="row">
        <div class="col myfieldscol">
            <?php echo $fieldsData[4]; ?>
        </div>
    </div>
</div>    

<div class="container-fluid com-content-article item-page">
    <div class="row">
        <div class="col myfieldscol">
            <?php echo $fieldsData[5]; ?>
        </div>
        <div class="col myfieldscol">
            <?php echo $fieldsData[6]; ?>
        </div>
        <div class="col myfieldscol">
            <?php echo $fieldsData[7]; ?>
        </div>
    </div>
</div>    

<div class="container-fluid com-content-article item-page">
    <div class="row">
        <div class="col myfieldscol">
            <?php echo $fieldsData[8]; ?>
        </div>
    </div>
</div> 


<?php foreach (json_decode($fieldsData[13]) as $row): ?>
<div class="container-fluid com-content-article item-page">
    <div class="row">
        <div class="col-1 myfieldscol">
          <?php echo $row->field9; ?>  	
        </div>
        <div class="col-5 myfieldscol">
         	<?php echo $row->field10; ?>  
        </div>
        <div class="col-1 myfieldscol">
         	<?php echo $row->field11; ?>  
        </div>
        <div class="col-5 myfieldscol">
         	<?php echo $row->field12; ?>   
        </div>
    </div>
</div>    
<?php endforeach; ?>

Die Detailansicht einer Leistung sieht nun wie folgt aus,

Joomla - Erstellte Custom Fields.

wenn man als Layout Leistungen gewählt hat.

Joomla - Erstellte Custom Fields.

  • Ein Bereich über die ganze Breite ganz oben
  • Zwei Bereiche in einer Zeile
  • Noch einmal ein Bereich über die ganze Breite ganz oben
  • Drei Bereiche in einer Zeile
  • Noch einmal ein Bereich über die ganze Breite ganz oben
  • Sechzehn Bereiche über 4 Zeilen verteilt, wobei die Breite unterschiedlich ist.

Module = Die zu mehreren Inhalten gehörende Informationen darzustellen

Inhalt in Kategorien organisieren

In einem Content Management System geht es in erster Linie um Content. Diesen organisiert man in der Regel in Kategorien. Manchmal nimmt man Tags oder andere Eigenschaften wie Featured zu Hilfe.

Für die Unterseite Über uns habe ich die Kategorie Über uns sowie vier Unterkategorien erstellt. In jeder Kategorie habe ich vier Beitrage angelegt. Drei der Beiträge sollen besonders hervorgehoben werden und später auf der Startseite erscheinen. Deshalb habe ich diesen dreien die Eigenschaft Featured gegeben. Und drei erhalten das Schlagwort drei.

Joomla - Content erstellen.

Damit habe in den oberen Bereich der Site mit dem Menüpunkt des Typs List All Categories in an Article Category Tree angelegt.

Joomla - Content erstellen.

Mit Hilfe des zusätzlichen CSS aus dem nachfolgenden Codeschnipsel in der Datei user.css, werden die vier Unterkategorien der Hauptkategorie Über uns nun zweispaltig dargestellt. Die ersten beiden Anforderungen des Layouts Über uns sind erfüllt, wenn es genau vier Unterkategorien gibt.

.com-content-categories__items {
  display:flex;
  flex-wrap:wrap;
}
.com-content-categories__item {
  max-width:50%;
  min-width:50%;
}

Mit Modulen arbeiten

Ich erstelle zwei Module des Typs Articles - Newsflash. Beide veröffentliche ich auf der Position main-bottom, wähle die horizontale Anzeige und ordne sie dem Menüpunkt Über uns zu. Ich arbeite hier nicht mit Overrides. Anpassungen erledige ich ausschließlich mittels CSS.

Module mit 3 Spalten

Im Layout Über uns fehlt nun noch die Position, die drei gleichgroße Bereiche in einer Zeile anzeigt. Die Inhalte für die drei Bereiche habe ich mit dem Tag drei bestimmt. Nun erstelle ich ein Modul, welches dies aus dem Content auswählt.

Joomla - Content erstellen - Module Articles - Newsflash.

Das horizontale Layout nutzt standardmäßig dass CSS grid-template-columns: repeat(auto-fit,minmax(200px,1fr));. Der Inhalt wird automatisch über die ganze Zeile angezeigt. Falls der Inhalt zu groß ist, wird automatisch in die nächste Zeile umgebrochen. Jeder Bereich wird mindestens 200px groß dargestellt. Ich finde dies ist eine ideale Umsetzung für dynamischen Content. Verlassen kann man sich nun aber nicht darauf, dass immer drei Inhalte in einer Zeile sind. Ist das Display schmaler als 600px oder Inhalt sowieso schon breiter, wird umgebrochen! Alles hat Vorteile und Nachteile.

Im nächsten Beispiel sehen wir uns an, wie wir die vier Inhalte in einer Zeile fix bestimmen. Mit dieser Variante muss für mobile Geräte nachgearbeitet werden, finde ich. Dafür ist die Layoutskizze erfüllt.

Modul mit 4x4 Spalten

Jetzt geht es um den letzten Bereich im Layout Über uns. Hier werden 16 Inhalte in vier Spalten ausgegeben.

Weil es wichtig ist, dass immer sechzehn Inhalte angzeigt werden, beschränken wir die Anzahl im Modul auf 16.

Joomla - Content erstellen - Module Articles - Newsflash.

Um das Modul später individuell mit CSS stylen zu können, fügen wir eine Klasse hinzu. Die Anweisung .sechzehn .mod-articlesnews-horizontal wirkt sich so lediglich auf dieses Modul aus. .mod-articlesnews-horizontal ohne .sechszehn würde alle Module des Typs Module Articles - Newsflash stylen!

Joomla - Content erstellen - Module Articles - Newsflash.

Mit dem nachfolgenden Codeschnippsel erreiche ich, dass immer 4 Beiträge pro Zeile angezeigt werden. Die 16 Beiträge werde so in 4 Zeilen ausgegeben. Auf schmalen Displays ist dies nicht optimal und muss noch angepasst werden.

.sechzehn .mod-articlesnews-horizontal {
  grid-template-columns:25% 25% 25% 25%;
  grid-gap:0;
}

Modul mit 4x4 Spalten

Im Frontend sieht das Grundgerüst ohne Bilder und Überschrift und mit Lorum ipsum Texten wie folgt aus.

Joomla - Content erstellen - Module Articles - Newsflash.

  • Ein Bereich über die ganze Breite ganz oben
  • Vier Bereiche über zwei Zeilen verteilt.
  • Drei Bereiche in einer Zeile (die responsive reagieren)
  • Sechzehn Bereiche über 4 Zeilen verteilt, die bisher fix bleiben.

Joomla - Content erstellen - Module Articles - Newsflash.

Startseite

Für die Startseite habe ich einen Menüpunkt vom Typ Features angelegt

Joomla - Menüpunkt für die Startseite anlegen.

und das Bloglayout auf drei Spalten gesetzt. So habe ich die ersten Zeilen des Layouts umgesetzt.

  • Ein Bereich über die ganze Breite ganz oben der momentan lediglich die Navigation enthält.
  • Drei Bereiche über zwei Zeilen verteilt.
  • Das Ergänzen der anderen Bereiche kann analog der vorherigen Beispiele erfolgen.

Joomla - Menüpunkt für die Startseite anlegen.

Natürlich ist das Layout so nicht statisch. Wenn es mehr als drei Beiträge mit der Eigenschaft Featured gibt, wird das Layout dynamisch um eine Zeile erweitert. In einem Content Management System sieht man dies in der Regel als Vorteil an.

Joomla - Menüpunkt für die Startseite anlegen.

Lesson learned

Das Zusammenbringen von gutem Content und Design ist in einem Content Management System stets ein spannendes Thema.

Der idealen Weg zwischen der Nutzung von Flexibiliät

  • um Content dynamisch darzustellen und
  • gewollter Starrheit, um Inhalte an ein Design anzupassen, ist oft schwer zu finden.

Vieles hängt in meinen Augen zudem von der Struktur des Inhalts selbst und von den Kenntnissen der Nutzer ab.

Jemand der über gute Programmierkenntnisse verfügt, programmiert unter Umständen vieles selbst, obwohl das CMS ihm den Code dafür schon bietet. Jemand der viel mit Content arbeitet, findet sich bei der Dateneingabe und Strukturierung schnell zurecht, fühlt sich aber hilflos beim Stylen.

Footnotes

  1. forum.joomla.de/thread/19000-individuelles-layout-trennung-von-inhalt-und-design-wie-macht-man-es-richtig/?postID=136288#post136288 ↩