Hallo zusammen,
ich hänge immer noch an meinem Baukasten und komme jetzt an den Punkt der responsiven Bilder.
Ich überlege derzeit jedes Bild in 10 Größen vorzuhalten (10% - 100% in 10%-Schritten). Die Bilder werden bei mir mittels <picture> und <source> unter zur Hilfenahme des Picturefill-Polyfills eingebunden.
<picture>
<source srcset="$CMS_REF(st_mediaref, abs:1, res:"XX_Prozent")$" media="(min-width: 1000px)">
<source srcset="$CMS_REF(st_mediaref, abs:1, res:"XX_Prozent")$" media="(min-width: 800px)">
<source srcset="$CMS_REF(st_mediaref, abs:1, res:"XX_Prozent")$" media="(min-width: 600px)">
<img srcset="$CMS_REF(st_mediaref, abs:1, res:"XX_Prozent")$" alt="">
</picture>
Jetzt muss ich halt nur wissen welches der 10 Bilder ich in welcher <source> referenzieren muss
Mit verschachtelten FS_LIST baue ich das Grid-System von Bootstrap auf. Jede Verschachtelung kann je Breakpoint (xs,sm,md,lg) den Wert 1-12 haben. Im Bild-Template muss ich dann eben sowas haben wie:
XS [12,12,12]
SM [12,6,6]
MD [12,4,4]
LG [12,3,3]
wobei jede Zahl für eine Ebene der Verschachtelung (können u.U. auch durchaus mehr als drei sein) steht
Daraus ergibt sich dann
XS = 100% -> aufrunden auf nächste 10% = 100%
SM = 25% -> aufrunden auf nächste 10% = 30%
MD = 16% -> aufrunden auf nächste 10% = 20%
LF = 9% -> aufrunden auf nächste 10% = 10%
<picture>
<source srcset="$CMS_REF(st_mediaref, abs:1, res:"100_Prozent")$" media="(min-width: 1000px)">
<source srcset="$CMS_REF(st_mediaref, abs:1, res:"30_Prozent")$" media="(min-width: 800px)">
<source srcset="$CMS_REF(st_mediaref, abs:1, res:"20_Prozent")$" media="(min-width: 600px)">
<img srcset="$CMS_REF(st_mediaref, abs:1, res:"10_Prozent")$" alt="">
</picture>
Wie iteriere ich am Besten durch die verschachtelten FS_LIST in welchen die Werte gesetzt werden?
Danke & Gruß
Ole