Referenz Thomas Berscheid TYPO3 Extension Template Slider jQuery CSS TypoScript TS Einbindung Standard Bildergalerie Text Inhalte CSS HTML Programmierung Köln
Referenz Thomas Berscheid TYPO3 Extension Template Slider jQuery CSS TypoScript TS Einbindung Standard Bildergalerie Text Inhalte CSS HTML Programmierung Köln
Referenz Thomas Berscheid TYPO3 Extension Template Slider jQuery CSS TypoScript TS Einbindung Standard Bildergalerie Text Inhalte CSS HTML Programmierung Köln
Referenz Thomas Berscheid TYPO3 Extension Template Slider jQuery CSS TypoScript TS Einbindung Standard Bildergalerie Text Inhalte CSS HTML Programmierung Köln
Referenz Thomas Berscheid TYPO3 Extension Template Slider jQuery CSS TypoScript TS Einbindung Standard Bildergalerie Text Inhalte CSS HTML Programmierung Köln
Referenz Thomas Berscheid TYPO3 Extension Template Slider jQuery CSS TypoScript TS Einbindung Standard Bildergalerie Text Inhalte CSS HTML Programmierung Köln

Slider für Reiseberichte

Für die Georgienseite gibt es sechs Rubriken mit Reiseberichten aus den Jahren 2001 bis 2015. Pro Jahr gibt es zwischen 5 und 13 Artikel mit Reiseberichten.

Diese Artikel sollten nun mehr Aufmerksamkeit durch den Einbau eines Sliders im Kopfbereich der Seite bekommen. Dieser sollte von der Übersicht der einzelnen Jahre auf die einzelnen Artikel vererbt werden. Der Slider sollte Überschrift, einen Kurztext, einen Link zu dem Reisebericht und ein Bild darstellen.

Der Inhalt der Slider wird sich in den kommenden Jahren nicht ändern. Daher sollten Texte und Bilder statisch eingebunden, aber im Quelltext einfach auffind- und pflegbar sein. Pflege in einer Datenbank ist nicht nötig. Das Programmieren einer Extension schied daher aus. 

Download Referenzliste als PDF

Extension Template für TYPO3 mit TypoScript

Startseite Reiseberichte 2013

Startseite Referenz Thomas Berscheid TYPO3 Extension Template Slider jQuery CSS TypoScript TS Einbindung Standard Bildergalerie Text Inhalte CSS HTML Programmierung Köln

Reiseberichte auf der Georgienseite Beispiel: Artikel aus dem Jahr 2013

Bilder im Dateisystem

Bilder Dateisystem fileadmin Referenz Thomas Berscheid TYPO3 Extension Template Slider jQuery CSS TypoScript TS Einbindung Standard Bildergalerie Text Inhalte CSS HTML Programmierung Köln

Die Bilder zur Darstellung im Slider sind im Filesystem von TYPO3 abgelegt. Die Struktur ist nach Jahren und Größen der Bilder geordnet. Verzeichnisse und Dateinamen sind auf Testsystem und produktiver Seite identisch.

Inhalt

Referenz Thomas Berscheid TYPO3 Extension Template Slider jQuery CSS TypoScript TS Einbindung Standard Bildergalerie Text Inhalte CSS HTML Programmierung Köln

Die Reiseberichte werden im Backend gepflegt. Für ein Textmodul mit jeweils einem Bild kommt wird je ein Datensatz gebildet. Überschrift und ein Teil des ersten Textblocks werden als Inhalt für den Slider verwendet. Die ID als Ziel für den Link ergibt sich aus der Navigation im Backend (hier: ID=122).

Inhalte in Template

Template Referenz Thomas Berscheid TYPO3 Extension Template Slider jQuery CSS TypoScript TS Einbindung Standard Bildergalerie Text Inhalte CSS HTML Programmierung Köln

Zur Darstellung der Slider ist das Objekt lib.reiseberichte in das Basis Template der Seite eingebaut. Dieses kann je nach redaktioneller Anforderung auch bei anderen Seiten mit Inhalten gefüllt werden.

Extension Template

Extensoin Template Referenz Thomas Berscheid TYPO3 Extension Template Slider jQuery CSS TypoScript TS Einbindung Standard Bildergalerie Text Inhalte CSS HTML Programmierung Köln

