Neu 60/40 Grid aus foreach Schleife?

[Groundhog]

Hallo mal wieder,


Ich möchte in der News Overview ein unregelmäßiges Grid erzeugen. Dabei sollen sich 60% / 40% Boxen, mit 40% / 60% Boxen Reihenweise abwechseln. Die einzelnen News Vorschauen kommen aus einer foreach Schleife aus blogs/overview.tpl.


Kann ich ohne Javascript und CSS irgendwie so ein abwechselndes 60/40er Raster erzeugen?
Mit Css sollte es ja nicht das Problem sein (nth-child mit prozentueller width sollte ja gehen), ebenso könnte man ja auch die Klassen mittels JS austauschen....(remove/addClass). Gehts aber auch anders?

 

[css-umsetzung]

Du kannst hier mit verschiedenen Sachen arbeiten, zum einen über css, dann über JS was ich aber ausschließen würde weil es keinen Sinn macht und unnötig den Browser stresst.

über smarty kannst du mit cycle arbeiten https://www.smarty.net/docsv2/de/language.function.cycle.tpl
Oder über modulo in einer foreach schleife indem du den iterator abfragst https://www.smarty.net/docsv2/de/language.function.foreach.tpl

Der beste weg ist aber vermutlich cycle.

 

[Groundhog]

@css-umsetzung Du bist der Hammer!

Mal davon abgesehen dass ich ein komplettes Smarty Lulu bin, funktioniert das mit {cycle} bereits super. Ich bekomme jetzt pro Beitrag eine andere Klasse....aber, wie dreh ich das um....

Ziel ist folgendes: 60/40/40/60/60/40
Aktuell hab ich : 40/60/40/60/40/60

Somit müsste nach der 2ten Ausgabe nicht direkt widerholt, sondern 1 mal übersprungen werden..

EDIT: Vergiss es...Ich Trottel...hab {cycle} einfach 4 Werte gegeben...nicht nur 2...jetzt läufts 😀

 

[FPrüfer]

Hallo,
du musst einfach für die erste Box {cycle name="left" values="40,60"} und für die Zweite {cycle name="right" values="60,40"} verwenden.

 

[Groundhog]

Mein aktueller Code sieht so aus:

{foreach name=uebersicht from=$oNewsUebersicht_arr item=oNewsUebersicht}
    <div class="blogbox {cycle values="col-md-7,col-md-5,col-md-5,col-md-7"}"  itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
...
{/foreach}

Ist das so korrekt?

 

[Groundhog]

Hallo,
du musst einfach für die erste Box {cycle name="left" values="40,60"} und für die Zweite {cycle name="right" values="60,40"} verwenden.

Zeilen gibt es ja eigentlich eine da sich die Blogbeitragsvorschauen ja nicht über Zeilen anordnen, sondern nur über die Spalten. Die Zeilen entstehen ja gezwungenermaßen. Die beabsichtigte Zeile (<div class=".row"></div>) muss ja vor die foreach Schleife, sonst wird ja pro Item eine Row erzeugt.

 

[css-umsetzung]

Ja das mit vier Werten macht Sinn, das ist schon gut wie du es da gemacht hast.