Ergänzendes Feld zur Auswahl eines webp-Bildes im Bild-Inhaltselement
Ich möchte gerne in der normalen Bild-Darstellung von Contao ein zusätzliches optionales Auswahlfeld für ein webp-Bild einfügen.
Die Anwender sollen also wie üblich den Button "Auswahl wählen" haben, und darunter eine Dateiauswahl um optional ergänzend das selbe Bild im webp-Format aus der Dateiverwaltung auswählen zu können.
Mein Ansatz war bisher so:
/app/Resources/contao/dca/tl_content.php mit diesem Inhalt angelegt:
PHP-Code:
<?php
// Anpassung der Palette
$GLOBALS['TL_DCA']['tl_content']['palettes']['image'] = str_replace
(
'singleSRC',
'singleSRC,webpSRC',
$GLOBALS['TL_DCA']['tl_content']['palettes']['image']
);
// Hinzufügen der Feld-Konfiguration
$GLOBALS['TL_DCA']['tl_content']['fields']['webpSRC'] = array
(
'label' => &$GLOBALS['TL_LANG']['tl_content']['webpSRC'],
'exclude' => true,
'inputType' => 'fileTree',
'eval' => array('mandatory' => false, 'filesOnly' => true, 'fieldType'=>'radio', 'extensions' => 'webp', 'tl_class' => 'clr'),
'wizard' => array(
array('tl_content', 'pagePicker')
),
'sql' => "binary(16) NULL"
);
/app/Resources/contao/languages/de/tl_content.php mit diesem Inhalt angelegt:
PHP-Code:
<?php
$GLOBALS['TL_LANG']['tl_content']['webpSRC'] = array
(
'Bild (Webp-Format)',
'Dasselbe Bild optional auch im Webp-Format hinterlegen. Wichtig: Das Originalformat wie .jpg, .png oder .gif muss zugwiesen sein!'
);
In den Themes habe ich das picture_default.html5 Template angepasst:
PHP-Code:
<picture>
<?php if ($this->sources): ?><!--[if IE 9]><video style="display: none;"><![endif]--><?php endif; ?>
<?php if ($this->webpSRC): ?>
<source srcset="<?= $this->webpSRC['src'] ?>" alt="<?= $this->alt ?>"<?php if (!empty($this->img['sizes'])) echo ' sizes="' . $this->img['sizes'] . '"'; elseif (!$this->sources && !empty($this->img['width']) && !empty($this->img['height'])) echo ' width="' . $this->img['width'] . '" height="' . $this->img['height'] . '"'; ?> type="image/webp">
<?php endif ?>
<?php if ($this->sources): ?>
<?php foreach ($this->sources as $source): ?>
<source srcset="<?= $source['srcset'] ?>"<?php if (!empty($source['sizes'])) echo ' sizes="' . $source['sizes'] . '"'; ?><?php if (!empty($source['media'])) echo ' media="' . $source['media'] . '"'; ?>>
<?php endforeach; ?>
<!--[if IE 9]></video><![endif]-->
<?php endif; ?>
<img src="<?= $this->img['src'] ?>"<?php if ($this->img['srcset'] !== $this->img['src']) echo ' srcset="' . $this->img['srcset'] . '"'; ?><?php if (!empty($this->img['sizes'])) echo ' sizes="' . $this->img['sizes'] . '"'; elseif (!$this->sources && !empty($this->img['width']) && !empty($this->img['height'])) echo ' width="' . $this->img['width'] . '" height="' . $this->img['height'] . '"'; ?> alt="<?= $this->alt ?>"<?php if ($this->title) echo ' title="' . $this->title . '"'; ?><?php if ($this->class || !empty($this->img['class'])) echo ' class="' . trim($this->class. ' ' . $this->img['class']) . '"'; ?><?= $this->attributes ?> itemprop="image">
</picture>
<?php if ($this->sources || $this->img['src'] !== $this->img['srcset']): ?>
<script>
window.respimage && window.respimage({
elements: [document.images[document.images.length - 1]]
});
</script>
<?php endif; ?>
Es funktioniert so leider noch nicht richtig.
Nach dem Anlegen des neuen Feldes im Datenbank-Install sowie Leeren der Caches im Contao Manager, steht das neue Feld an der gewünschten Stelle (z.B. im Inhaltselement "Bild") zur Verfügung.
Ich kann ein manuell in der Dateiverwaltung hinterlegtes webp-Bild auswählen und speichern.
Im Frontend kommt es aber nicht an. Contao schreibt zwar durch das angepasste Template das picture-Element, gibt aber das webp-Bild nicht ergänzend aus. Lass ich mir per
PHP-Code:
<?php $this->showTemplateVars(); ?>
im Template die Variablen darstellen, wird auch da das Feld webpSRC in keiner Form abgebildet.
Wo liegt mein Fehler?
Liste der Anhänge anzeigen (Anzahl: 1)
Vielleicht wäre der Einsatz von Contao 4.8 die einfachere Lösung. Dort ist das nämlich implementiert und zwar ohne, dass der Nutzer zusätzlich was hochladen muss, wenn ich es richtig verstanden habe. https://contao.org/de/news/contao_4-8-0.htmlAnhang 23002
