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:
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 TYPO3 Freelancer, TYPO3-Entwickler, Web-Entwickler und Frontend-Entwickler. Ich arbeite im und für das Web seit 2004. Mehr Infos zu der TYPO3 Internet-Agentur INGENIUMDESIGN.
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)
(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:
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:
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:
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
Ich freue mich auf einen Blick auf meine Amazon-Wunschliste. Vielen Dank!
Sebastian
Hat Euch der Artikel geholfen oder gefallen?
Ich freue mich auf einen Blick auf meine Amazon-Wunschliste.
Vielen Dank!
Ich bin TYPO3 Freelancer, TYPO3-Entwickler, Web-Entwickler und Frontend-Entwickler. Ich arbeite im und für das Web seit 2004.
Mehr Infos zu der TYPO3 Internet-Agentur INGENIUMDESIGN.
Besucht auch unser TYPO3 Hilfe Forum.
Andere interessante Artikel:
TYPO3 7.6 Seiteneigenschaften – Bild Ressourcen via FLUID auslesen TYPO3 7.6 – fluid_styled_content um eigene Konstanten erweitern TYPO3 – Image via typoscript und Datenbank auslesen TYPO3 – tt_news crop Bild-Ausschnitt positioniert TYPO3 – tx_news Bootstrap Carousel wenn mehr als ein BildNext ArticleTYPO3 9.5 - 404 Error Seite - site config