TYPO3 9.5 – Bild Eigenschaften erweitern – sys_file_reference – responsive Image

Seit der TYPO3 Version 7, 8, 9 und 10 ist TYPO3 FLUID Content vorhanden. Ich möchte Euch in dem Beitrag zeigen, wie Ihr die Bild-Eigenschaften (sys_file_reference) erweitern könnt.

In meinen Beispiel zeige ich Euch eine extra Checkbox „Responsive Bild“ und verändere mit der Abfrage später die Ausgabe von dem TYPO3 Fluid Image.

Voraussetzung ist eine eigene kleine Extension die fertig aufgebaut und installiert ist.
Ihr müsst dazu die Datenbank erweitern, das Bilder TCA im ContentElement erweitern und dann noch das FLUID Image Template auslagern.

Datenbank erweitern:

(Mein neues Feld heißt „image_responsive“ und hat die Eigenschaften für eine Checkbox)

#
# Table structure for table 'sys_file_reference'
#
CREATE TABLE sys_file_reference (
    image_responsive smallint unsigned DEFAULT '0' NOT NULL,
);

(Vergesst später nicht im BE Install einen Datenbank abgleich – Analyze Database Structure zu machen und den TYPO3 Cache zu löschen!)

TCA erweitern:

Nun erstellen wir in unserem Ordner in der Datei tt_content.php
(ext/XXX/Configuration/TCA/Overrides/tt_content.php)
folgende PHP Konfigurationen:

<?php
defined('TYPO3_MODE') || die();

/***************
 * Add to the image a checkbox - Responsive Image
 */
$temporaryImageResponsive = array(
    'image_responsive' => array (
        'exclude' => 0,
        'label' => 'Responsives Bild',
        'config' => array (
            'type' => 'check',
        )
    )
);

// add field to tca
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTCAcolumns(
    'sys_file_reference',
    $temporaryImageResponsive
);

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addToAllTCAtypes(
    'sys_file_reference',
    'image_responsive',
    '',
    'before:title'
);

// add new field image_responsive in Image Overlay
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addFieldsToPalette(
    'sys_file_reference',
    'imageoverlayPalette',
    'image_responsive'
);

Somit wird das neu erstellte TCA Element auch im Backend an der richtigen Stelle eingebunden.
Die Bilder Eigenschaften sind alle an dem sys_file_reference => imageoverlayPalette angeknüft.

Datenbank Feld Zuweisung:

Desweiteren müssen wir noch die TYPO3 Core Eigenschaften der FileReference mit unseren neuen Feld erweitern:
(ext/XXX/Classes/Domain/Model/FileReference.php)
folgende PHP Konfiguration benötigt ihr:

<?php
namespace XXX\XXXX\Domain\Model;

class FileReference extends \TYPO3\CMS\Core\Resource\FileReference {

    /**
     * imageResponsive
     *
     * @var integer
     */
    protected $imageResponsive;

    /**
     * Returns the imageResponsive
     *
     * @return integer $imageResponsive
     */
    public function getImageResponsive() {
        return $this->imageResponsive;
    }

    /**
     * Sets the imageResponsive
     *
     * @param integer $imageResponsive
     * @return void
     */
    public function setImageResponsive($imageResponsive) {
        $this->imageResponsive = $imageResponsive;
    }
}

Bearbeitet dazu auch den namespace in der Datei und tragt dort Euren Namespace von Eurer Extension ein.

FLUID Tempalte Image auslagern:

Als Beispiel lagere ich nun nur die Image.html Datei aus und bearbeite als Beispiel das Template:
(ext/XXX/Resources/Private/Partials/FluidStyledContent/Media/Rendering/Image.html)
Pfad kann auch bei anders aufgebaut sein.

Hier habe ich mir die originale TYPO3 Code FLUID Datei kopiert: typo3/sysext/fluid_styled_content/Resources/Private/Partials/Media/Rendering/Image.html

Das neue Datenbank-Feld ist nun mit folgender Ausgabe erreichbar:

{file.referenceProperties.image_responsive}
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
    <f:if condition="{file.referenceProperties.image_responsive}">
        <f:then>
            <img src="{f:uri.image(image:file, width:dimensions.width, treatIdAsReference:1, absolute:1)}" class="image-embed-item img-fluid" alt="{file.alternative}">
        </f:then>
        <f:else>
            <f:media class="image-embed-item" file="{file}" width="{dimensions.width}" height="{dimensions.height}" alt="{file.alternative}" title="{file.title}" />
        </f:else>
    </f:if>
</html>

Ich habe nun mit einer einfachen IF Abfrage zwei unterschiedliche Bild – Ausgaben aufgebaut.
Natürlich könnt ihr auch die Bild-Eigenschaften (sys_file_reference) beliebig viel erweitern und anpassen.

Eure Meinung zu dem Artikel ist gefragt! Schreibt mir ein Kommentar

Hat Euch der Artikel weitergeholfen oder gefallen?
Ich freue mich auf einen Blick auf meine Amazon-Wunschliste. Vielen Dank!

Hat Euch der Artikel geholfen oder gefallen?
Ich freue mich auf einen Blick auf meine Amazon-Wunschliste.
Vielen Dank!

Ich bin freiberuflicher TYPO3-Entwickler, Web-Entwickler und Frontend-Entwickler. Ich arbeite im und für das Web etwas mehr als 12 Jahre. Mehr Infos zu der TYPO3 Internetagentur - INGENIUMDESIGN.

Leave a Reply

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Next ArticleTYPO3 9.5 - 404 Error Seite - site config