Kategorie: Contao

Informationen und Wissenswertes rund um das Open Source Content Management System (CMS) Contao.

Facebook Plug-Ins datenschutzkonform in Contao einbinden

Jonathan Schreibe einen Kommentar

Das LG Düsseldorf hat entschieden, dass die Einbindung von Facebook-Buttons, Like-Boxen usw. nicht den geltenden Datenschutzbestimmungen entspricht. Das Plug-In übermittelt nämlich Daten über das Surfverhalten des Nutzers an Facebook, ohne dass überhaupt klar ist, was mit den Daten passiert. Da dies bereits mit Aufrufen der Seite passiert, ist es weder möglich, diese Datenübermittlung im Vorfeld zu erkennen, noch sie zu unterbinden. Eine möglicher Workaround dafür ist die sog. Zwei-Klick-Lösung: Die Elemente werden erst nach erneuter Bestätigung durch den Nutzer geladen und bleiben ansonsten inaktiv. Auch bei dieser Umsetzung ließe sich streiten, ob mit Blick auf die fehlende Transparenz überhaupt eine informierte Einwilligung möglich ist; dies stellt jedoch die Plug-Ins insgesamt in Frage. Als Webdesigner möchte ich mich im Folgenden daher mit dem Workaround beschäftigen und beschreiben, wie Facebook Plug-Ins datenschutzkonform in Contao eingebunden werden können.

1. Um ein Plug-In zu nutzen, können die entsprechenden Codeschnipsel direkt via Facebook erzeugt werden. Für das folgende Beispiel werde ich das Page-Plugin nutzen: https://developers.facebook.com/docs/plugins/page-plugin. Die Codeschnippsel bereiten wir vor und legen sie für die folgenden Schritte bei Seite.

2. Zunächst gehen wir ins Contao Backend und legen ein neues Modul an (eigenes HTML-Modul). In dieses Modul kopieren wir den include-Code, der uns von Facebook vorgegeben wird. In meinem Fall sieht das dann so aus:

3. Als nächstes legen wir ein neues Seitenlayout an, ich habe es Facebook genannt. Dort fügen wir in der Hauptspalte das eben erstellte Modul ein. Die üblichen Stylesheets unserer sonstigen Webseite laden wir nicht; wir wollen eine leere Seite, in der lediglich das Plugin liegt. Bei eigener Javascript-Code fügen wir die Javascript-SDK von Facebook ein:

4. Wir haben nun also ein Seitentemplate und ein Modul erstellt. Als nächstes gehen wir in die Seitenstruktur und legen eine neue Seite an, ich nenne sie in meinem Beispiel Facebook. Bei den Layout-Einstellungen stellen wir das zuvor angelegte Layout „Facebook“ ein. Wenn ihr jetzt die Seite aufruft, sollte die Like-Box angezeigt werden. Ich verzichte an dieser Stelle darauf den Link zu posten, damit ich mir nicht die hier erklärte Zwei-Klick-Lösung selber aushebele. 😉

5. Nun legen wir ein weiteres HTML-Modul an, in dem wir die Zwei-Klick-Lösung integrieren, die später auf unsere Webseite soll. Bei dem iframe in Zeile 5 muss die URL bzw. Seiten-ID (kann in der Seitenstruktur von Contao eingesehen werden, indem man mit der Maus über eine Seite fährt)  der zuvor erstellten Seite mit der Like-Box drin eingefügt werden. Unten folgt dann ein Text, der den Nutzer vor den Folgen seiner Entscheidung warnt. Bitte dabei beachten, dass <script> und <iframe> in den Contao-Einstellungen ggf. erst freigegeben werden müssen, um nicht aus dem HTML-Modul entfernt zu werden. Bei mir sieht das z.B. so aus:

6. Dieses Modul können wir nun an beliebiger Stelle in unsere Contao Webseite einbinden. Das fertige Ergebnis kann dann so aussehen: http://jst-media.de/facebook-2click.html – die optischen Anpassungen aus meinem Beispiel gibts im nächsten Punkt.

7. Zu guter letzt passen wir die Optik noch etwas an. Ich habe dazu einen Screenshot des Plug-Ins gemacht und mit einem transparenten Layer überzogen, der als Hintergrundgrafik dient. Daraus ergibt sich folgendes CSS:

 

 

Ich hoffe, das Tutorial ist hilfreich. Falls ja würde ich mich – in diesem Fall ganz besonders – über ein Like im frisch erstellten Page-Plugin freuen.

Selbstverständlich lässt sich das Tutorial auch mit einem Like-Button umsetzen, dann müssen nur die Code-Schnipsel und das css entsprechend angepasst werden.

