Aktuelle Version vom 29. März 2023, 10:53 Uhr

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-Screenshot"

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:

Datei mit projektspezifischer Maskenkonfiguration. [general.json]

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

Ordner für Content Fluid Templates (mit nachgestelltem Schrägstrich). [frontend.inhalt]

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

Ordner für Content-Fluid-Layouts (mit nachgestelltem Schrägstrich). [frontend.layouts]

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

Ordner für Content Fluid Partials (mit nachgestelltem Schrägstrich). [frontend.partials]

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

Ordner für Backend-Vorschauvorlagen (mit nachgestelltem Schrägstrich). [backend.backend]

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

Ordner für Backend-Vorschau-Layouts (mit nachgestelltem Schrägstrich). [backend.layouts_backend]

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

Ordner für Backend-Vorschaupartials (mit nachgestelltem Schrägstrich). [backend.partials_backend]

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

Ordner für Vorschaubilder (mit nachgestelltem Schrägstrich). [backend.preview]

Sie können das Vorschaubild von contentelements in Ihr bevorzugtes PNG-Bild oder PNG-Symbol (32x32 Pixel) ändern. Hier können Sie den Pfad zu den Vorschaubildern festlegen. Speichern Sie diese mit dem Schlüssel des Inhaltselements als Dateinamen (zB mykey.png)

Standard ist: EXT:yoursitepackage/Resources/Private/Mask/Backend/Previews

"Extension Manager-Optionen"

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.

Links

Intern

Extern