Zum Inhalt springen

Kostenloses TYPO3 Template (Musterprojekt) für TYPO3 12 LTS

Kostenloses "Best Practice" Template, individuell anpassbar mit vielen Anleitungen. Frei verfügbar als Download oder vorinstalliert im Hosting Paket mit Support von Experten.

TYPO3 Version:12 LTS

Mit dem kostenlosen TYPO3 Template kann man sofort mit dem Erfassen von Inhalten beginnen, die Webseite ist in kürzester Zeit online. Man muss sich nicht um Design, Templates oder TypoScript Code kümmern.

So sieht es aus: Live-Version unseres TYPO3 Templates

Das TYPO3 Template steht als kostenloser Download für interessierte Anwender bereit. So kannst du das Template für TYPO3 CMS auch bei anderen Providern installieren. In diesem Fall musst du dann leider auf unseren Support verzichten. Alternativ buchst du einfach unseren kostenlosen TYPO3 Developer Tarif unverbindlich für 3 Monate. Dort ist das Template (wie in allen unseren Hosting Paketen) bereits vorinstalliert und du kannst sofort loslegen.

Aktuelle Version des TYPO3 Templates herunterladen (tar.gz Archiv)

TYPO3 CMS 12 LTS benötigt mindestens PHP 8.1 und MySQL 8.0 bzw. MariaDB 10.3. 

Die Vorlage ist individuell anpassbar und kann beliebig erweitert werden. 

Das Template bietet:

  • Responsive Webdesign, geeignet für Desktop, Smartphone und Tablet
  • optimiert für Suchmaschinen 
  • vorbereitet für Barrierefreiheit
  • Beispiele für alle Standard Inhaltselemente
  • optimiert für kurze Ladezeiten und Barrierefreiheit
  • aktueller Stand der Technik
  • optisch und funktional individuell anpassbar