Die oben genannte Umsetzung einer 2-Klick-Lösung soll lediglich als Denkansatz dienen. Die Rechtslage in diesem Feld ist sehr komplex, und ich möchte ausdrücklich nicht für mich beanspruchen, hiermit eine Lösung zu präsentieren, die sämtlichen rechtlichen Bedenken standhalten kann. Wer auf Nummer sicher gehen will, kann auh einfach „normal“ auf seine Facebook-Seite verlinken und das z.B. mi einem Icon etwas aufhübschen.

Onepage Webseite mit Contao

Jonathan 19 Kommentare

Im folgenden Tutorial soll die Umsetzung einer Onepage Webseite mit Contao erklärt werden. Onepager sind beliebt – sie eignen sich nach meinem Empfinden insbesondere für kleinere Projekte, die nur wenig Content beinhalten (es sieht dann einfach nicht nach so wenig aus), können aber auch für größere Projekte eingesetzt werden.

Damit ein Onepager aber auch gut aussieht, sind m.E. zwei Elemente erforderlich: Die Seite muss smooth scrollen und bestenfalls den Bereich, der sich gerade im Blickfeld befindet, hervorheben. Ich habe das in Contao nun folgendermaßen umgesetzt:

  1. Zunächst legen wir ein neues Modul mit eigenem html-Code an. In dieses Modul kommt unsere Navigation – Contao selbst bietet leider keine (mir bekannte) Möglichkeit, mit den Core-Modulen einen Onepager zu realisieren, sodass wir hier selbst Hand anlegen.
  2. Die Navigation ist wie folgt aufgebaut:

    Die Klassen home, leistungen, about und kontakt habe ich in vorliegendem Beispiel verwendet, um jedem Button noch eine separate Hintergrundgrafik zuzuweisen; ansonsten ist das nicht unbedingt erforderlich.
  3. Als nächstes legen wir in der Seitenstruktur 4 Unterseiten für Home, Leistungen, About und Kontakt an. Die Seiten schalten wir offline.
  4. Wir wechseln nun zur Artikelansicht und notieren uns die Artikel-IDs der Artikel in den zuvor angelegten Seiten.
  5. Wir erstellen ein neues HTML-Modul, mit dem der Content „erzeugt“ wird. Die IDs geben wir in der gewünschen Reihenfolge ein:

    WICHTIG: Die Section-ID muss dabei jeweils den Verlinkungen (#home, #leistungen, …) in der Navigation entsprechen.
  6. Nun legen wir ein neues Seitenlayout an und nennen es z.B. Onepager. In die Kopfzeile binden wir unsere Modul „Navigation“ ein, in die Hauptspalte das Modul „Content“.
  7. Wir aktivieren im Seitenlayout jquery
  8. Als nächstes fügen wir bei „eigener Javascript Code“ im Seitenlayout folgenden Code ein:

    Dieses Script fügt unserer Navigation mit der css-Klasse .navbar die smooth scroll und highlighting Funktionalitäten hinzu. Im Script können diverse Variablen noch etwas angepasst werden: In Zeile 5 können wir die Erfassung des Sichtbereichs relativ zur .navbar verschieben, z.B. wenn der #header größer ist als die .navbar. In Zeile 17 kann außerdem die Dauer der Animation eingestellt werden sowie der Animationstyp. Wer mehr Auswahl möchte, sollte einen Blick auf die jquery easings werfen. Im Standard-jquery Paket, das mit Contao eingebunden wird, sind die easings nicht vorhanden.
  9. Jetzt geht es ans .css: Zunächst empfiehlt es sich, die Navigation zu fixieren, da ansonsten der highlighting-Effekt nicht sichtbar ist. Das könnte z.B. so aussehen:
  10. Durch das Skript bekommt der Link, dessen Inhalt gerade im Sichtbereich liegt, die css-Klasse .active zugewiesen. Dementsprechend müssen wir nun noch eine entsprechende Formatierung hinzufügen:
  11. Die .css Datei muss natürlich im Seitenlayout noch eingebunden werden. 😉 Die Onepage-Webseite mit Contao ist nun in ihren Grundzügen fertig. Ich habe für das von mir erstellte Projekt noch folgendes .css für die Navigation-Bar verwendet:

     

Ich hoffe, dieses kleine Tutorial ist hilfreich.

 

 

Contao Formulare: Zu Fehlermeldung springen

Jonathan Schreibe einen Kommentar

Ich hatte vor Kurzem das Problem, auf einer etwas älteren Contao-Installation ein längeres Registrierungs-Formular einrichten zu müssen. Das Problem hier war, dass bei falsch ausgefüllten Pflichtfeldern zwar eine Fehlermeldung ausgegeben wurde, diese jedoch mitunter außerhalb des Viewports lag und vom Benutzer daher gar nicht wahrgenommen wurde.

Die Lösung dafür ist wie folgt:

  1. Neues Seitenlayout anlegen, indem das Layout der Seite, in der das Formular eingebunden wird, kopiert wird
  2. In dem neuen Seitenlayout dann den folgenden Javascript-Code einfügen:
  3. In der Seitenstruktur der entsprechenden Seite das Layout zuweisen.

Mit diesem Workaround sind die Fehlermeldungen dann im Viewport. Ich habe mittels css dann noch .error in Rot eingefärbt, damit die fehlerhaft ausgefüllten Felder direkt ins Auge springen.

Fullscreen Navigation Menu in Contao

Jonathan 1 Kommentar

Im folgenden Artikel wird die Einbindung einer mit jquery animierten fullscreen Navigation in Contao erklärt.

Aktuell bin ich dabei, meine Webseite zu überarbeiten. Das ist gerade bei Designern nicht immer einfach: Viele Webdesigner toben sich dann richtig aus, das Ergebnis ist nach meinem Empfinden aber nicht immer optimal: Technisch mag zwar alles perfekt ausgeklügelt sein, aber die Nutzbarkeit ist, gerade für weniger Internet-affine Nutzer, die aber wiederum die Zielgruppe sind, meist eingeschränkt.

Dennoch wollte ich bei meiner neuen Webseite einige schlichte, moderne, seltene, auffällige und einprägsame Dinge einbauen. Die Liste an Kriterien ist insofern lang gewesen. 😉

Einem dieser Elemente – dem wohl wichtigsten – möchte ich heute einen Beitrag widmen: Der Navigation. Ich habe mich hier für eine Vollbild-Navigation entschieden, da hier keine größeren Änderungen für die Mobilversion nötig sind (die ist quasi von Haus aus responsive), seeeeehr viel Platz (z.B. für große Icons, Action-Buttons, usw.) vorhanden ist und das Ganze nach meinem Empfinden auch sehr gut aussieht. Als Basis dient die „Full-Screen Pop-Out Navigation“ von codyhouse.co.

Um das Ganze in Contao zu implementieren, sind folgende Schritte nötig:

  1. Das Paket herunterladen und entpacken.
  2. In Contao im Seitenlayout einen eigenen Navigationsbereich hinzufügen; bei mir heißt er Navigation, die zugewiesene id ist entsprechend #Navigation
  3. Bevor es los geht, bearbeiten wir noch schnell die main.js und style.css aus dem Paket: Mit suchen&ersetzen ersetzen wir alle .cd-header durch #Navigation
  4. Nun laden wir die style.css und main.js in Contao hoch und binden sie unter Seitenlayout im Header ein:
  5. Im Seitenlayout aktivieren wir außerdem jquery.
  6. Jetzt legen wir eine neue Seite an, die wir im Menü verstecken. Hier werden wir unsere Navigation einfach als Textelement anlegen und hübsch stylen. Ich würde die Verwendung eines responsive grids oder der rocksolid columns empfehlen.
  7. Sobald das erledigt ist, legen wir ein neues html-Modul an, mit dem wir die Navigation, die aufgerufen wird, einbinden:
  8. Um den Button, mit dem die Navigation aufgerufen wird, einzubinden, legen wir ebenfalls ein html-Modul an. Ich habe dem Ganzen noch die Klasse .navbutton gegeben, um den Button in meiner #Navigation anordnen zu können:
  9. Als nächstes binden wir die Module im Seitenlayout ein. Den Button (7. Schritt) fügen wir in unseren unter 2. angelegten Navigationsbereich ein, die Navigation (6. Schritt) in der Hauptspalte.
  10. Das war es auch schon – die Navigation sollte nun nach einem Klick auf den Menü Button herunter fahren. Natürlich kann das .css noch etwas angepasst werden, nicht benötigte Elemente wie .cd-logo oder .cd-secondary-nav können entfernt werden.

Was mir dann noch nicht gefallen hatte war der Umstand, dass das Menü beim Klicken eines Ankerlinks offen geblieben ist. Das ist insbesondere bei Onepage-Webseiten sehr unpraktisch. Ich habe daher die main.js wie folgt angepasst, um die Navigation beim Anklicken eines Links zu schließen:

 

 

JQuery Progress-Bar in Contao

Jonathan Schreibe einen Kommentar

Visualisierungen sind wichtig, um eine Webseite möglichst intuitiv und gleichzeitig ansehnlich zu gestalten. Animierte Balkendiagramme, auch progress-bars genannt, sind dabei eine gute Möglichkeit. Das folgende Tutorial erklärt, wie mit jquery animierte Progress-Bars in Contao eingebunden werden können. Die Grundlage dafür ist skillset.js.

      1. Das Paket herunterladen, entpacken, im Backend hochladen.
      2. Im Seitenlayout die .css sowie die skillset.css und skillset.js im <head>-Bereich einbinden, außerdem JQuery aktivieren:
      3. Im <head>-Bereich fügen wir außerdem die Inhalte für unsere geplante progress-bar ein. Bei headline wird die Überschrift eingetragen, unter description findet sich der tooltip wieder. Mit length und value können Länge sowie Anzeigestand der Progressbar eingestellt werden.
      4. Als nächstes gehen wir in den Artikel, in dem die Progressbar zu sehen sein soll. Dort legen wir ein html-Element an und fügen folgenden Code ein:
      5. Die Farbe der Balken kann in der skillset.css angepasst werden, nämlich unter
      6. Da ich außerdem Font-Awesome nutze, habe ich darauf verzichtet, den in skillset eingebundenen Fontello zu nutzen. Die Anpassung in der skillset.css ist wie folgt:
      7. Fertig ist die Progress-Bar!

 

 

Icons als Buttons für den Contao-Slider

Jonathan Schreibe einen Kommentar

Der Contao-Core verfügt bekanntlich über einen Content-Slider. Dieser ist standardmäßig allerdings nicht besonders hübsch; insbesondere sind die Schaltflächen für „vorwärts“ und „zurück“ einfacher Text. Wesentlich beliebter – und schöner – sind Buttons. Dazu muss wie folgt vorgegangen werden:

  1. Die Font-Awesome Extension installieren
  2. Per FTP die Datei system/config/langconfig.php öffnen
  3. Dort können nun die Beschriftungen angepasst werden:

Im obigen Beispiel sind nun für die deutsche und englische Sprachversion (falls ein language-fallback verwendet wird) anstelle der normalen Texte Font-Awesome Icons eingebunden. Der Insert-Tag ergibt sich dabei aus {{fa::<Name>}}. Eine Übersicht der Icons sowie die entsprechenden Bezeichnungen gibt es auf der offiziellen Homepage.

Die Icons können anschließend noch per .css gestylet werden; die entsprechenden Klassen sind .slider-prev und .slider-next. Ein Button-Effekt lässt sich z.B. relativ einfach mit ein bisschen padding, Schrift in Hintergrundfarbe und Hintergrund in Schriftfarbe erzielen.

Externe Skripte in Contao einbinden

Jonathan Schreibe einen Kommentar

In einem aktuellen Projekt musste ich ein separat zu Contao programmiertes php-Skript in die fertige Webseite einbinden. Eine Möglichkeit wäre, mit iframes zu arbeiten; das ist aber technisch nicht sonderlich sauber. Stattdessen lässt sich das Skript auch direkt in Contao einbinden, sodass es direkt im Frontend ausgegeben wird. Dazu sind folgende Schritte nötig:

  1. Das Skript per FTP in den „templates“ Ordner hochladen
  2. An der Stelle, an der das Skript eingebunden werden soll, ein neues html-Inhaltselement erstellen
  3. Dort kann mittels insert-tag dann die Datei eingefügt werden:{{file::<dateiname.php>}}

Sticky Header in Contao

Jonathan 19 Kommentare

Besonders bei umfangreichen Webseiten oder Onepagern ist es oftmals lästig, wieder hoch scrollen zu müssen, um zur Navigation zu gelangen. Eine Möglichkeit, dieses Problem zu umgehen, ist ein sticky Header, der an der Oberseite der Webseite fixiert ist. Während sich ein einfacher fixed Header noch mit .css umsetzen ließe, kann es jedoch nötig sein, nur bestimmte Bereiche zu fixieren, z.B. wenn die Seite noch eine Topbar enthält. Um diese weg zu scrollen und anschließend die Navigation zu fixen, kann eine „scroll-to-fixed“-Navigation eingebunden werden.

Das Ganze funktioniert mit einem kleinen Skript, das hier zu finden ist. Um alles in Contao zum Laufen zu bekommen, ist wie folgt vorzugehen:

1. Das Skript herunterladen und im Backend hochladen

2. Im Seitenlayout JQuery aktivieren

3. Im Seitenlayout im Head-Bereich das hochgeladene Skript verlinken:

 

4. Ebenfalls im Head-Bereich wird dann folgendes Skript eingebunden:

 

#Navigation wäre dabei durch die ID des Elements, das fixiert werden soll, zu ersetzen. Für die oben genannte Problematik könnte z.B. zwischen dem Header, der die Topbar enthält, und der Hauptspalte ein eigener Layoutbereich namens Navigation angelegt werden.