responsive_newsletter_template

Responsive Newsletter-Vorlage

Erweiterungsschlüssel: responsive_newsletter_template

Abhängigkeiten:

• TYPO3: Version 8.7.
• EXT: html-mail-utility

Was bewirkt es?

Die Responsive Newsletter Templates bieten responsive Newsletter-Vorlagen für TYPO3 auf Basis von Foundation for Emails 2 (ehemals Inky) (http://foundation.zurb.com/emails). Die Foundation-Inky-Templates können direkt in fluid verwendet werden und werden in einen unverwechselbaren, altmodischen und inlined HTML-Tabellencode überführt. Diese Vorlagen können z.B. mit TYPO3 Direct Mail verwendet werden.

Merkmale:

• 3 Layouts basierend auf Foundation-E-Mails
  • Basis
  • Newsletter
  • Sidebar
• Getestete Vorlagen mit Testi (eine preiswertere Alternative zu Lackmus)
• Gehostet auf GitHub (bald)

Installation

Installation

Abhängigkeiten

• Extentsion HTML Mail Utility: erhalten Sie es von https://gitbucket.undkonsorten.com/extensions/html_mail_utility machen Sie die Composer-Installation für diese Erweiterung (siehe Erweiterungshandbuch), um die neuesten Quellen zu erhalten (ohne diese wird es nicht funktionieren!)
• wenn dies auf dem Server nicht funktioniert, führen Sie die Funktion composer Run Extension-Build ausführen auf Ihrem lokalen Rechner und kopieren/rsynchronisieren Sie die Datei Libraries/dependencies.phar auf Ihren Webserver ** Dies ist beides ist möglicherweise nicht erforderlich bei einer Composer-Installation

Installation

Nach der Installation des HTML Mail Utility installieren Sie einfach die Erweiterung Reponsive Newsletter-Vorlagen Holen Sie es sich von: https://gitbucket.undkonsorten.com/extensions/responsive_newsletter_template

TypoScript-Setup einbinden

Fügen Sie die TypoScript-Vorlagen ein für

• HTML Mail Utility (html_mail_utility)
• Inhaltselemente (fluid_gestylter_Inhalt)
• die Standardvorlage:
  • HTML-Mail-Rendering (Basis) (responsive_newsletter_template): enthält die Datei Main/setup.txt
• eine der Newsletter-Vorlagen ("Include static from extensions") wie z.B
  • Layout: Newsletter (responsive_newsletter_template) oder
  • Layout: Newsletter2 (responsive_newsletter_template) oder
  • Layout: Held (responsive_newsletter_template) oder
  • Layout: Seitenleiste (responsive_newsletter_template) oder
• Klartext-Rendering (responsive_newsletter_template)
• Gridelemente (Gridelemente) bei Bedarf für die Vorlage
• ? Was ist mit dem HTML-Mail-Programm?

und für Direct Mail (für den Versand mit Direct Mail)

• Grenzen des Inhalts von Direct Mail (direct_mail)
• Direct Mail News Klartext (direct_mail)
• Direct Mail Klartext (direct_mail)

Einschließen: Seite TSConfig

Fügen Sie für Ihren Newsletter-Ordner die SeiteTsConfig (von Erweiterungen) hinzu:

• PageTs für Newsletter-Inhalte (responsive_newsletter_template): Enthält ein einspaltiges Backend-Layout (und andere Dinge)
• PageTS für Vorlagen mit mehr als einer Spalte: Bietet ein anderes Backend-Layout (muss nach dem Standard pageTS aufgerufen werden)
• RTE-Konfiguration für Newsletter (responsive_newsletter_template): für Links mit Button-Style

Konfiguration

Vorlagen/Layouts

Erstellen Sie eine Dateistruktur im Projektstamm ("fileadmin" Ordner) für Inhalt und Frontend:

??? Newsletter
?   ??? Ressourcen
?       ??? Privat
?       ?   ??? Inhalt
?       ?   ??? Seite
?       ??? Öffentlich
?           ??? Css
?           ??? Bilder

Im Allgemeinen werden zunächst die Standard-Vorlagen aufgerufen (z.B. /Resources/Private/_Default) und dann die benutzerdefinierte Newsletter-Vorlage/Layout-Ordner (z.B. /Resources/Private/Templates/Sidebar)

Es gibt 2 verschiedene Vorlagenordner für die folgenden Bereiche

• Seite: Definiert das allgemeine Seitenlayout (/Ressourcen/Private/_Default/Page)
• Inhalt: Definiert die Inhaltsvorlagen für jedes Inhaltselement (/Resources/Private/_Default/Content)

Die Layout-Vorlagen (Hero, Newsletter, Newsletter2, Sidebar) schalten grundsätzlich nur die fluid Vorlage rootPaths ein

Sie können eigene Vorlagenpfade definieren über

plugin.tx_responsivenewslettertemplate.lib.page {
    templateRootPaths.20 = EXT:my_theme_extension/Resources/Private/Newsletter/Page/Templates/
    partialRootPaths.20 = EXT:my_theme_extension/Resources/Private/Newsletter/Seite / Teile / Teile /
    layoutRootPaths.20 = EXT:my_theme_extension/Resources/Private/Newsletter/Seiten/Layouts/
}

TypoScript-Konstanten

Konstanten können im Konstanten-Editor bearbeitet werden.

• html.typeNum: Der Seitentyp kann definiert werden. Standardmäßig ist es 148543460607

Backend-Layout

Der Newsletter benötigt das Backend-Layout (z.B. Newsleter eine Spalte, 2 Spalten). Diese werden durch verschiedene PageTs-Konfigurationen bereitgestellt (siehe oben)

Styling

Das Styling Ihres Newsletters sollte mit Foundation for Email 2 (mit Node.js) erfolgen. Bitte beachten Sie dieses Projekt für den Start eines neuen Projekts und überprüfen Sie das Wiki

Foundation for Emails nimmt Ihnen die Arbeit bei der Entwicklung von HTML-E-Mails ab, indem es Ihnen eine Reihe von leistungsstarken, getesteten Komponenten zur Verfügung stellt. Dazu gehören ein vollständig reagierendes Raster, Schaltflächen, Beschriftungen, Menüs und mehr.

Installieren Sie es global und lesen Sie den Rest aus dem Leitfaden[http://foundation.zurb.com/emails/docs/sass-guide.html]:

sudo npm install --globale foundation-cli

Es ist wichtig, die Ausgabe von

npm run start start

Wenn Sie den npm run build verwenden, können unbenutzte CSS-Klassen entfernt werden. Du solltest entfernen inline Source Mapping aus der resultierenden app.css.

Um die app.css zu erstellen, führen Sie die Foundation aus mit npm run build

app.css

Die app.css-Datei wird von der TYPO3 Extension HTMl Mail Utility mit Markup versehen. Die app.css befindet sich im Ordner dist/css.

inject.css

Die inject.css wird als Style-Tag in TYPO3 eingebunden.

Die inject.scss muss manuell erstellt werden. Wenn Sie den npm run build ausführen, wird in der Ausgabe ein unterstrichener <style>@media ...</tag> Block angezeigt. Aus diesen Styles musst du manuell die Datei inject.css erstellen und sie in deinen Css-Ordner (Public Ressources) hinzufügen.

Dies trägt dazu bei, den Footprint der enthaltenen Style-Regeln gering zu halten (nur Pseudoelemente und Medienabfragen).

CSS-Dateien in TYPO3 einbinden

Definieren Sie dann die CSS-Datei über die TS-Konstanten

plugin.tx_responsivenewslettertemplate.cssFile = EXT:my_theme_extension/Resources/Public/Css/app.css
plugin.tx_responsivenewslettertemplate.injectCssFile = EXT:my_theme_extension/Resources/Public/Css/inject.css

Seitentypen

Der HTML-Newsletter wird mit einem benutzerdefinierten Seitentyp versendet (siehe Konstanten). Wenn der Newsletter ohne diese Seitenart angezeigt wird, werden der Online-Link Lesen und der Abmeldelink entfernt.

Newsletter-Inhalt

Seiteneigenschaften der Newsletter-Seite

• Seitentitel:
  • wird für den Betreff des Newsletters verwendet (in der Regel verwendet DirectMail diesen normalerweise als Betreff der E-Mail)
  • wird in der xxx-Vorlage für den Newsletter für die Editionslinie verwendet (Fluid: {data.title})
• Seite Untertitel
  • kann in der Fluid-Vorlage über {data.subtitle} aufgerufen werden
• Seitenbeschreibung
  • wird für den normalerweise optisch verborgenen Foundation "Preheader" verwendet. Der Preheader wird in E-Mail-Clients wie Outlook, Gmail usw. angezeigt. Es wird verhindert, dass die Zeile "Diesen Newlettter online lesen" in diesen E-Mail-Programmen als Vorschau/Abstract angezeigt wird. Es sollte eine Länge von 50-100 Zeichen haben.
  • ein Fallback kann über die Konstante defaultDescription definiert werden, falls der Editor die Seitenbeschreibung nicht ausfüllt

Newsletter Inhaltselemente

Der Newsletter kann folgende Inhaltselemente anzeigen

• Schlagzeilen
• Überschriften + Text
• Text-Medien (mit Bild oben, links, rechts)
• Content-Menü (Spezielle Menüs mit dem Menu Type Section Index (Seiteninhalt, der für Section-Menüs markiert ist). Hier werden nur Inhaltselemente aufgelistet, bei denen das Feld Show in Section Menus* in der Registerkarte Appearance markiert ist
• Trennwand (für eine horizontale Trennwand zwischen den Inhaltselementen)

FAQ - Probleme

Fehler: Konnte die Klasse nicht analysieren: "Hampe\Inky\Inky\" vielleicht nicht geladen oder kein Autoloader? Die Klasse Hampe\Inky\Inky\Inky existiert nicht

• Lösung: Machen Sie die Composer Installation für die html_mail_utility Erweiterung (siehe oben) - die dependencies.phar fehlt

Zu tun

• Denken Sie an den Bettnamen für die pageTS form muliti columns (#12147) WIP
• PHP Inky im Gegensatz zu Grunt Inky für "center" Tag https://support.undkonsorten.com/issues/12185
• ? Was ist mit dem HTML-Mail-Programm Template inclusion?