Es kann als Grundlage für eine eigene Website verwendet werden und stellt ein "Best practice" Beispiel dar. Hier kannst du lernen, wie man ein TYPO3-Projekt aufsetzt. Es soll dabei keine Design-Vorlage sein, sondern eine Projektvorlage. Das Design kannst du beliebig an eigene Vorstellungen anpassen.

    Das TYPO3 Template nutzt TYPO3 CMS Version 12 LTS. Dadurch ist bis mindestens Ende April 2026 (mit verlängertem Support bis April 2029) ein Betrieb ohne Relaunch möglich. 

    Unser Template gibt es bereits seit 2008. Mit jeder TYPO3 CMS Version ist es überarbeitet und verbessert worden. Hier findest du Informationen über die Geschichte unserer Vorlage.

    Überlick über das TYPO3 Template

    Wir haben das Template bewusst schlank gehalten und nur die am häufigsten verwendeten Funktionen vorinstalliert:

    • Anzeige von aktuellen Meldungen (Extension: news)
    • Flexible mehrspaltige Ausgabe des Inhalts (Extension: container)
    • Optimiert für Indexierung in Suchmaschinen (SEO) inklusive Vorschau der Anzeige als Google Snippet
    • Unterstützung bei der Suchmaschinenoptimierung der Website
    • Lightbox-Effekt für das Klick-Vergrößern von Bildern
    • Konfigurierbarer Cookie Consent Manager

    In der Version 12 des TYPO3 Templates haben wir nicht nur bestehende Funktionen verbessert, sondern auch viele neue Features hinzugefügt.

    Da wäre zum Beispiel

    • Barrierefreier Aufbau der Webseite
    • Neues Inhaltselement: Heroimage für Text über Bild
    • Responsive Images und verschiedene Crop-Varianten für Bilder 
    • Raster-Container für Inhalte 
    • Auf-/Zuklappbare Inhaltselemente
    • und vieles mehr

    Natürlich hat sich auch "unter der Haube" vieles getan, da wir in der Programmierung die neuen Möglichkeiten von TYPO3 12 LTS nutzen, wie zum Beispiel auch die neuen Asset Collectors.

    Du hast Anregungen und Verbesserungsvorschläge für unser Template? Kontaktiere uns einfach unter hosting(at)jweiland.net 

    Was kostet das TYPO3 Template von jweiland.net?

    Das Template ist bei allen neuen TYPO3 Hosting-Paketen von jweiland.net im Preis enthalten und bereits vorinstalliert. Es kann von dieser Webseite kostenlos heruntergeladen und verwendet werden (Downloadlink siehe weiter oben)

    Das TYPO3 Template selbst installieren

    Bei Bestellung eines Hosting Tarifs (auch beim kostenlosen Developer Tarif), wird das TYPO3 Template von uns bereits fertig installiert. 

    Falls du das Template in einem bestehenden Hosting Paket nachträglich installieren möchtest, zeigen wir Dir alle notwendigen Schritte im folgenden Video.

    Folgende Schritte sind sind für die Installation notwendig:

    1. Eine neue Datenbank (MariaDB) über das Kundenmenü (Plesk) anlegen 
    2. Anmeldung per SSH auf dem Webserver (Anleitungen für Windows, MacOS und Linux)
    3. Ggf. TYPO3-Quellcode entpacken (typo3_src-12.4.x.tar.gz)
    4. Archiv (sitepackage-12.4.x.tar.gz) entpacken
    5. Parameter für Zugriff auf Datenbank in typo3conf/system/settings.php anpassen
    6. Datenbankdatei typo3conf/sitepackage.sql in die neue, leere Datenbank importieren
    7. Ggf. Symlink auf TYPO3 12.4.x Quellcode anpassen/anlegen
    8. Domain auf Startverzeichnis zeigen lassen
    9. In TYPO3 Backend einloggen (User: typo3-admin, Passwort: Password1!)
      Nach der Installation unbedingt das Passwort ändern!
    10. Site-Konfiguration aufrufen und Domainnamen anpassen 

    Benutzername und Passwort ändern

    Aus Sicherheitsgründen raten wir dringend dazu, den Benutzernamen und das Passwort des Standard-Benutzerkontos direkt nach der ersten Anmeldung im Backend zu ändern! Das Passwort kann im System Modul unter Benutzereinstellungen geändert werden.

    Das Passwort muss die folgenden Anforderungen erfüllen:

    Mindestlänge: 8 Zeichen
    Mindestens ein Zeichen in Großbuchstaben
    Mindestens ein Kleinbuchstabe
    Mindestens eine Ziffer
    Mindestens ein Sonderzeichen
    Muss sich vom aktuellen Passwort unterscheiden

    Sprache des Backends ändern

    Das TYPO3-Backend kann in vielen verschiedenen Sprachen genutzt werden. Englisch und Deutsch sind schon vorinstalliert, aber auch weitere Sprachen können sehr einfach vom Administrator nachinstalliert werden.

    Übrigens kann jeder Backendbenutzer seine bevorzugte Sprache in den Benutzereinstellungen einstellen. 

    Optische Anpassungen des Layouts mit CSS

    Wenn du zum Beispiel Farben oder Schriftarten des TYPO3 Templates verändern willst, kannst du das am einfachsten über eine spezielle CSS-Datei mit Variablen machen. Diese befindet sich im Sitepackage unter

    /typo3conf/ext/jwsitepackage12/Resources/Public/Css/CssVariables

    Um Zugriff auf diese Datei mit CSS Variablen vom Backend aus in der Dateiliste zu bekommen, musst du im Web-Modul: Liste einen Dateispeicher neu anlegen und den oben stehenden Pfad in das Feld "Basispfad" eintragen (siehe Screenshot). Danach kannst du die Datei im Datei-Modul editieren (siehe Screenshot).

    Falls du Sass/SCSS benützt, kannst du die entsprechenden Dateien in der Sitepackage-Extension unter

    EXT:jwsitepackage12/Resources/Private/Sass

    bearbeiten.

    Individuelle Anpassungen im Konstanten-Editor

    Viele Funktionen und Ausgabeoptionen des TYPO3 Templates lassen sich bequem im Backend über den Konstanten-Editor steuern. Auf den Konstanten-Editor hast du folgendermaßen Zugriff:

    1. Klicke im Site Management Modul auf "TypoScript".
    2. Klicke im Seitenbaum die Seite "Home" an.
    3. Wähle gegebenenfalls in der Auswahlbox, im Hauptbereich oben links, den "Konstanten-Editor" aus.
    4. Wähle in der Kategorieauswahl "jweiland.net TYPO3 Sitepackage" aus.

    Die verschiedenen Einstellungsoptionen sind im diesem Konstanten-Editor beschrieben und können bei Bedarf individuell angepasst werden. Es folgen ein paar Beispiele.

    Das Logo im Kopfbereich austauschen

    Oben links auf jeder Seite findest du ein Logo, das auch immer automatisch auf die Startseite verlinkt ist. Um unser Beispiel-Logo auszutauschen, gehe wie folgt vor:

    1. Lade über das Datei Modul unter "Dateiliste" deine Logo-Datei hoch (Dateiformat JPG, PNG oder SVG empfohlen). Lege dafür bei Bedarf noch einen passenden Ordner an, um deine Dateien zu organisieren.
    2. Klicke im Site Management Modul auf "TypoScript".
    3. Klicke im Seitenbaum die Seite "Home" an.
    4. Wähle den "Konstanten-Editor" und in der Kategorieauswahl "jweiland.net TYPO3 Sitepackage" aus.
    5. Scrolle nach unten zum Abschnitt "Layout".
    6. Klicke neben dem Feld "Logo" auf das Stiftsymbol um die Bearbeitung zu aktivieren.
    7. Trage hier den Pfad zu deiner Logodatei ein (zum Beispiel fileadmin/logos/mein_logo.png).
    8. Klicke oben auf die Schaltfläche "Speichern".

    Firmenname anpassen

    Einer der ersten Schritte bei der Anpassung des TYPO3 Templates sollte die Änderung des Firmennamens sein. Dieser ist zum Beispiel ganz unten im Fußbereich jeder Seite zu sehen. Natürlich kannst du statt einem Firmennamen hier auch deinen persönlichen Namen oder einen beliebigen anderen Text eingeben.

    Führe folgende Schritte durch:

    1. Klicke im Site Management Modul auf "TypoScript".
    2. Klicke im Seitenbaum die Seite "Home" an.
    3. Wähle den "Konstanten-Editor" und in der Kategorieauswahl "jweiland.net TYPO3 Sitepackage" aus.
    4. Klicke neben dem Feld "Firmenname" auf das Stiftsymbol um den Inhalt des Feldes bearbeiten zu können.
    5. Klicke zum Abschluss oben auf die Schaltfläche "Speichern"

    Favicon und Appicon austauschen

    Favicons sind kleine Bilder, die z.B. in der Browsertitelzeile / Browsertab angezeigt werden. Üblicherweise wird hier ein Firmenlogo oder ähnliches verwendet.

    Das TYPO3 Template ist zur Verwendung individueller Favicons vorbereitet. Außerdem werden dabei auch sogenannte Touch-Icons (App-Icons) für Smartphones und Tablets erzeugt.

    Beide Arten von Icons können ganz einfach über den Konstanten-Editor ausgetauscht werden.

    Bitte beachten:

    • Die Bilddatei für das Favicon und die Standard-Touch-Icons muss quadratisch sein.
    • Die zweite Variante des Bildes, die v.a. für Windows-Phones nützlich ist, benötigt ein Seitenverhältnis von 31:15, zum Beispiel: Breite 310 px, Höhe 150 px
    • Verwende eine Bilddatei im PNG oder JPG-Format. PNG wird empfohlen. Da im TYPO3 Template dynamisch verschiedene Varianten erstellt werden, funktionieren hier die klassischen ICO-Dateien nicht. Diese werden heutzutage aber auch nicht mehr benötigt.

    Um die Dateien anzupassen, gehe wie folgt vor:

    1. Klicke im Site Management Modul auf "TypoScript".
    2. Klicke im Seitenbaum die Seite "Home" an.
    3. Wähle den "Konstanten-Editor" und in der Kategorieauswahl "jweiland.net TYPO3 Sitepackage" aus.
    4. Scrolle nach unten bis zum Bereich "Layout".
    5. Klicke auf das Stiftsymbol bei "App-/Favicon Quadratisch" bzw. "App-/Favicon Breit", um das Eingabefeld zu aktivieren.
    6. In das Eingabefeld trägst du den Pfad zu deiner Bilddatei ein. Diese kann unterhalb von fileadmin/ liegen oder auch in einer eigenen Extension:
      • Beispiel für fileadmin: fileadmin/meinverzeichnis/bilder/appicon-square.png
      • Beispiel für eine Extension: EXT:meineextension/Resources/Public/Icons/appicon-square.png
    7. Zum Abschluss klicke oben auf "Speichern".
    8. Sollte die Änderung nicht sofort sichtbar sein, musst du den Frontend-Cache und auch deinen Browser-Cache löschen.

    Navigationsvarianten

    Als Standard wird eine horizontale Navigation verwendet. Sofern eine Seite weitere Unterseiten hat, werden diese als ein sogenanntes "Drop-Down-Menü" angezeigt.

    Zusätzlich können über den Konstanten-Editor verschiedene Varianten aktiviert werden:

    • Horizontale Navigation (Standard)
    • Vertikale Navigation
    • Horizontale und vertikale Navigation

    Zusätzlich kann beim horizontalen Menü über den Navigationstyp das sogenannten "Mega-Menü" gewählt werden.

    Führe folgende Schritte durch um die Standardnavigation zu ändern:

    1. Klicke im Site Management Modul auf "TypoScript".
    2. Klicke im Seitenbaum die Seite "Home" an.
    3. Wähle den "Konstanten-Editor" und in der Kategorieauswahl "jweiland.net TYPO3 Sitepackage" aus.
    4. Unterhalb "Einstellungen für Navigation" stehen die Felder zur Auswahl zur Verfügung
    5. Klicke zum Abschluss oben auf die Schaltfläche "Speichern"

    Das Sprachmenü ausblenden

    Das TYPO3 Template wird in 2 Sprachen ausgeliefert (Deutsch, Englisch). Solltest du deine Website jedoch nur einsprachig betreiben, kannst du das Sprachmenü ausblenden.

    Führe folgende Schritte durch um das Sprachmenü auszublenden:

    1. Klicke im Site Management Modul auf "TypoScript".
    2. Klicke im Seitenbaum die Seite "Home" an.
    3. Wähle den "Konstanten-Editor" und in der Kategorieauswahl "jweiland.net TYPO3 Sitepackage" aus.
    4. Unterhalb "Einstellungen für Navigation" das Feld "Sprachmenü anzeigen" deaktivieren.
    5. Klicke zum Abschluss oben auf die Schaltfläche "Speichern"

    Die Suchfunktion ausblenden

    Im TYPO3 Template haben wir auch eine Suchfunktion für die Website integriert. Dabei verwenden wir die Standard-Extension "indexed_search". (Es gibt noch weitere, teilweise leistungsfähigere Such-Extensions wie zum Beispiel "ke_search" oder "solr").

    Führe folgende Schritte durch um die Suchfunktion auszublenden:

    1. Klicke im Site Management Modul auf "TypoScript".
    2. Klicke im Seitenbaum die Seite "Home" an.
    3. Wähle den "Konstanten-Editor" und in der Kategorieauswahl "jweiland.net TYPO3 Sitepackage" aus.
    4. Unterhalb "Einstellungen für Navigation" das Feld "Suchfeld anzeigen" deaktivieren
    5. Klicke zum Abschluss oben auf die Schaltfläche "Speichern"

    Fixed Header

    Das TYPO3 Template wird mit einem festen Headerbereich ausgegeben. Das bedeutet, dass beim Scrollen der Webseite dieser immer sichtbar bleibt. Wenn dies nicht gewünscht ist, kann man dies deaktivieren.

    Führe folgende Schritte durch um den Fixed Header zu deaktivieren:

    1. Klicke im Site Management Modul auf "TypoScript".
    2. Klicke im Seitenbaum die Seite "Home" an.
    3. Wähle den "Konstanten-Editor" und in der Kategorieauswahl "jweiland.net TYPO3 Sitepackage" aus.
    4. Unterhalb "Layout" das Feld "Fester Headerbereich" deaktivieren
    5. Klicke zum Abschluss oben auf die Schaltfläche "Speichern"

    Einblenden der Inhalte beim Scrollen

    Beim Scrollen einer Seite blenden sich die Inhaltselemente langsam ein. Wenn dies nicht gewünscht ist, kann man es deaktivieren.

    Führe folgende Schritte durch um das Einblenden der Inhalte zu deaktivieren:

    1. Klicke im Site Management Modul auf "TypoScript".
    2. Klicke im Seitenbaum die Seite "Home" an.
    3. Wähle den "Konstanten-Editor" und in der Kategorieauswahl "jweiland.net TYPO3 Sitepackage" aus.
    4. Unterhalb "Layout" das Feld "Einblenden der Inhaltselemente" deaktivieren
    5. Klicke zum Abschluss oben auf die Schaltfläche "Speichern"

    RSS Feed für News einblenden

    Das TYPO3 Template liefert für News-Artikel einen RSS-Feed aus. Besucher können diesen Abonnieren, um so immer über neue Artikel auf dem Laufenden zu bleiben.

    Wenn du diesen Feed für deine News-Artikel nutzen möchtest, musst du diesen über den Konstanten-Editor konfigurieren. Außerdem kannst du über eine Konstante den Feed generell aus- oder einschalten.

    Angepasst werden müssen:

    • Der Titel des RSS-Feeds
    • Die Beschreibung
    • Der Domainname der Website, inklusive Protokoll (http oder https)

    Wenn das RSS Icon mit den Social Media Icons als Inhaltselement (Menü der Unterseiten mit Layout "Social Media Links von Seiten" ) ausgegeben werden soll, dann aktiviere im Kontstanten-Editor noch "RSS Icon in Social Media Icons Inhaltselement".

    Seitenlayouts

    Das TYPO3 Template liefert verschiedene Seiten-Layouts mit um die redaktionellen Inhalte in einer gewissen Struktur darstellen zu können. Diese können in den Seiteneigenschaften unter Reiter Erscheinungsbild, Backend-Layout redaktionell geändert werden.

    Zusammen mit der mehrspaltigen Optionen der Extension Container lassen sich ein Großteil der gängigen Layoutanforderungen abdecken. 

    Beispiele anschauen

    Fußbereich bearbeiten und anpassen

    Im Fußbereich (Footer) der Website können beliebige Inhaltselemente ausgegeben werden. Diese werden zentral auf einer speziellen Seite gepflegt und automatisch auf der gesamten Website angezeigt.

    Redaktionell ist es möglich in den Seiteneigenschaften unterhalb des Reiters "Erscheinungsbild" zwischen einem ein-, zwei- oder dreispaltigen Layout (Backend-Layout) zu wählen.

    Socialmedia Icons

    Wenn du auf deiner Webseite zu Socialmedia Kanälen verlinken möchtest, steht dir hierfür ein extra Layout "Social Media Links von Seiten" im Menü "Unterseiten" zur Verfügung. Auf der Seite Footer Inhalt ist dieses Inhaltselement bereits eingefügt.

    Einige Socialmedia Seiten unterhalb der Seite "SocialMedia Links" sind für dich bereits vorbereitet.
    In den Seiteneigenschaften ist für jede Seite ein entsprechendes Icon unterhalb des Reiters Ressourcen hinterlegt. 

    Du musst lediglich in den Seiteneigenschaften den Seitentyp auf Externe Seite umstellen und den individuellen Link auf deinen SocialMedia Kanal hinterlegen.

    Seiten für Meta-Navigation im Footer

    Im Fußbereich der Seite siehst du eine sogenannte "Meta-Navigation" mit Links auf verschiedene Seiten (Home, Kontakt, Impressum, Datenschutz). Diese Seiten können im Backend unterhalb "Metamenu" editiert, gelöscht und durch weitere Seiten ergänzt werden. Bitte beachte, dass die Seiten Impressum und Datenschutz mit individuellen Informationen angepasst werden müssen.

    Suchmaschinenoptimierung (SEO)

    In TYPO3 12 LTS benötigt man im Prinzip keine zusätzliche Extension mehr für grundlegende SEO-Funktionen. So gehören die manuelle Anpassung des Seitentitels, die Steuerung der Indexierung durch Suchmaschinen sowie die Generierung des Canonical-Tags zu den Standardfunktionen.

    In den Seiteneigenschaften findest du einen Tab "SEO"

    • Titel für Suchmaschinen: hier kannst du den automatisch generierten Seitentitel (<title>-Tag im HTML) manuell überschreiben
    • Robot-Anweisungen:
      • Index dieser Seite: steuert, ob Suchmaschinen die aktuelle Seite indexieren oder nicht (Meta-Tag robots="noindex" oder "index" im HTML)
      • Dieser Seite folgen: steuert, ob Suchmaschinen-Bots den Links auf der aktuellen Seite folgen oder nicht (Meta-Tag robots="follow" oder "nofollow" im HTML)

    Wir haben als Hilfe zur leichteren "On Page"-Suchmaschinenoptimierung die Extension "yoast_seo"  im TYPO3 Template hinzugefügt. "On Page" bedeutet: Maßnahmen, die man selber auf seiner Seite durchführen kann. So erkennt der Redakteur sofort was getan werden muss, um die Webseite für Suchmaschinen zu optimieren.

    Die Extension analysiert zum Beispiel den Text einer Seite auf Lesbarkeit und gibt auch Tipps zur Verbesserung. Außerdem wird geprüft, ob in den Seiteneigenschaften das Feld "Beschreibung" genutzt wird, denn daraus wird das wichtige description-Metatag generiert, oder ob der Titel der Seite in Ordnung ist. Die Extension hat noch weitere Funktionen, wir empfehlen, die Dokumention dazu sorgfältig zu lesen.

    Zur Suchmaschinenoptimierung und Barrierefreiheit gehört auch, dass für jede Datei, die auf der Webseite eingebunden wird, die Meta-Daten ausgefüllt werden.
    Für jede Datei, die im Backend genutzt wird, können diese Meta-Daten verwaltet werden. Meta-Daten können zum Beispiel ein "Alternativer Text" für Bilder sein oder eine Copyright-Information. Teilweise werden diese Metadaten auch automatisch im Frontend ausgegeben, sofern Sie vorhanden sind.

    Es gibt zwei Wege, diese Meta-Daten zu pflegen:

    1. pro Inhaltselement an den dort verwendeten Dateien
    2. global über das Dateiliste-Backendmodul

    Der globale Weg hat den Vorteil, dass du diese Daten nur einmal pro Datei pflegen musst. Wenn du die Datei dann in einem Inhaltselement verwendest (auch mehrfach auf verschiedenen Seiten), werden automatisch die global gepflegten Meta-Daten genutzt.

    Trotzdem hast du natürlich die Möglichkeit, pro Inhaltselement die globalen Meta-Daten bei Bedarf auch lokal zu überschreiben.

    Crop Varianten für Bilder in Inhaltselementen

    Im TYPO3 Template nutzen wir das "Responsive Image Rendering". Das bedeutet: je nach Endgerät, mit dem die Website betrachtet wird, wird ein in der Größe für dieses Gerät optimiertes Bild ausgeliefert. Der Browser eines Smartphones bekommt also ein kleineres Bild geliefert als der Browser auf einem Desktop-Rechner. 

    Dadurch wird die Performance der Website extrem verbessert, denn es macht natürlich wenig Sinn, große Bilder (= große Datenmengen) an Geräte auszuliefern, die die Bilder sowieso nur kleiner darstellen können.

    Als Anwender musst Du dich aber darum überhaupt nicht kümmern, das erledigt TYPO3 vollautomatisch im Hintergrund.

    Wenn der Haken unter "Synchronisiere cropArea" gesetzt ist, nimmt das System für alle Bildschirmauflösungen die unter Desktop gewählte Einstellung. Soll der Bildausschnitt je nach Bildschirmbreite (Desktop, Tablet, Smartphone) unterschiedlich sein, so muss der Haken unter "Synchronisiere cropArea" entfernt werden. Dann kannst du im Editor die Ausschnitte für jedes Bild individuell konfigurieren.

    Bildergalerie mit quadratischen Vorschaubildern

    Um eine Bildergalerie mit TYPO3 umzusetzen, braucht man eigentlich keine Extension. Das geht auch sehr gut mit Bordmitteln.

    Um die Darstellung solcher Galerien ein wenig zu verbessern, haben wir die Option eingebaut, quadratische Vorschaubilder der Bilder anzuzeigen. In der Lightbox durch anklicken der Bilder, werden diese in Ihrem original Seitenverhältnis ausgegeben.

    So wird es gemacht:

    • Wähle das Inhaltselement Text & Medien aus
    • Füge deine Bilder unterhalb des Reiters Medien ein. Diese Bilder werden automatisch in der Vorschau quadratisch ausgegeben. Wenn der Ausschnitt nicht passt, kannst du ihn im Bildbearbeitung Editor mit der Wahl des Verhältnisses 1:1 ändern
    • Setze die "Spaltenanzahl" auf 3 oder 4 und hake "Bei Klick vergrößern" an
    • Wähle unterhalb des Reiters Erscheinungsbild -> "Layout" die Option "Galerie mit quadratischen Vorschaubildern" aus
    • Speichern und fertig

    Inhaltselement auf- und zuklappen

    Eine in Kundenprojekten oft gewünschte Funktion ist im Template integriert: die Möglichkeit, Inhaltselemente im Frontend auf- und zuklappbar darzustellen.

    Gerade bei langen Texten oder vielen Inhalten auf einer Seite hast du so eine Option, die Texte übersichtlicher zu gestalten.

    Außerdem haben wir die Möglichkeit integriert, Inhaltselemente nur auf Smartphones, also kleinen Bildschirmen, auf- und zuklappbar darzustellen. Auf größeren Bildschirmen werden diese Inhaltselemente "normal" dargestellt.

    Hero Image

    Im TYPO3 Template haben wir ein Inhaltselement hinzugefügt, welches dem Redakteur ermöglicht Text in verschiedenen Varianten über ein Bild zu positionieren. Die Einstellungen können im Inhaltselement unterhalb des Reiters "Erscheinungsbild" > "Layout" und "Rahmen" gemacht werden.

    • Text links
    • Text mittig
    • Text rechts
    • Text auf dunklem Hintergrund
    • Text auf hellem Hintergrund
    • Text ohne Hintergrund

    Da Bildhöhe und Textlänge in der Ausgabe aufeinander abgestimmt sein müssen, gibt es die Option im Konstanten-Editor die maximale Textlänge für Redakteure zu begrenzen.

    1. Klicke als Administrator im Site Management Modul auf "TypoScript".
    2. Klicke im Seitenbaum die Seite "Home" an.
    3. Wähle den "Konstanten-Editor" und in der Kategorieauswahl "jweiland.net TYPO3 Sitepackage" aus.
    4. Unterhalb "Layout" das Feld "Maximale Buchstabenanzahl für Text auf Heroimage" Zeichenanzahl anpassen
    5. Klicke zum Abschluss oben auf die Schaltfläche "Speichern"

    Erweiterung News für Nachrichten

    Mit der mitgelieferten Erweiterung "News" lassen sich Nachrichten-, Blog-Artikel oder ähnliches pflegen.

    Ein News-Artikel besteht mindestens aus einer Überschrift, normalerweise dann noch aus einem Teaser-Text und dem eigentlichen Nachrichten-Text. Zusätzlich können Artikeln zum Beispiel noch Bilder, Dateien, relevante Links und mehr hinzugefügt werden.

    News-Artikel unterscheiden sich von normalen Inhaltselementen dadurch, dass sie in der Regel zentral an einer Stelle in einem Verzeichnis, gesammelt werden. Die Ausgabe der Artikel auf der Website wird durch das Inhaltselement News mit verschiedenen Typen gesteuert.

    Verschiedene Listen-Ansichten für News-Artikel

    Die News-Extension liefert von Haus aus eine Listen-Ansicht für News-Artikel mit. Zusätzlich haben wir im TYPO3 Template zwei weitere Darstellungsarten konfiguriert:

    • eine reduzierte Listenansicht, die zum Beispiel auf der Startseite der Website für die neuesten Meldungen genutzt werden kann
    • eine Karten-Ansicht, die als Alternative zur Standard-Ansicht genutzt werden kann.

    In jedem News-Plugin kann die gewünschte Darstellungsart unterhalb des Reiters "Plug-In" unter "Erweiterungsoptionen" "Vorlage" "Template-Layout" gewählt werden.

    Hinweis zur Extension news_administration: Wir binden keine kostenpflichtigen Extensions in unser SitePackage ein. Deshalb steht diese Funktion nicht zur Verfügung.

    Konfiguration der Webseite

    Über das Modul "Site Management" im Bereich "Site-Konfiguration" lassen sich einige Grundeinstellungen für die Website vornehmen. Diese musst du für deine Webseite individuell anpassen.

    • Allgemein: ID der Startseite, Titel der Webseite, Domain
    • Sprachen: weitere Sprachen hinzufügen oder nicht genutzte entfernen
    • Fehlerbehandlung: Konfigurieren was bei einem HTTP-Fehler-Status-Code geschehen soll.
      Voreingestellt ist eine 404-Fehlerseite die erscheint, wenn Nutzer eine ungültige URL aufrufen.
    • Statischen Routen: hier ist die robots.txt hinterlegt, welches die Durchsuchbarkeit der Webseite für Suchmaschinen definiert. 
      Ein neu installiertes TYPO3 Template kann nicht durch Google oder andere Suchmaschinen indexiert werden. Das wird durch Einträge in einer Datei namens robots.txt verhindert. Beim Livegang sollten die Einstellungen angepasst werden.

    Den Cookie Consent Manager konfigurieren

    Obwohl TYPO3 in der Standardkonfiguration im Frontend gar keine Cookies setzt, haben wir ein Tool integriert, mit dem den Besuchern der Website ein sogenanntes "Cookie-Banner" angezeigt wird. Sofern Cookies durch die Seite gesetzt werden sollen, haben die Besucher damit die Möglichkeit, der Nutzung einzelner oder aller Cookies zuzustimmen, oder Cookies generell abzulehnen.

    In einem neu installierten TYPO3 Template wird die Zustimmung zu Cookies von Youtube oder Vimeo abgefragt, da wir auf einer Demo-Seite auch ein Vimeo-Video einbinden.

    Über den Konstanten-Editor kannst du das Verhalten des Cookie-Banners steuern. So kannst du es auch ganz deaktivieren, falls deine Website keine Drittanbieter-Cookies setzt.

    Hinweis: Cookies zur Anmeldung im Backend oder Frontend sind technisch notwendige Cookies, auf die nicht gesondert hingewiesen werden muss.

    Außerdem haben wir den Cookie Manager schon für gängige Tools vorkonfiguriert. Du musst nur in den Konstanten entsprechende Angaben ergänzen, um folgende Tools zu nutzen:

    • Matomo
    • Google Analytics
    • Facebook Pixel
    • Twitter
    • Youtube / Vimeo

    Den Cookie Consent Manager übersetzen

    Natürlich kannst du beliebige weitere Sprachen hinzufügen. Dann müssen allerdings bei Bedarf auch die Texte im Consent Manager übersetzt werden. Dazu musst du per SSH oder FTP die Datei

    typo3conf/ext/jwsitepackage12/Resources/Private/Page/Partials/Klaro.html

    bearbeiten.

     

    Was ist der Cache und warum muss er ab und zu gelöscht werden

    Um die Auslieferung einer Website zu beschleunigen, verwendet TYPO3 verschiedene Cache-Mechanismen. Bei dem Cache handelt es sich um eine Art Zwischenspeicher, damit TYPO3 nicht bei jedem Frontend-Aufruf die angeforderte Seite neu erzeugen muss.

    Der Cache einer Seite wird automatisch gelöscht, wenn ein Redakteur auf einer Seite ein Inhaltselement neu speichert. 

    Im Backend kann man den Seitencache als Redakteur löschen, indem man auf das Blitz Icon klickt.

    Wie sieht es mit Updates aus?

    Das Projekt wird kontinuierlich weiter entwickelt. Die aktuelle Version 1.0.5 des Templates vom April 2024 basiert auf TYPO3 Version 12 LTS und steht in den Cloud Hosting Paketen automatisch zur Verfügung.

    Beachte jedoch: bestehende Installationen können nicht automatisch aktualisiert werden, da jeder Kunde individuelle Änderungen an den Dateien des TYPO3 Templates durchführen kann. Bei automatischen Updates würden diese Änderungen überschrieben werden.

    Damit du bei Bedarf neue Funktionen oder Fehlerbehebungen nachrüsten kannst, protokollieren wir alle wichtigen Änderungen im Änderungsprotokoll.

    Update des TYPO3 Templates durchführen

    Wenn du bisher das Musterprojekt 11 genutzt haben, kannst du natürlich ein Upgrade auf TYPO3 Version 12 durchführen. 

    Nach dem erfolgreichen Upgrade gibt es dann zwei Möglichkeiten:

    1. Du nutzt die Musterprojekt-Extension, Version 11 (jwmusterprojekt11), weiter in TYPO3 V12

    Vorteile:

    • Du hast eine aktuelle TYPO3 Version
    • Falls du an den Dateien des Musterprojekts 11 eigene Anpassungen durchgeführt hast (CSS, TypoScript, Fluidtemplates etc.) sind diese Anpassungen nach wie vor vorhanden und die Website funktioniert im Frontend einfach weiter wie zuvor

    Nachteile:

    • Du kannst die neuen Funktionen des Sitepackages für die Version12 (jwsitepackage12) nicht nutzen.

    2. Du tauscht die Sitepackage Extension Version 11 (jwmusterprojekt11) gegen die Version 12 aus (jwsitepackage12).

    Vorteile:

    • Du hast ebenfalls eine aktuelle TYPO3-Version
    • Du hast alle neuen Funktionen des Sitepackages V12 

    Nachteile:

    • Sofern du eigene Anpassungen an Dateien des Musterprojekts V11 durchgeführt hast (CSS, TypoScript, Fluidtemplates etc.), musst du diese Anpassungen manuell in die entsprechenden Dateien des Sitepackages V12 übernehmen. Ein automatische Migration ist nicht möglich.

    Beide Varianten haben also Vor- und Nachteile, und du müssen für sich selber entscheiden, welche Variante du wählst. Natürlich können wir dich dabei unterstützen!

    Das SitePackage in einer Composerumgebung nutzen

    Da unser SitePackage auf einem nicht öffentlichen Server liegt, kann das SitePackage derzeit nicht über packagist.org oder ein individuelles Repository heruntergeladen werden. Mit den folgenden Schritten können Sie aus dem SitePackage eine Composer-fähige Version erstellen:

    1.) Laden Sie sich das SitePackage tar.gz herunter oder verwenden Sie das tar.gz, das sich bereits auf Ihrem Server befindet.

    2.) Da TYPO3 12 mindestens PHP 8.1 benötigt, passen Sie die PHP-Version für die Konsole entsprechend an.

    3.) Installieren Sie TYPO3 12.4

    composer create-project typo3/cms-base-distribution:"^12" site-package

    4.) Wechseln Sie in das Verzeichnis site-package:

    cd site-package

    5.) Fügen Sie das Paket indexed-search hinzu:

    composer req typo3/cms-indexed-search:^12.4

    6.) Erstellen Sie die Verzeichnisstruktur für nicht composer-basierte Extensions:

    mkdir -p Source/Extensions

    7.) Entpacken Sie das SitePackage:

    tar -xzf sitepackage-12.4.8.tar.gz

    8.) Kopieren Sie aus dem entpackten SitePackage das Verzeichnis sitepackage-12lts/typo3conf/ext/jwsitepackage12 in das soeben erstelle Verzeichnis Source/Extensions

    9.) Kopieren Sie aus dem entpackten SitePackage das Verzeichnis sitepackage-12lts/typo3conf/sites in das Verzeichnis typo3cms/site-package/config

    10.) Editieren Sie die Datei typo3cms/site-package/config/sites/main/config.yaml und passen Sie die erste Zeile an Ihren Domainnamen an.

    11.) Kopieren Sie aus dem entpackten SitePackage das Verzeichnis sitepackage-12lts/typo3conf/system in das Verzeichnis typo3cms/site-package/config

    12.) Editieren Sie die Datei typo3cms/site-package/config/system/settings.php und passen Sie die Datenbank Parameter an.

    13.) Kopieren Sie aus dem entpackten SitePackage das Verzeichnis sitepackage-12lts/fileadmin in das Verzeichnis typo3cms/site-package/public

    14.) Kopieren Sie aus dem entpackten SitePackage das Verzeichnis sitepackage-12lts/uploads in das Verzeichnis typo3cms/site-package/public

    15.) Fügen Sie das Verzeichnis Source/Extensions als Repository in die typo3cms/site-package/composer.json hinzu:

    "repositories": {
    	"0": {
    		"type": "path",
    		"url": "./Source/Extensions/*",
    		"options": {
    			"reference": "none",
    			"versions": {
    				"jweiland/sitepackage": "1.0.6"
    			}
    		}
    	}
    },
    

    16.) Im Verzeichnis typo3cms/site-package installieren Sie nun das SitePackage mit Composer:

    composer req jweiland/sitepackage:^1.0

    17.) Im entpackten SitePackage befindet sich in sitepackage-12-lts/typo3conf eine sql Datei, die Sie mittels Shell oder PhpMyAdmin in Ihre Datenbank einspielen.

    18.) Passen Sie den Domain-Pfad im Kundenmenü an das Verzeichnis an. Achten Sie darauf, dass Sie auf den Unterordner typo3cms/site-package/public verweisen.

    19.) Öffnen Sie nun die URL [domain]/typo3/install.php und loggen Sie sich in das InstallTool von TYPO3 ein

    19a.) Falls Sie das Passwort nicht kennen, dann einfach irgendein Passwort eintragen. Nach Login erscheint ein Hash-Wert, der mit "$" anfängt. Den bitte kopieren

    19b.) Erstellen Sie die Datei additional.php im Verzeichnis typo3cms/site-package/config/system

    19c.) Fügen Sie folgendes in die additional.php ein:

    <?php
    
    $GLOBALS['TYPO3_CONF_VARS']['BE']['installToolPassword'] = 'HierKommtDerHashWertRein';

    19d.) Jetzt können Sie sich mit dem eben eingetragenen Passwort im InstallTool anmelden

    20.) Klicken Sie auf Environment

    21.) Klicken Sie auf "Check directory status"

    22.) Scrollen Sie nach unten und klicken Sie den "Fix" button.

    23.) Im Bereich Maintenance klicken Sie bitte noch auf Flush Cache

    Das SitePackage ist nun als Composer-Paket installiert. Sie können nun Ihre Webseite laden und mit dem SitePackage arbeiten.

      Änderungsprotokoll (Changelog)

      Hier dokumentieren wir alle Änderungen, die wir im Lauf der Zeit am TYPO3 Template vornehmen. So können Anwender ihre eigene Installation immer auf dem laufenden Stand halten. Künftige TYPO3 Updates werden so deutlich einfacher.

      01.06.2023: v1.0.0 - Release

      27.07.2023: v1.0.1 - updated Installtool and Admin Passwords

      28.07.2023: v1.0.2 - Bugfix for related news layout: double pipes,

      04.08.2023: v1.0.3 - deleted prism config, restructured constant editor, added text-wrap balance, fixed typo, vertical menu fix for arrow position

      05.08.2023: v1.0.4 - deleted prismcoy css and obsolete language typoscript
      changed class grid to flex-container for socialmedia links
      added editor groups for Hero Image and Filelist. Added these groups to default editor

      16.08.2023: v1.0.5 - Update EXT:container v2.2.5, php-cs-fixer, security-advisories. Installed EXT:yoast_seo v9.0.1

      20.09.2023: v1.0.6 - deleted duplicated links in CardItem.html,
      changed order RewriteCond in .htacccess,
      deleted wrong news single routeEnhancers,
      added missing space in image.html
      changed Encoding in .htaccess to x-gzip .gz

      Aktualisiert: 17.07.2024