Startseite » Redaxo » Seitenbasiertes Mehrspalten-Layout mit Flexbox für Redaxo

Seitenbasiertes Mehrspalten-Layout mit Flexbox für Redaxo

Die Aufteilung der Blöcke in bis zu 12 Spalten pro Zeile erfolgt individuell für jede Seite aufgrund einer neuen Metainfo "art_grid". Das folgende Template verteilt die einzelnen Blöcke entsprechend der gewählten Zeilen- und Spaltenaufteilung.

Meta Info

Zur Aufteilung wird eine neue Artikel-Metainformation mit dem Namen "art_grid" benötigt.

Spaltenname: grid

Feldbezeichnung: 12 Spalten aufteilen - Template mit Flexbox verwenden! Trennzeichen #

Feldtyp. textarea

Beispiel:

4#4#4
5#7
12

Damit werden die ersten 6 Blöcke der Seite auf 3 Zeilen verteilt.

1. Zeile: Blöcke 1, 2 und 3 mit 4 Breiteneinheiten.

2. Zeile: Blöcke 4 und 5 mit 5 bzw. 7 Breiteneinheiten.

3. Zeile: Block 6 mit 12 von 12 Breiteneinheiten, also über die volle Breite.

Weitere Blöcke erscheinen ohne Breitenbegrenzung.

Template

<?php /* TEMPLATE Seitenbasiertes Mehrspalten-Layout mit Flexbox für Redaxo 5 (C) Jürgen Eggers 17-04-07 www.innovative-internetloesungen.de */ ?> <!DOCTYPE html> <html lang="de-DE"> <head> <meta charset="utf-8"> <title></title> </head> <body> <?php $nl = "\n"; # Blöcke einlesen $slice = rex_article_slice::getFirstSliceForArticle($this->getArticleID()); while($slice != null) { $article_slices[] = $slice; $slice = $slice->getNextSlice(); } $number_slices = count($article_slices); # Gridstruktur einlesen und vorbehandeln $art_grid = trim($this->getValue("art_grid")); # Nur bei vorhandenen Einträgen Spaltenaufteilung vornehmen $is_grid = false; if($art_grid) { $grid_field_test = explode('#', str_replace(["\r\n", "\n", "\r"], '#', $art_grid)); $is_grid = true; foreach($grid_field_test as $val) { # Prüfen ob nur Ziffern zwischen 1 und 12 erkannt werden if($val < 1 || $val > 12 || !ctype_digit($val)) { $is_grid = false; echo '<p>&#128128; Ungültiger Eintrag „' . $val . '“ bei der Spaltenaufteilung! &#128128;</p>' . $nl; echo <<<EOD <p>Es sind nur die Zahlen 1 bis 12 zulässig. Trennzeichen # und die Zeilensumme sollte 12 sein.</p> <p>Beispiel:<br> 4#4#4<br> 5#7<br> 12</p> EOD; break; } } } if(!$is_grid) { ?> REX_ARTICLE[ctype=1] <?php } else { # Ausgabe starten $out = ''; # Feld der Metaeinträge erzeugen $grid_meta_field = explode('#', str_replace(["\r\n", "\n", "\r"], '#', '' . $art_grid)); # Markierungen für neue Zeilen ergänzen $grid_meta_chain = str_replace(["\r\n", "\n", "\r"], '#0#-1#', '-1#' . $art_grid) . '#0'; # Gridfeld erzeugen $grid_field = explode('#', $grid_meta_chain); $number_grid_field = count($grid_field); # Zähler für Grideinträge und Blöcke $i = 0; $j = 0; # Block im Gridystem einlesen oder Schleife verlassen while($i < $number_grid_field) { $cols_prev = $grid_field[$i - 1]; $cols = $grid_field[$i]; $cols_next = $grid_field[$i + 1]; # Zeile vor Verlassen der Schleife beenden if($j >= $number_slices && $cols_prev != 12) { $out .= $nl . '</div>' . $nl; } # Schleife verlassen if($j >= $number_slices) { break; } # Block einlesen if($cols > 0) { $slicer = $article_slices[$j]->getSlice(); $j++; } $i++; # Zeile starten if($cols == -1 && $cols_next != 12) { $out .= '<div class="gridrow">'; } # Spalte if($cols > 0) { if($cols != 12) { $out .= $nl . '<div class="col' . $cols . '">' . $nl; } $out .= $slicer . $nl; if($cols != 12) { $out .= '</div>'; } } # Zeile beenden if($cols == 0 && $cols_prev != 12) { $out .= $nl . '</div>' . $nl; } } # Restliche Blöcke ausgeben, falls vorhanden if(count($grid_meta_field) < $number_slices) { while($j < $number_slices) { $slicer = $article_slices[$j]->getSlice(); $out .= $slicer . $nl; $j++; } } # Ausgabe echo $out; } ?> </body> </html>

HTML-Ausgabe

<div class="gridrow"> <div class="col4">Block 1</div> <div class="col4">Block 2</div> <div class="col4">Block 3</div> </div> <div class="gridrow"> <div class="col5">Block 4</div> <div class="col7">Block 5</div> </div> <div class="gridrow"> <div class="col12">Block 6</div> </div>

CSS-Formatierung

/* Gridsystem */ .gridrow { display: flex; justify-content: space-between; margin-bottom: 50px; } /* Gridsystem 5 % */ .gridrow .col1 {flex-basis: 5%;} .gridrow .col2 {flex-basis: 13.636%;} .gridrow .col3 {flex-basis: 22.273%;} .gridrow .col4 {flex-basis: 30.909%;} .gridrow .col5 {flex-basis: 39.545%;} .gridrow .col6 {flex-basis: 48.182%;} .gridrow .col7 {flex-basis: 56.818%;} .gridrow .col8 {flex-basis: 65.455%;} .gridrow .col9 {flex-basis: 74.091%;} .gridrow .col10 {flex-basis: 82.727%;} .gridrow .col11 {flex-basis: 91.364%;} .gridrow .col12 {flex-basis: 100%;}

Ausgabe

Die Spalten sind hier zur Verdeutlichung eingefärbt.

Gridsystem

CSS-Formatierung für 16 Spalten

Das System ist aber nicht auf 12 Spalten begrenzt. Für ein 16-spaltiges Layout müssen lediglich die Breitenklassen .col1 bis .col16 entsprechend definiert werden. Natürlich sind die Metaangaben art_grid auf 16 pro Zeile zu erweitern.

.gridrow .col1 {flex-basis: 5%;} .gridrow .col2 {flex-basis: 11.333%;} .gridrow .col3 {flex-basis: 17.667%;} .gridrow .col4 {flex-basis: 24.000%;} .gridrow .col5 {flex-basis: 30.333%;} .gridrow .col6 {flex-basis: 36.667%;} .gridrow .col7 {flex-basis: 43.000%;} .gridrow .col8 {flex-basis: 49.333%;} .gridrow .col9 {flex-basis: 55.667%;} .gridrow .col10 {flex-basis: 62.000%;} .gridrow .col11 {flex-basis: 68.333%;} .gridrow .col12 {flex-basis: 74.667%;} .gridrow .col13 {flex-basis: 81.000%;} .gridrow .col14 {flex-basis: 87.333%;} .gridrow .col15 {flex-basis: 93.667%;} .gridrow .col16 {flex-basis: 100%;}

Anpassung für Redaxo 4

Es muß nur die Programmzeile 18 geändert werden:

$slice = OOArticleSlice::getFirstSliceForArticle($this->getArticleID());

Beispielseite anschauen

Zur Übersicht