Questions & Answers

[Ole]

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

[marza]

Hallo Ole,

in der API (FormDataList) gibt es einen Iterator. Das bedeutet ich kann das Ergebnis einer FS_LIST in eine For-Schleife packen.

Wenn eine FS_List wiederum eine FS_List beinhaltet, dann muss man eben eine For-Schleife in eine For-Schleife verschachteln.

Oder habe ich Dein Problem nicht ganz verstanden?

Sieh Dir mal bitte das Beispiel 2 (Link For-Schleife) an:

$CMS_FOR(for_wrapper, [7 .. 14])$
  Index $CMS_VALUE(#for.index)$: Wert $CMS_VALUE(for_wrapper)$<br>
$CMS_END_FOR$

Das erzeugt dann folgende Ausgabe:

Index 0: Wert 7
Index 1: Wert 8
Index 2: Wert 9
Index 3: Wert 10
Index 4: Wert 11
Index 5: Wert 12
Index 6: Wert 13
Index 7: Wert 14

Reicht das nicht schon, um eine Liste des gleichen Bildes in verschiedenen Auflösungen auszugeben? Mit Modulo kann man aus einer Reihe von 0 bis 100 alle 10er Schritte rausfiltern (x % 10 == 0).

Gruß Marian

[MichaelaReydt]

Hallo Ole,

benötigst du noch weiter Hilfe oder hat Marians Antwort dir bereits geholfen? In diesem Fall wäre es toll, wenn du seine "richtige Antwort" entsprechend markiest.

Solltest du zwischenzeitlich eine eigene Lösung gefunden haben, wäre es super, wenn du diese hier bereit stellst.

Viele Grüße

Michaela