Hallo,
über DCA habe ich mir bei den Artikeln ein Option für ein Artikelbild erstellt:
PHP-Code:
...
$GLOBALS['TL_DCA']['tl_article']['fields']['articleImage'] = array
(
'label' => &$GLOBALS['TL_LANG']['tl_article']['articleImage'],
'inputType' => 'fileTree',
'exclude' => true,
'eval' => array('fieldType'=>'radio', 'files'=>true, 'mandatory' => false, 'filesOnly'=>true, 'extensions'=>\Config::get('validImageTypes')),
'sql' => "blob NULL"
);
...
dieses kann ich nun auch zb. mittles
PHP-Code:
{{picture::<?= StringUtil::binToUuid($this->articleImage) ?>?size=1}}
aufrufen und das Picture Element inklusive der verschiedenen Bildgrößen aus der tl_image_size (ID 1) wird ausgegeben.
Code:
<picture>
<source srcset="assets/images/1/startseite-f2101da9.png" media="(max-width: 640px)" width="640" height="300">
<source srcset="assets/images/b/startseite-c2442ffc.png" media="(max-width: 1024px)" width="860" height="336">
<source srcset="assets/images/e/startseite-9a39114b.png" media="(max-width: 1200px)" width="1050" height="336">
<source srcset="assets/images/4/startseite-1fe31047.png" media="(max-width: 1440px)" width="1210" height="336">
<source srcset="assets/images/b/startseite-184de48d.png" media="(max-width: 1920px)" width="1500" height="313">
<source srcset="assets/images/b/startseite-677f79ec.png" media="(max-width: 2800px)" width="1500" height="252">
<img src="assets/images/e/startseite-93683c85.png" alt="" width="1500" height="230">
</picture>
Gerne würde ich dieses nun aber als Hintergrundbild per CSS & media queries ausgeben lassen...
in etwa so:
Code:
<?php
echo "<style type='text/css' media='screen'>
@media (max-width: 2800px) { .mod_article.bgimage { background-image: url(". pfadangabe . "); } }
@media (max-width: 1920px) { .mod_article.bgimage { background-image: url(". pfadangabe . "); } }
@media (max-width: 1440px) { .mod_article.bgimage { background-image: url(". pfadangabe . "); } }
@media (max-width: 1280px) { .mod_article.bgimage { background-image: url(". pfadangabe . "); } }
@media (max-width: 1024px) { .mod_article.bgimage { background-image: url(". pfadangabe . "); } }
@media (max-width: 640px) { .mod_article.bgimage { background-image: url(". pfadangabe . "); } }
</style>";
?>
Gäbe es eine Möglichkeit die Pfade aus dem "picture"-object in dem mod_article.html zu exrahieren...?
ähnlich eventuell wie beim PageImage modul von Terminal42
https://github.com/terminal42/contao...ckground.html5