Für jede Übersicht der Reiseberichte eines Jahres wurde ein Extension Template angelegt

Extension Template TypoScript

Referenz Thomas Berscheid TYPO3 Extension Template Slider jQuery CSS TypoScript TS Einbindung Standard Bildergalerie Text Inhalte CSS HTML Programmierung Köln

 

Einbindung Basis Template

Referenz Thomas Berscheid TYPO3 Extension Template Slider jQuery CSS TypoScript TS Einbindung Standard Bildergalerie Text Inhalte CSS HTML Programmierung Köln

Das Extension Template bindet ein Basis-Template ein, das jeweils für die Reiseberichte eine Jahres erzeugt wird und die Daten zur Darstellung (Texte, Bilder) einbindet.

Einbindung CSS und JS

Referenz Thomas Berscheid TYPO3 Extension Template Slider jQuery CSS TypoScript TS Einbindung Standard Bildergalerie Text Inhalte CSS HTML Programmierung Köln

Das für den Slider benötigte Style Sheet und die beiden JavaScript-Bibliotheken werden über eine Typoscript-Datei eingebunden. Der Slider nutzt die jQuery-Anbindung, die in jeder Seite standardisiert bereitgestellt wird. Da sich bei der Übersicht der Reiseberichte ein Accordion-Menu in der Seite befindet, wurde darauf geachtet, dass sich beide Objekte nicht gegenseitig beeinflussen.

Einbindung Typoscript

Referenz Thomas Berscheid TYPO3 Extension Template Slider jQuery CSS TypoScript TS Einbindung Standard Bildergalerie Text Inhalte CSS HTML Programmierung Köln

Das Typoscript für die Inhalte der Slider wird nicht über den Editor in TYPO3 geladen, sondern über Dateien im Filesystem eingebunden.

TypoScript

Referenz Thomas Berscheid TYPO3 Extension Template Slider jQuery CSS TypoScript TS Einbindung Standard Bildergalerie Text Inhalte CSS HTML Programmierung Köln

Die Inhalte der Slider werden in Typoscript gepflegt. Dabei kommen TEXT- und IMAGE-Objekte zum Einsatz. Die Bilder werden über das Dateisystem verlinkt und über das Style Sheet des Sliders positioniert. Die Einbindung der Links zu der jeweiligen Zielseite erfolgt über die ID (hier: ID=122) und nutzt die Erweiterung RealURL für sprechende Links.

Einbindung der Inhalte

Referenz Thomas Berscheid TYPO3 Extension Template Slider jQuery CSS TypoScript TS Einbindung Standard Bildergalerie Text Inhalte CSS HTML Programmierung Köln

Die Inhalte der Slider werden über ein Basis-Template eingebunden. Dieses enthält den Source Code für den Slider, mit dem das Fading zwischen den Inhalten erzeugt wird.

TYPO3: Wir geben acht auf die Georgienseite
Thomas Berscheid ‣ 27.06.2017, 02:00:00
Im Frühjahr 2017 haben wir sehr viel Arbeit in den Relaunch der Georgienseite gesteckt. Nach 17 Jahren war es Zeit für eine Generalüberholung.
Chinkali: So geht SEO!
Thomas Berscheid ‣ 22.05.2017, 13:03:00
Erfolgreiche Suchmaschinenoptimierung für Georgienseite. SEO für 350 Seiten und 1.850 Bilder bringt Webseite bei Google nach oben.
Georgische Übersetzungen nun mit eigener Domain online
Thomas Berscheid ‣ 01.03.2017, 14:50:00
Georgische Übersetzungen: Neue Webseite rückt Handwerk der Übersetzerin stärker in den Mittelpunkt
Georgisch Dolmetschen jetzt mit eigener Webseite
Thomas Berscheid ‣ 27.02.2017, 22:54:00
Weitere Domain der Internetagentur Irma Berscheid-Kimeridze seit wenigen Tagen im Netz. Georgisch Dolmetschen mit eigener Webseite erreichbar.
SEO wirkt weiter – Georgisch.Com auf Seite 1 bei Google
Thomas Berscheid ‣ 22.02.2017, 10:23:00
Webseite von Irma Berscheid-Kimeridze nach Relaunch und Suchmaschinenoptimierung auf Seite 1 bei Google Suchergebnissen
^