Timeline

Hier haben wir ein alternatives Layout für das Modul "Beiträge - Neueste" (mod_articles_latest), um die Beiträge in Form einer Zeitlinie (Timeline) anzuzeigen.

Die Datei timeline.php wird unter /mod_articles_latest/ gespeichert. Die CSS Definitionen können im CSS vom Template ergänzt werden.

Das Modul wird wie üblich angelegt, als alternatives Layout (Reiter Erweitert) wird "timeline" gewählt. Das Modul wird nicht direkt auf einer Position angezeigt, sondern in einem Beitrag mit geladen.

Da alle Elemente im Override eigene Klassen haben, kann man das CSS anpassen wie man möchte. Wenn man die Klassen "icon-..." (IcoMoon, z.B. im Template Protostar) durch "fa fa-..." ersetzt, wird das Override auch mit FontAwesome funktionieren.

Die Datei "timelinej4.php" ist mit Joomla 4 kompatibel.

Benötigte Override-Dateien

• timeline.php
• timeline.css
• timelinej4.php

• <?php
  /**
   * @package Joomla.Site
   * @subpackage mod_articles_latest
   *
   * @copyright Copyright (C) 2005 - 2015 Open Source Matters, Inc. All rights reserved.
   * @license GNU General Public License version 2 or later; see LICENSE.txt
   */
  defined('_JEXEC') or die;
  ?>
  <ul class="latestnews<?php echo $moduleclass_sfx; ?> jover-timeline">
   <?php 
   $counter = 0;
   foreach ($list as $item) :
   $counter++;
   ?>
   <li class="jover-timeline-<?php echo ($counter % 2 == 1) ? "odd" : "even"; ?>" itemscope itemtype="http://schema.org/Article">
   <div class="jover-badge"><span class="icon-radio-checked"></span></div>
   <div class="jover-timeline-panel">
   <p class="jover-date"><span class="icon-clock"></span> <?php echo JHtml::_('date', $item->created, "d.m.Y"); ?></p>
   <a href="<?php echo $item->link; ?>" itemprop="url">
   <h3 itemprop="name">
   <?php echo $item->title; ?>
   </h3>
   </a>
  <?php if (!empty(json_decode($item->images)->image_intro)) : ?>
   <a href="<?php echo $item->link; ?>">
   <img class="img-responsive jover-timeline-image" src="<?php echo json_decode($item->images)->image_intro; ?>" />
   </a>
   <?php endif; ?>
   </div>
   </li>
   <?php endforeach; ?>
  </ul>

• /*Timeline */
  ul.jover-timeline {
   list-style: none;
   position: relative;
   padding: 20px 0 20px;
  }
  ul.jover-timeline:before {
   top: 0;
   bottom: 0;
   position: absolute;
   content: " ";
   width: 3px;
   background-color: #444;
   left: 50%;
   margin-left: -1.5px;
  }
  ul.jover-timeline > li:after, ul.jover-timeline > li:before {
   content: " ";
   display: table;
  }
  ul.jover-timeline > li:after {
   clear: both;
  }
  ul.jover-timeline > li {
   margin-bottom: 20px;
   position: relative;
  }
  ul.jover-timeline > li > .jover-timeline-panel {
   width: 40%;
   float: left;
   border: 1px solid #d4d4d4;
   background: #FFF;
   border-radius: 2px;
   padding: 20px;
   position: relative;
   -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
   box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
  }
  ul.jover-timeline > li.jover-timeline-even > .jover-timeline-panel {
   float: right;
  }
  ul.jover-timeline > li.jover-timeline-odd > .jover-timeline-panel {
   text-align: right;
  }
  ul.jover-timeline > li > .jover-timeline-panel:after {
   position: absolute;
   top: 27px;
   right: -12px;
   display: inline-block;
   border-top: 12px solid transparent;
   border-left: 12px solid #ccc;
   border-right: 0 solid #ccc;
   border-bottom: 12px solid transparent;
   content: " ";
  }
  ul.jover-timeline > li.jover-timeline-even > .jover-timeline-panel:after{
   border-left-width: 0;
   border-right-width: 12px;
   left: -12px;
   right: auto;
  }
  ul.jover-timeline > li > .jover-badge {
   color: #000;
   width: 30px;
   height: 30px;
   line-height: 30px;
   font-size: 1.4em;
   text-align: center;
   position: absolute;
   top: 28px;
   left: 50%;
   margin-left: -14px;
   background-color: #fff;
   z-index: 100;
   border-top-right-radius: 50%;
   border-top-left-radius: 50%;
   border-bottom-right-radius: 50%;
   border-bottom-left-radius: 50%;
  }
  @media (max-width: 767px) {
   ul.jover-timeline:before {
   left: 40px;
   }
   ul.jover-timeline > li > .jover-timeline-panel {
   float: right;
   width: calc(100% - 120px);
   width: -moz-calc(100% - 120px);
   width: -webkit-calc(100% - 120px);
   }
   ul.jover-timeline > li > .jover-timeline-panel:before {
   border-left-width: 0;
   border-right-width: 15px;
   left: -15px;
   right: auto;
   }
   ul.jover-timeline > li.jover-timeline-odd > .jover-timeline-panel {
   text-align: left;
   }
   ul.jover-timeline > li > .jover-badge {
   left: 25px;
   margin-left: 0;
   top: 26px;
   }
   ul.jover-timeline > li > .jover-timeline-panel:after {
   border-left-width: 0;
   border-right-width: 14px;
   left: -14px;
   right: auto;
   }
  }

• <?php
  
  /**
   * @package     Joomla.Site
   * @subpackage  mod_articles_latest
   *
   * @copyright   (C) 2006 Open Source Matters, Inc. <https://www.joomla.org>
   * @license     GNU General Public License version 2 or later; see LICENSE.txt
   */
  
  use Joomla\CMS\HTML\HTMLHelper;
  
  defined('_JEXEC') or die;
  
  if (!$list) {
      return;
  }
  
  ?>
  <ul class="mod-articleslatest latestnews mod-list jover-timeline">
  <?php
      $counter = 0;
      foreach ($list as $item) :
      $counter++;
  ?>
      <li class="jover-timeline-<?php echo ($counter % 2 == 1) ? "odd" : "even"; ?>" itemscope itemtype="https://schema.org/Article">
          <div class="jover-badge"><span class="icon-generic"></span></div>
          <div class="jover-timeline-panel">
              <p class="jover-date"><span class="icon-clock"></span> <?php echo HTMLHelper::_('date', $item->created, "d.m.Y"); ?></p>
              <a href="<?php echo $item->link; ?>" itemprop="url">
                  <h3 itemprop="name">
                      <?php echo $item->title; ?>
                  </h3>
              </a>
              <?php if (!empty(json_decode($item->images)->image_intro)) : ?>
                  <a href="<?php echo $item->link; ?>">
                  <img class="img-responsive jover-timeline-image" src="<?php echo json_decode($item->images)->image_intro; ?>" />
                  </a>
              <?php endif; ?>
          </div>
      </li>
  <?php endforeach; ?>
  </ul>