Seite 1 von 1

Teaser-Module <picture>-tauglich machen

Verfasst: Mo 20. Feb 2017, 14:54
von Faar
Mit dem Teasermodul kann man theoretisch sehr viel machen aber was hier nicht geht, das sind Varianten von Bildgrößen, um das <picture>-Tag zu bedienen.
Inzwischen ist die Browser-Unterstützung dafür besser geworden, so dass man diesen Html-Tag auch eher einsetzen kann.

Code: Alles auswählen

 
<picture>
  <source media="(min-width: 300px)" srcset="img_small.jpg">
  <source media="(min-width: 600px)" srcset="img_middle.jpg">
  <source media="(min-width: 900px)" srcset="img_large.jpg">
  <img src="img.jpg" alt="Dingens" style="width:auto;">
</picture> 
Wie man unschwer erkennen kann, handelt es sich hier um 4 verschiedene Bilder (drei würden meistens auch reichen), die je nach Media-Query angezeigt werden sollen.
Der CMS-Teaser kann aber nur jeweils ein Bild bearbeiten und in den Cache legen.
Wenn die Möglichkeit bestünde, dort anzugeben dass er mehrere Größen aus den Bildern machen soll und denen einfach einen Suffix mit small, medium, large angehängt wird, dann könnte man das im Template gut so einbauen.
Das <img>-Tag mit "img.jpg" wäre dann das Standardbild, meistens das größte, für alle Fälle.
:roll:

Re: Teaser-Module <picture>-tauglich machen

Verfasst: Di 21. Feb 2017, 14:46
von Oldperl
Servus,

gute Idee! :D
Na dann mach mal... :P

Gruß aus Franken

Ortwin