Device-Detection

Aus Contao Community Documentation

Ausgaben von Modulen/Inhaltselementen anhand der Erweiterung: mobiledetection steuern

mobiledetection installieren

Bugbuster aka Glen Langer hat auf GitHub die Erweiterung mobiledetection für Contao entwickelt. Hiermit werden dem <body> Tag die Klassen phone, tablet oder computer hinzugefügt, per CSS kann anschließend darauf reagieren.

Möchte man jedoch einzelne Elemente oder Module auf einem Smartphone erst gar nicht laden, oder wie im meinem Fall nur auf dem Computer ausgeben, Stichwort Hintergrund-Video so brauchen wir eine Anpassung auf Template Ebene.

Die oben genannte Erweiterung von BugBuster bietet hierzu zwei Funktionen an.

Das Template mod_html anpassen

In unserem Beispiel wird die mod_html angepasst und für die spätere Anwendung unter einem anderen Namen gespeichert. Legt im Backend unter Layout->Templates ein Kopie des mod_html.html5 Templates an. Benennt diese z.B. in mod_html_computer_only um, und ändert den Programmcode wie folgt.

<?php
use Detection\MobileDetect;
$detect = new MobileDetect();
if (!$detect->isMobile() && !$detect->isTablet()) : 
	echo $this->html;
endif;
?>

Als erstes wird das Module aufgerufen und eine neue Instanz erzeugt. Anschließend wird über eine Abfrage geprüft ob das Endgerät der Kategorie Mobile oder Tablet gehört, trifft dies beides nicht zu, muss es ein computer sein und die Ausgabe erfolgt.

Module Template auswählen

Legt ein neues Module vom Typ HTML an und wählt als Individuelles Template unser zuvor angelegtes mod_html_computer_only aus. Der Inhalt des HTML Modules wird nun nur noch auf den computer Device ausgegeben. Die Angabe eines Individuellen Templates wurde in Contao 3.3 eingeführt und steht der Module-Konfiguration und den Inhaltselementen zur Verfügung. Zuvor war dieses nur über eine Erweiterung template_override ab Contao 2.11 möglich.

Ich hoffe die Anleitung ist für euch hilfreich.

Viele Grüße Oliver Willmes aka Ainschy (Diskussion) 17:07, 1. Apr. 2015 (CEST)

Ansichten
Meine Werkzeuge

Contao Community Documentation

Ich habe eine Anpassungsgeschichte angepasst.

Leo Feyer
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge