Timeline for latest posts

Auf einer Website veröffentlichst du Artikel. Du wünschst dir, dass in der Seitenleiste eine Timeline mit den neuesten Beiträgen ausgegeben wird.

Wie die Timeline am Ende aussieht, zeigt das nächste Bild.

Timeline in Cassiopeia für die neuesten Beiträge im Modul mod_articles_latest

Beiträge erstellen

Du hast sicherlich schon einige Beiträge veröffentlicht. Falls nicht legst du zur Demonstration am besten jetzt Beispielbeiträge an.

Modul veröffentlichen

Um das Override sofort zu testen, erstellen wir es. Dazu öffnen wir den Modul Manager.

Wir erstellen das Modul für die rechte Seitenleiste.

Außerdem vergewissern wir uns, dass das Modul unter dem Menüpunkt angezeigt wird, welchen wir später öffnen. Zum Testen veröffentliche ich das Mdoul meist auf allen Menüpositionen.

Template Override

Damit die Timeline so wie wir uns das vorstellen in der rechten Seitenleiste erscheint, erstellen wir ein Override. Dazu klicken wir in der linken Seitenleiste auf System und dann rechts im Bereich Tempaltes auf Site Template.

Wir wählen Cassiopeia.

Im Tablulator Overrides erstellen wir nun das Override für die Anzeige der neuesten Beiträge. Dies ist nicht anderes als eine Kopie der bisherigen Ansicht. Diese neu erstellte Kopie können wir abändern. Sie bleibt bei einer Aktualisierung von Joomla erhalten.

Im Tabulator Editor ist das abändern des Overrides möglich.

Kopiere den nachfolgenden Code in die Datei.

<?php
defined('_JEXEC') or die;
?>

<style>
.row-alternating {
  display:flex;
}

.row-alternating:nth-child(2n){
  flex-direction:row-reverse;
}

.row-content, .row-date{
  padding: 0.5em 2em;
  width: 50%;
  display: flex;
  align-items: center;
}

.row-title{
  margin:0;
}

.row-alternating:nth-child(2n) .row-content {
	justify-content: flex-end;
	text-align: right;
}

.row-alternating:nth-child(2n+1) .row-date {
	justify-content: flex-end;
}

.row-alternating:nth-child(2n) .row-date, .row-alternating:nth-child(2n + 1) .row-content{
    position:relative;
    border-left: 1px solid lightgray;
}
.row-alternating:nth-child(2n) .row-date:before, .row-alternating:nth-child(2n + 1) .row-content:before {
    background: lightgray none repeat scroll 0 0;
    border: 4px solid white;
    border-radius: 50%;
    content: "";
    height: 21px;
    width: 21px;
    left: -15px;
    position: absolute;
    top: calc(50% - 10px);
  }

.alternating-container-timeline {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.alternating-category-timeline {
    font-size: 0.7em;
    font-weight: 500;
    text-transform: uppercase;
}
.alternating-day-timeline {
    font-size: 3em;
    margin: 5px 0 10px;
}
.alternating-month-year-timeline {
    font-size: 1.1em;
}
</style>

<div class="latestnews<?php echo $moduleclass_sfx; ?>">
<?php foreach ($list as $item) :  ?>
	<div class="row-alternating">
		<div class="row-date">
		  <div class="alternating-container-timeline">
			<span class="alternating-category-timeline">
			  <?php echo $item->category_title; ?>
			</span>
			<span class="alternating-day-timeline">
			 <?php echo JHtml::_('date', $item->publish_up, "F Y"); ?>
			</span>
			<span class="alternating-month-year-timeline">
			  <?php echo JHtml::_('date', $item->publish_up, "d"); ?>
			</span>
		  </div>
		</div>

		<div class="row-content">
		  <h4 class="row-title" itemprop="name">
			<a href="<?php echo $item->link; ?>" itemprop="url"><?php echo $item->title; ?></a>
		  </h4>
		</div>
	</div>
<?php endforeach; ?>
</div>

Die Ansicht der Differenzen unterstützt dich. Hier kannst du dir jederzeit die Unterschiede zur Ansicht im Joomla Core ansehen.

Das Beispiel habe ich für Joomla Version 3 auf der Website j-over[^j-over.de/de/template-overrides/timeline-mit-flexbox] endeckt.