Typo3/Extension/Mask
Mask ist eine TYPO3-Erweiterung zum Erstellen von Inhaltselementen und Erweitern von Seitenvorlagen.
Beschreibung
Es ist möglich, jedem Backend-Layout neue Felder hinzuzufügen und vollständig angepasste Inhaltselemente zu erstellen, ohne eine Codezeile zu schreiben. Felder können verschiedene Typen haben, zum Beispiel: Text, Datei, Beziehungen, Richtext,…
Vorteile der Maske
- Mask speichert den Inhalt in Spalten in Datenbanktabellen - nicht in XML (Flexform)
- Mask verwendet vorhandene Datenbankfelder wieder, um die Datenbank zu schonen
- Mask nutzt nur bereits vorhandene Features des TYPO3-Cores und kombiniert diese: backend_layouts, fluid, typoscript, tca
- Mask ermöglicht das Wiederholen von Inhalten und Verschachteln von Inhaltselementen mit IRRE-Technologie
- Maske unterstützt mehrsprachige Projekte
- Maske unterstützt Arbeitsbereiche und Versionierung
- Mask ist in Extbase geschrieben, der modernen Art, Erweiterungen zu erstellen
Backend-Modul nach Erstellung des ersten Contentelements
Installation
Führen Sie die folgenden Schritte aus, um die Erweiterung zu installieren:
- Importieren und installieren Sie die Extension im TYPO3-Backend im Modul Extensionmanager .
- statische Template Binden Sie Content Elements (fluid_styled_content) zuerst und danach Mask (Maske) in Module Template in Ihr Haupt-TypoScript-Template ein.
"TypoScript-Vorlage einschließen"
TypoScript-Vorlage einschließen
Überprüfen Sie nach der Installation die Erweiterungseinstellungen:
Mask speichert die Informationen, die zum Generieren von Inhaltselementen und zum Erweitern von Seitenvorlagen benötigt werden, in einer Datei: mask.json. Mit dieser Einstellung können Sie den Pfad zu dieser Datei ändern.
Standard ist: EXT:yoursitepackage/Resources/Private/Mask/mask.json
Mask erzeugt für jedes neue Inhaltselement eine HTML-Datei mit flüssigen Tags. Hier können Sie den Pfad zu dieser Datei festlegen.
Standard ist: EXT:yoursitepackage/Resources/Private/Mask/Frontend/Templates
Hier können Sie den Pfad zu den flüssigen Layouts Ihrer Maskenvorlagen festlegen mask
Der Standardwert ist: EXT:yoursitepackage/Resources/Private/Mask/Frontend/Layouts
Hier können Sie den Pfad zu den fließenden Teiltönen Ihrer Maskenvorlagen festlegen
Der Standardwert ist: EXT:yoursitepackage/Resources/Private/Mask/Frontend/Partials
Hier können Sie den Pfad zu den Fluidvorlagen für Backend-Vorschauen Ihrer Inhaltselemente festlegen.
Der Standardwert ist: EXT:yoursitepackage/Resources/Private/Mask/Backend/Templates
Hier können Sie den Pfad zu den flüssigen Layouts Ihrer Masken-Backend-Vorschauen festlegen
Der Standardwert ist: EXT:yoursitepackage/Resources/Private/Mask/Backend/Layouts
Hier können Sie den Pfad zu den flüssigen Teilbereichen Ihrer Masken-Backend-Vorschauen festlegen
Der Standardwert ist: EXT:yoursitepackage/Resources/Private/Mask/Backend/Partials
Standard ist: EXT:yoursitepackage/Resources/Private/Mask/Backend/Previews
Extension Manager-Optionen
Contentelements
Nachdem Sie Mask installiert und die statische TypoScript-Vorlage eingebunden haben, können Sie Mask verwenden. Öffnen Sie das Backend-Modul Maske . Erstellen Sie Ihr erstes Inhaltselement, indem Sie auf das klicken neue -Symbol . Auf der folgenden Seite haben Sie zwei Pflichtfelder: * Titel : Geben Sie den Titel für dieses Inhaltselement ein. Es wird vom Redakteur beim Erstellen eines neuen Inhaltselements gesehen.
- Element-Schlüssel (eindeutig, Kleinbuchstaben) : Ihr Element benötigt einen Elementschlüssel. Dieser Schlüssel wird intern verwendet und vom Editor nicht gesehen. Sie muss in der gesamten Installation und in Kleinbuchstaben eindeutig sein. Der Schlüssel wird in der Datenbank und als Dateiname für die HTML-Vorlage und das Vorschaubild verwendet.
Dann gibt es noch zwei weitere Felder: * Kurztitel : Der Kurztitel ist sichtbar, wenn Sie ein Element bearbeiten und die Auswahlbox für den Inhaltstyp öffnen. Wenn dieses Feld leer ist, wird der Titel verwendet.
- Beschreibung : Es wäre gut, eine Beschreibung für die Redakteure hinzuzufügen. Es erscheint beim Assistenten zum Erstellen neuer Inhalte neben dem Titel und dem Vorschaubild.
Jetzt können Sie Ihr Element mit verschiedenen Feldern füllen. Sie auf der Seite Feldtypen Weitere Informationen finden .
Wenn Sie fertig sind, speichern Sie Ihr Element. Beim ersten Speichern wird eine HTML-Beispieldatei generiert und im Ordner für Ihre Vorlagen gespeichert. Sie auf der Seite Installation Weitere Informationen finden . Bei einer Standardinstallation finden Sie es hier: fileadmin/templates/content. Jetzt können Sie den Inhalt der Datei mit Ihren HTML- und Fluid-Tags bearbeiten. Es wird nie überschrieben, auch wenn Sie das Element in Mask ändern. Wenn Sie einen flüssigen Beispielcode für neu hinzugefügte Felder benötigen, klicken Sie auf das HTML-Symbol im Maskenmodul.
Sie können ein Bootstrap-Symbol als Vorschaubild für Ihre Inhaltselemente festlegen. Sie können dies überschreiben, indem Sie ein Vorschaubild in Ihren Vorschaubildordner legen (normalerweise in: fileadmin/templates/preview.) Idealerweise sollte dies ein Screenshot Ihres Elements oder ein schönes Symbol sein. Das Bild wird in 1:1 Größe angezeigt. Sie sollten das Bild also mit einer maximalen Breite von 150 Pixel speichern. Höhe ist egal. Das Bild wird auch beim Bearbeiten des Elements nicht überschrieben.
Das ist alles was Sie wissen müssen - jetzt können Sie Ihr neues Element im Seitenmodul verwenden.
Manage Backend-Preview
Im Extensionmanager finden Sie die Einstellung Ordner für Backend Preview Templates . Wenn Sie das Aussehen der Inhaltselemente im TYPO3-Backend-Seitenmodul ändern möchten, erstellen Sie den Ordner und eine .html-Datei mit dem Schlüssel des Elements als Dateinamen. Es ist die gleiche Logik wie im Inhalt Ordner. Sie können also auch Ihren HTML-Code aus dem Inhaltsordner als Basis kopieren. Dann passen Sie es an Ihre Bedürfnisse an.
Examplecode:
Name: {data.tx_mask_name}
E-Mail: {data.tx_mask_email}
Tel.: {data.tx_mask_telephone}
Fax: {data.tx_mask_fax}
Position: {data.tx_mask_position}
"Ändern Sie die Backend-Vorschau"
Standardausgabe und angepasste Vorschau
Verwenden Sie tolle Icons als Vorschaubild für ein Inhaltselement
Wenn Sie schnell ein Vorschau-Icon für Ihr Inhaltselement benötigen und keine Grafik erstellen möchten, wählen Sie einfach einen tollen Iconcode und wählen Sie eine Farbe:
"Verwenden Sie ein Fontawesome-Symbol"
Geben Sie den Code in den Maskenassistenten ein
Hier findest du eine Übersicht über alle möglichen Icons und deren Codes: https://fortawesome.github.io/Font-Awesome/icons/
Verwenden Sie eine PNG-Datei als Vorschaubild für ein Inhaltselement
Als Vorschaubild für ein Inhaltselement können Sie eine png-Grafikdatei in der Größe 32x32 Pixel verwenden. Es wird im neuen Inhaltselement-Assistenten angezeigt. Benennen Sie die Datei einfach mit dem Schlüssel aus dem Inhaltselement (zB: mykey.png oder contact.png) und laden Sie sie in den angegebenen Ordner in den Extension Manager-Einstellungen von mask hoch.
Pagetemplates
Nachdem Sie Mask installiert und das statische TypoScript-Template eingebunden haben, können Sie Mask verwenden. Öffnen Sie das Backend-Modul Maske .
Sie können keine Seitenvorlagen mit Maske erstellen. Dies muss in getan werden Listenmodul module with Backend Layouts . Erstellen Sie zunächst ein Backend-Layout für jede benötigte Seitenvorlage. (Beispiel: Home, Inhalt, 3-Spalten,…). Jetzt haben Sie die Möglichkeit, jedes dieser Backend-Layouts mit speziellen Feldern im Backend-Modul Maske zu erweitern. Dies funktioniert genauso wie in Contentelements beschrieben .
Ein Vorschaubild kann im Backend-Layout-Datensatz eingestellt werden, nicht in der Maske.
TypoScript
Mask wird mit einem gebrauchsfertigen TypoScript-Snippet zum Templating geliefert. So definieren Sie Ihr PAGE-Objekt:
page < temp.mask.page
Dies lädt das folgende TypoScript:
temp.mask.page = PAGE
temp.mask.page {
10 = FLUIDTEMPLATE
10 {
file.stdWrap.cObject = CASE
file.stdWrap.cObject {
key.data = levelfield:-1, backend_layout_next_level, slide
key.override.field = backend_layout
default = TEXT
default.value = fileadmin/templates/default.html
}
}
}
Sie müssen Ihr HTML-Seitentemplate also hier speichern: fileadmin/templates/default.html Wenn Sie möchten, können Sie den Pfad oder Dateinamen einfach mit einer TypoScript-Zeile ändern:
page.10.file.stdWrap.cObject.default.value = yourpath/yourfile.html
Wenn Sie mehr als eine Seitenvorlage haben, müssen Sie diese Zeilen für jede Vorlage hinzufügen und anpassen:
page.10.file.stdWrap.cObject {
2 = TEXT
2.value = fileadmin/templates/second.html
}
Sie müssen die ID von 2 auf Ihre ID aus dem zugehörigen Backend-Layout ändern. Und Sie müssen den Pfad und den Dateinamen an Ihre Bedürfnisse anpassen. Denken Sie daran: Jede Seitenvorlage benötigt einen eigenen Backend-Layout-Datensatz. Die ID Ihres Backend-Layouts finden Sie im Listenmodul, wenn Sie mit der Maus über das Symbol des Backend-Layouts fahren.
Wenn Sie CSS- oder Javascript-Dateien hinzufügen möchten, verwenden Sie das normale TypoScript oder lesen Sie die offizielle TSREF für weitere Möglichkeiten:
page {
includeCSS.styles = path/your.css
includeCSS.lightbox = path/lightbox.css
includeJS.jquery = path/jquery.js
includeJS.scripts = path/your.js
}
Contentcolumns
Eine Seitenvorlage benötigt fast immer eine oder mehrere Inhaltsspalten. Um diese zu erstellen, starten Sie im Datensatz Backend-Layout und definieren Sie die benötigten Spalten. Für jede Spalte eine definieren Spaltennummer . Dies ist die ID, die in der Datenbank und im folgenden TypoScript verwendet wird.
Der nächste Schritt ist das Hinzufügen des folgenden Fluid-Codes in Ihr Seiten-HTML-Template, an jeder Position, an der Sie Ihre Spalten platzieren möchten: <f:cObject typoscriptObjectPath=”lib.content0”/> Ändern Sie die 0 von content0 in Ihre Spalten-ID aus dem Back-End-Layout-Datensatz.
Der letzte Schritt besteht darin, jeden lib.content* in Ihrem TypoScript-Setup mit diesen beiden Zeilen zu definieren:
lib.content0 < styles.content.get lib.content0.select.where = colPos=0
Ändern Sie alle Nullen in Ihre ID.
Wenn im Frontend kein Inhalt erscheint, prüfen Sie unbedingt, ob Sie zuerst die statischen TypoScript-Template- Inhaltselemente (fluid_styled_content) eingebunden haben und danach Mask (mask) .
fluid_styled_content
fluid_styled_content ist eine statische TypoScript-Konfiguration, die vom TYPO3-Kern bereitgestellt wird. Es verarbeitet die regulären Inhaltselemente von TYPO3 (Regular Text Element, Text & Images, …) im Backend und im Frontend. Es stellt auch das TypoScript-Snippet style.content.get bereit. Sie benötigen diese TypoScript-Vorlage, um Inhalte in Ihrem Frontend zu rendern.
Es ist sehr wichtig, das statische Mask TypoScript-Template nach dem statischen fluid_styled_content TypoScript-Template einzubinden! Andernfalls wird kein Maskeninhalt im Frontend gerendert. Die gleichen Regeln gelten für den alten css_styled_content.
Feldtypen
String
Ein Eingabefeld für Text.
Integer
Ein Eingabefeld für Integer-Zahlen.
Float
Ein Eingabefeld für Floating-Numbers.
Link
Ein Eingabefeld für TYPO3-Links.
Date
Ein Eingabefeld für ein Datum (TT.MM.JJJJ).
Datetime
Ein Eingabefeld für ein Datum mit Uhrzeit (dd.mm.yyyy hh.ii.ss).
Text
Ein mehrzeiliges Textfeld.
Richtext
Ein mehrzeiliges Textfeld mit Richtext-Editor.
Checkbox
Ein oder mehrere Kontrollkästchen.
Radiobutton
Ein oder mehrere Optionsfelder.
Selectbox
Selectbox mit eigenen Werten oder Beziehung zu anderen Datenbanktabellen.
Size
Definiert die Höhe der Selectbox. Beispiel: Bei 2 erhält die Selectbox eine Höhe von 2 Einträgen.
AutoSizeMax
Wenn gesetzt, wird die Höhe der Selectbox auf die Anzahl der Werte gesetzt, maximal jedoch auf diesen Wert.
fremde_tabelle
Hier können Sie die Selectbox automatisch mit Werten aus einer Datenbanktabelle füllen. Geben Sie einfach den Tabellennamen ein. Sie können den Wert einfach mit TypoScript abrufen. Beispiel: Bei Einstellung auf Seiten wird die Auswahlbox mit allen Seiten Ihres Projekts gefüllt. In Ihrem Fluid-Template können Sie <f:cObject typoscriptObjectPath=“lib.pages“ data=“{data}“ /> . verwenden Und in Ihrem TypoScript-Setup können Sie auf alle Daten des ausgewählten Seiten-Datensatzes zugreifen:
fremde_tabelle_wo
Wenn Sie Foreign_table verwenden und die Werte in Ihrer Selectbox filtern oder die Sortierung der Selectbox-Optionen einstellen möchten, können Sie dies hier tun. Beispiel: Sortierung nach Titel (ZA): ORDER BY Titel DESC Nur Standardseiten-doctype: AND doktype=1
renderType
Ändern Sie den Typ der Selectbox von Single auf Multiple, oder verwenden Sie Checkboxen oder ein Shuttle anstelle einer Slectbox.
Maxitems
Wenn renderType nicht auf Selectbox single gesetzt ist, können Sie die maximal zulässige Anzahl von Elementen definieren. Die Werte werden durch Kommas getrennt gespeichert. Sie können also TypoScript Split verwenden, um auf jeden Wert zuzugreifen.
Items
Hier können Sie statische Werte definieren. Es ist erlaubt, sie allein oder in Kombination mit Foreign_table zu verwenden. Beispiel mit Verwendung von Foreign_table: Bitte wählen,0 Beachten Sie, dass die IDs ganze Zahlen sein müssen! Wenn Sie nur statische Werte ohne Foreign_table verwenden, sollten ids mit 1 beginnen, da 0 den Status auf NULL zurücksetzt.
File
Dateifeld bei Verwendung von FAL. Sie können Bilder im Frontend mit f:image oder mit f:cObject anzeigen:
<f:for each="{data.tx_mask_image}" as="file">
f:image example:
<f:image src="{file.uid}" treatIdAsReference="1" width="200" />
f:cObject example:
<f:cObject typoscriptObjectPath="lib.my_image" data="{image: file.uid}" />
</f:for>
Wenn Sie f:cObject verwenden, verwenden Sie das folgende TypoScript in Ihrem Setup-Feld:
lib.my_image = IMAGE
lib.my_image.file {
import.field = tx_mask_image
treatIdAsReference = 1
}
Repeating
Wiederholungsfeld mit IRRE-Technik. Sie können diesem Element sich wiederholende Unterfelder hinzufügen. Beispiel: Erstellen Sie einen Schieberegler mit mehreren Folien.
Content
Erlauben Sie Benutzern, Inhaltselemente zum Inhaltselement hinzuzufügen. So können Redakteure die Inhaltselemente verschachteln und beispielsweise komfortabel ein Akkordeon bauen. Oder wenn Sie einen Medienbereich erstellen möchten, in dem nur Bilder, Videos und Audioelemente zulässig sind, können Sie Redakteuren erlauben, nur die Inhaltselemente hinzuzufügen, die dieser Anforderung entsprechen.
Wenn Sie eine Backend-Vorschau für Ihr Inhaltselement verwenden, können Sie einen ViewHelper hinzufügen, um ein Bearbeitungssymbol für jedes untergeordnete Element anzuzeigen:
{namespace mask=MASK\Mask\ViewHelpers}
<f:for each="{data.tx_mask_mycontent}" as="data_item">
<mask:editLink element="{data_item}"><img src="/typo3/sysext/core/Resources/Public/Icons/T3Icons/actions/actions-open.svg" width="16" height="16"> Edit element</mask:editLink>
</f:for>
Tab
Mit dem Tabulatorfeld können Sie einen Tabulatortrenner hinzufügen, um Ihre Felder in mehreren Tabs besser zu organisieren und das Leben des Redakteurs zu erleichtern.