Tweet
Hi,
ich würde gerne responsive Images auf Basis der Contao-Bildgrößen im Custom-Element Background-Image/Color [Start] verwenden.
Folgenden Plan habe ich mir überlegt:
Über das image-set (CSS) sind responsive Images möglich, zB:
.smart-image
{
background-image: -webkit-image-set(
url('http://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Cat_poster_2.jpg/297px-Cat_poster_2.jpg') 1.0x,
url('http://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Cat_poster_2.jpg/594px-Cat_poster_2.jpg') 2.0x
);
}
Leider funktioniert das nicht in allen Browsern.
Allerdings gibt es ein Polyfill (https://github.com/wtfil/image-set-polyfill), das dieses Feature in Javascript ergänzt.
Wenn das funktioniert, dann könnte man das Template 'customelement_bgimage_start' umbauen.
Da ist ja das Bild als Hintergrundbild im style-Attribut eingebunden:
<div class="ce_bgimage-image" style=" ... background-image: url(<?php echo \FilesModel::findByPk($this->field('image')->value())->path; ...
Ich würde dann das background-image rausnehmen und eine CSS-Klasse einfügen.
Die CSS-Klasse müsste man dann ebenfalls im Template anlegen, zB nach dem Muster:
<style>
.bg-class-#ID# { ... image-set ... }
</style>
Das Hintergrund-Bild könnte man in Contao als Bildgröße zB mit 1facher und 2facher Auflösung anlegen und die Pfade im Template abfragen.
Mit den Pfaden baut man dann die CSS-Anweisung zusammen.
Könnte das funktionieren oder mache ich da einen grundsätzlichen Denkfehler?
Vielen Dank im Voraus
ich würde gerne responsive Images auf Basis der Contao-Bildgrößen im Custom-Element Background-Image/Color [Start] verwenden.
Folgenden Plan habe ich mir überlegt:
Über das image-set (CSS) sind responsive Images möglich, zB:
.smart-image
{
background-image: -webkit-image-set(
url('http://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Cat_poster_2.jpg/297px-Cat_poster_2.jpg') 1.0x,
url('http://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Cat_poster_2.jpg/594px-Cat_poster_2.jpg') 2.0x
);
}
Leider funktioniert das nicht in allen Browsern.
Allerdings gibt es ein Polyfill (https://github.com/wtfil/image-set-polyfill), das dieses Feature in Javascript ergänzt.
Wenn das funktioniert, dann könnte man das Template 'customelement_bgimage_start' umbauen.
Da ist ja das Bild als Hintergrundbild im style-Attribut eingebunden:
<div class="ce_bgimage-image" style=" ... background-image: url(<?php echo \FilesModel::findByPk($this->field('image')->value())->path; ...
Ich würde dann das background-image rausnehmen und eine CSS-Klasse einfügen.
Die CSS-Klasse müsste man dann ebenfalls im Template anlegen, zB nach dem Muster:
<style>
.bg-class-#ID# { ... image-set ... }
</style>
Das Hintergrund-Bild könnte man in Contao als Bildgröße zB mit 1facher und 2facher Auflösung anlegen und die Pfade im Template abfragen.
Mit den Pfaden baut man dann die CSS-Anweisung zusammen.
Könnte das funktionieren oder mache ich da einen grundsätzlichen Denkfehler?
Vielen Dank im Voraus
Kommentar