typo3_dynamic_grids

Dynamische Gitter

Dies ist eine kleine Typo3-Erweiterung, die auf der Erweiterung "Gridelements" aufbaut, um Inhaltsraster für das web->pages-Modul von typo3 bereitzustellen, die definiert sind mit viewhelpers in Ihren Typo3-Ansichten.

Um wie erwartet zu funktionieren, ist es erforderlich, die Erweiterung labor/typo3_typo_base zu verwenden.

Es gibt einige Funktionen in Gridelementen, die wir durch die dynamische Definition nicht verwenden können.

Installation

Stellen Sie sicher, dass Sie unser Repository in Ihrem composer.json haben

Installation der Erweiterung mit composer: composer erfordert labor/typo3-dynamic-grids

Aktiviere die Erweiterung im typo3-Backend und stelle sicher, dass Rasterelemente und typo_base ebenfalls aktiviert sind.

Grundverwendung

In Ihren Plugin/Inhaltselementen "Backend Section" ()die Sie von der typo_base Erweiterung kennen sollten) können Sie die Grids nun mit dem 3 Backend viewhelpers definieren. Jede Spalte benötigt eine ID, die eine ganze Zahl im Bereich von 0-900 sein kann.

{namespace DynamicGrids=Labor\Typo3DynamicGrids\ViewHelpers}
<f:section name="backend">
    <DynamicGrids:Grid> Raster>
        <DynamicGrids:Row>Reihe>
            <DynamicGrids:Column id="0" />
            <DynamicGrids:Column id="1" />
        </DynamicGrids:Row>Reihe>
    </DynamicGrids:Grid> Raster>
</f:section>

In diesem Beispiel erhalten Sie ein einfaches Gitter mit 2 Spalten, zu denen Sie nun Inhaltselemente hinzufügen können.

Um das Frontend dazu zu bringen, den Inhalt Ihrer Grids zu rendern, können Sie den Inhalt viewhelper verwenden.

{namespace DynamicGrids=Labor\Typo3DynamicGrids\ViewHelpers}
<div style="display: flex; width: 100%">
    <div style="width: 100%">
        <DynamicGrids:Content id="0" />
    </div>
    <div style="width: 100%">
        <DynamicGrids:Content id="1" />
    </div>
</div>

Mehrere Grids im gleichen Element

Sie können auch Raster dynamisch definieren, basierend auf den Einstellungen Ihres Plugins. Sie laufen doch im fluid-Kontext. So ist es auch möglich, Gitter mit einer Schleife zu erstellen und mehrere Abschnitte zu erstellen. Die Verwendung ist meistens die gleiche, aber Sie müssen eine ID für Ihr Netz definieren, wenn Sie ein Vielfaches davon haben. Hinweis: Das erste Gitter benötigt keine bestimmte ID.

{namespace DynamicGrids=Labor\Typo3DynamicGrids\ViewHelpers}
<f:section name="backend">

    <DynamicGrids:Grid> Raster>
        <DynamicGrids:Row>Reihe>
            <DynamicGrids:Column id="0" />
            <DynamicGrids:Column id="1" />
        </DynamicGrids:Row>Reihe>
    </DynamicGrids:Grid> Raster>

    <DynamicGrids:Grid id="2">
        <DynamicGrids:Row>Reihe>
            <DynamicGrids:Column id="0" />
            <DynamicGrids:Column id="1" />
        </DynamicGrids:Row>Reihe>
    </DynamicGrids:Grid> Raster>

</f:section>

Das ist es wirklich. Wie bei den Spalten haben die Gitter-ID's einen Bereich von 0 bis 900. Den Inhalt verschiedener Grids im Frontend zu erhalten, ist ebenfalls recht einfach. Gib einfach die Grid-ID als Parameter in den Inhalt viewhelper ein und du wirst gesetzt.

{namespace DynamicGrids=Labor\Typo3DynamicGrids\ViewHelpers}
<div style="display: flex; width: 100%">
    <div style="width: 100%">
        <DynamicGrids:Content id="0" grid="2" />
    </div>
    <div style="width: 100%">
        <DynamicGrids:Content id="1" grid="2"/>
    </div>
</div>

ViewHelpers

Raster

Im Backend verwenden, um die äußere Hülle eines Inhaltsgitters zu definieren. Parameter:

• id: Optionale, numerische ID für das Gitter, wenn es mehrere Gitter im gleichen Element gibt. Bereich 0 - 900
• deaktivieren SieLinkBreaker: Optional, standardmäßig rendert typo_base einen "go-to-edit"-Link um den Backend-Content, der unsere Grids zerstört. Um dies zu beheben, wird der Link automatisch mit einem </a>(grid)<a...>. Dies kann zu seltsamen Ausgaben führen, wenn Sie etwas Ungewöhnliches ausprobieren. Wenn du Probleme im Zusammenhang mit diesem a-Tag siehst, setze dies einfach auf false.

Reihe

Verwenden Sie diese Option im Backend, um eine Zeile in Ihrem Gitter zu definieren. Keine Parameter

Spalte

Im Backend verwenden, um eine Spalte innerhalb Ihrer Zeile zu definieren. Parameter:

• id: Erforderlich, einzigartig in einem Raster! Id für die aktuelle Spalte. Bereich 0 - 900
• name: Optionaler Name, der im Backend über der Spalte angezeigt wird
• colspan: Optional, wie in einer html-Tabelle
• reihenspannung: Optional, wie in einer html-Tabelle
• allowContent: Optional, kann auf FALSE gesetzt werden, um die Spalte für den Inhalt zu deaktivieren. Kann für Platzhalter und dergleichen verwendet werden.

Inhalt

Wird im Frontend verwendet, um den Inhalt einer einzelnen Spalte darzustellen. Parameter:

• id: Erforderlich, die ID der Spalte, um den Inhalt für. Entspricht der Backend-Spalte.
• raster: Wird optional verwendet, wenn es mehrere Gitter auf dem gleichen Element gibt.