Contao - Bedingte Hauptspaltenbreite

von S. Huxal (Kommentare: 0)

Contao-Tutorial

Bedingte Hauptspaltenbreite je nach Seitenspalteninhalt

Wie bringe ich Contao dazu, die Hauptspaltenbreite in Abhängigkeit davon, ob ein Seitenspalteninhalt vorhanden ist, automatisch anzupassen, ohne ein zweites Contao-Layout dafür anlegen zu müssen - womit der Automatik-Faktor ja auch schon dahin wäre?

Die Lösung die mir dazu eingefallen ist, ist recht simpel und funktioniert dem Prinzip nach auch mit Layouts mit mehr als den hier beispielhaft gezeigten 2 Spalten.

Mein Gedankengang

Ich habe eine Website mit tagesaktuellen Meldungen in der rechten Spalte, wobei es auch Tage geben kann, die ohne Neuigkeiten vorüberziehen. Oder es sollen zeitlich begrenzte Werbeanzeigen ersatzlos aus dem Layout automatisch ausgeblendet werden.

Wie bewerkstellige ich es also, dass sich die Hauptspalte automatisch erweitert, wenn in der Seitenspalte kein Inhalt vorhanden ist.

Üblicherweise würde ich also in Contao zwei Layouts anlegen, ein einspaltiges und ein zweispaltiges und je nachdem, ob in der Seitenspalte nun etwas angezeigt wird, zwischen den beiden hin- und herswitchen.

Diese Vorgehensweise hat für mich zumindest zwei Nachteile.

  1. Wenn ich jemals an einem Layout etwas modifiziere, muss ich das auch am anderen tun, da sich die beiden bis auf die Spaltenanzahl gleichen sollen. Sowas kann man schon mal vergessen.
  2. Sollten Automatismen dafür sorgen, dass zum Beispiel ein Artikel oder eine News zeitgesteuert ausgeblendet werden, muss ich immer noch händisch das Layout umschalten, damit an der Stelle des ausgeblendeten Contents keine unschöne Lücke entsteht.

Die Lösung

Hinweis: In diesem Beispiel nutze ich Foundation (12-Spalten Grid mit den Klassen large und small in Verbindung mit der gewünschten Spaltenzahl, also large-8 small-12 für die Darstellung auf verschiedenformatigen Endgeräten).

In meinem konkreten Fall ging es darum, entweder dem Hauptbereich die volle Breite - also 12 Spalten - zuzuweisen, oder wenn Platz für die Seitenspalte bleiben soll, ihn mit 8 Spalten zu definieren. Die einfache Lösung dafür war die Anpassung des fe_page-Templates:

Es folgt die mehr oder weniger originale Darstellung des "main"-Bereiches des fe_page-Templates. Für meine Zwecke hatte ich hier lediglich die Zeilen 2, 5, 8, 23, 27 und 30 ergänzt um die entsprechenden Klassen des Foundation Frameworks zu vergeben, ohne dass ich das ständig in den Inhaltselementen tun muss:

Auszug aus fe_page.html5

<div id="main">
	<div class="row">
		<?php $this->sections('before'); ?>
		<?php $this->block('main'); ?>
			<div class="large-12 small-12 columns">  
				<?php echo $this->main; ?>
				<?php $this->sections('main'); ?>
			</div>
		<?php $this->endblock(); ?>
			  
		<?php $this->block('left'); ?>
			<?php if ($this->left): ?>
				<aside id="left">
					
					<?php echo $this->left; ?>
					
				</aside>
			<?php endif; ?>
		<?php $this->endblock(); ?>

		<?php $this->block('right'); ?>
			<?php if ($this->right): ?>
				<div class="large-4 small-12 columns">
					
					<?php echo $this->right; ?>
					
				</div>
			<?php endif; ?>
		<?php $this->endblock(); ?>
	</div>
</div>

 

Modifikationen

Um nun die Darstellung automatisch umzustellen, sobald in der rechten Spalte kein Inhalt angezeigt wird, habe ich den main-Block entsprechend mit einer Bedingung versehen, die das öffnende Div-Tag mit den passenden Klassen setzt:

<?php $this->block('main'); ?>
	<?php if($this->right): ?>
		<div class="large-8 small-12 columns">
	<?php else: ?>
		<div class="large-12 small-12 columns">
	<?php endif; ?>
				  
	<?php echo $this->main; ?>
				  
	<?php $this->sections('main'); ?>
		</div>
<?php $this->endblock(); ?>

 

Alles was dort passiert, ist, dass in Zeile 5 abgefragt wird, ob die rechte Spalte einen Inhalt zum Anzeigen aufweist.
Ist das der Fall, wird die Hauptspalte auf 8-Layoutspalten gesetzt (large-8), und wenn nicht, auf die volle Breite (large-12)

Man könnte das gleiche Prinzip nun auch noch mit 3 Spalten durchziehen, wodurch lediglich die Abfragen verschachtelter würden.

Möglicherweise gibt es dafür auch einfachere Lösungen, aber diese Variante hier mag ich, weil ich mich anschließend nicht mehr darum sorgen muss, ob wann in welcher Spalte was angezeigt wird und ich benötige lediglich dieses eine Template für alle vorkommenden Fälle.

Für Kritik und Verbesserungsvorschläge bin ich in jedem Fall offen und dankbar. Sicher läßt sich didaktisch noch einiges verbessern, von daher bitte ich um Nachsicht und Hinweise. 

S. Huxal

Zurück

Die neuesten Tutorials