[Frage] Eigene Klassen für Bilder TYPO3-Version: 8.7.9

  • mimii mimii
    Jedi-Ratsmitglied
    0 x
    577 Beiträge
    1 Hilfreiche Beiträge
    23. 03. 2018, 13:57

    Hallo ins Forum,

    mal ne grundsätzliche Frage: Gibt es irgendwo die Möglichkeit einem Bild, das "Medien" erfasst wird eine oder mehrere Klassen mitzugeben? Im ckEditor kann man z.B. über die yamel Datei bestimmen, welche Klassen zur Verfügung stehen sollen.
    Bei Bilder suche ich bisher vergeblich irgendwo meine benötigten Klassen einzutragen. Ich kann über ein Layout oder über einen Frame ein spezielles Rendering hinterlegen, aber das macht natürlich viel mehr Aufwand, als einfach irgendwo ein Klassennamen zu hinterlegen.

    Geht sowas oder müsste man da ein eigenes CE schreiben?

    Danke für n Tipp und Gruß
    mimii


  • 1
  • Teisinger Teisinger
    Jedi-Meister
    0 x
    331 Beiträge
    23 Hilfreiche Beiträge
    25. 03. 2018, 20:40

    du kannst das ja ein Feld ergänzen... :)
    Du brauchst dazu min. Configuration/Overrides/sys_file_reference.php und die ext_tables.sql

    https://github.com/groundstack-org

  • mimii mimii
    Jedi-Ratsmitglied
    0 x
    577 Beiträge
    1 Hilfreiche Beiträge
    26. 03. 2018, 10:00

    Ähm ja oukay,

    danke für den Tipp... stellt sich die Frage was aufwendiger ist: Layout oder Frame nutzen und in den Fluid-Templates abfragen oder dein Vorschlag, den ich überhautpt nicht abschätzen kann... da noch nie gemacht.

    Ich guck mal.

    Danke und Gruß
    mimii

  • Teisinger Teisinger
    Jedi-Meister
    0 x
    331 Beiträge
    23 Hilfreiche Beiträge
    26. 03. 2018, 18:58

    Kommt halt darauf an was du genau möchtest.

    Ein bestehendes Layout-feld zu nutzen, ist natürlich einfacher.
    - Nachteil: du kannst nicht irgendwas rein schreiben sondern bist an die "Auswahl" gebunden (bzw. der Redakteur)
    - was für mich allerdings auch gleichzeitig der Vorteil ist, da nichts komisches passieren kann oder etwaige Typo Fehler nicht auftreten können.

    Theoretisch schöner (je nach Anwendungsfall) fände ich aber wenn du selbst das Element um ein Feld ergänzt.
    Das ist nur minimal aufwendiger.

    Eigene Extension anlegen am einfachsten wohl mit dem ExtensionBuilder - nur die Notwendigsten Felder auf der linken Seite ausfüllen -> speichern - Fertig.

    Dann gehst du zu deiner Extension und schreibst in die ext_tables.sql sowas wie:

    CREATE TABLE sys_file_reference (
    hoverline1 varchar(255) DEFAULT '' NOT NULL,
    hoverline2 varchar(255) DEFAULT '' NOT NULL,
    );

    dann im Ordner/File /Configuration/TCA/Overrides/sys_file_reference.php sowas wie:

    <?php
    $tempColumns = array(
    'hoverline1' => array(
    'l10n_mode' => 'mergeIfNotBlank',
    'label' => 'Hover text line 1',
    'config' => [
    'type' => 'input',
    ],
    ),
    'hoverline2' => array(
    'l10n_mode' => 'mergeIfNotBlank',
    'label' => 'Hover text line 2',
    'config' => [
    'type' => 'input',
    ],
    ),
    );
    TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTCAcolumns(
    'sys_file_reference',
    $tempColumns,
    1
    );
    TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addFieldsToPalette(
    'sys_file_reference',
    'imageoverlayPalette',
    '--linebreak--,hoverline1,hoverline2',
    'after:description'
    );

    in deinem Fluid-Template kannst du dann so darauf zugreifen:

    {file.properties.hoverline1}

    https://github.com/groundstack-org

  • Teisinger Teisinger
    Jedi-Meister
    0 x
    331 Beiträge
    23 Hilfreiche Beiträge
    26. 03. 2018, 18:59

    achso ersteres kannst du natürlich nur für das ganze CE-Element.
    Letzteres macht dir bei jedem Bild / Media ein extra Feld.

    https://github.com/groundstack-org

  • mimii mimii
    Jedi-Ratsmitglied
    0 x
    577 Beiträge
    1 Hilfreiche Beiträge
    27. 03. 2018, 10:14

    Danke für die ausführliche Erklärung,

    kurz der Hintergrund. Ich möchte aktuell eine Animation mit mehreren Bildern mit waypoints und animate.css erstellen. Das HTML hierzu soll so aussehen:
    [code]<div class="row>
    <div class="col-md-6">
    <p>Hier Text</p>
    </div>
    <div class="col-md-6 d-none d-md-block">
    <div class="position-relative">
    <img src="bild_1.png" class="img-fluid position-absolute animated bounceIn">
    <img src="bild_2.png" class="img-fluid position-absolute animated bounceIn">
    <img src="bild_3.png" class="img-fluid position-absolute animated bounceIn">
    </div>
    </div>
    </div>
    [/code]
    Das <div class="position-relative"> mach ich über's Layout, in dem das Feld im fluid Template abfrage und da die entsprechende Klasse setze. "Problematisch" wird' bei den Bilder die animiert werden sollen. Hier können die Klassen absolut variabel sein. Mal brauch ich "img-fluid" mal nicht, ist nur ein Bild in der Animation, so benötigt man das "position-absolute" nicht, "bounceIn" könnte auch "fadeIn" oder ein anderer Effekt von animate.css sein.

    Das eben mal per Hand programmaieren ist nicht das Thema, aber das Ganze flexibel in TYPO3 abbilden, uff. Daher habe ich schon fast überlegt, dafür ein HTML-Element anzulegen... was für mich kein Proflem ist, aber später für einen Redakteur ohne HTML-Kenntnisse wird es da schon schwierig.

    Generell fände ich absolut hilfreich, wenn man jeglichem CE eigene (in meinem Fall Boostrap-)Klassen nach Belieben zuweisen könnte, z.B in dem man dem Reiter "Allgemein" im Bereich "Inhaltselement" ein Feld einbindet, in dem ein oder mehrere Klassen eingetragen werden können, die dann im Fluid dem CE hinzugefügt werden. Ich vermute da aber seeeehr viel Arbeit dahinter?

    Ich denke mal noch ein bisschen drauf rum und bin für jede Idee offen.

    Viele Grüße
    mimii

  • Teisinger Teisinger
    Jedi-Meister
    0 x
    331 Beiträge
    23 Hilfreiche Beiträge
    27. 03. 2018, 19:30

    Also es ist ja nicht mehr Aufwand als ich dir oben schon geschrieben habe... Also quasi keiner... :D
    Allerdings wenn du das Feld im Reiter "Allgemein" hinzu fügst, hast du ja wieder das Problem das es dem ganzen Element nur einmal zugewiesen werden kann und nicht jedem einzelnem Bild.
    So wie ich es dir oben gezeigt habe, bekommt jedes Bild im BE ein eigenes Feld...

    Du kannst aber auch die Extension "mask" verwenden - empfohlen ist hierbei per "mask_export" eine eigene Extension zu machen. (ist aber kein muss, soviel ich aktuell weiß)
    Das wäre für dich dann einfach drag n drop ein eigenes CE erstellen.

    https://github.com/groundstack-org

  • 1