LISE items schikken onevenen even lijn andere template

[pedes]

Ik gebruik LISE.
Ik wil met LISE 2 items naast elkaar tonen en dan iedere keer onder elkaar.
Maar de 1ste, 3de, 5de, ect.. rij met een andere template (layout) dan de 2de, 4de, 6de, ect... .

Ik hebruik hiervoor vb {if $smarty.foreach.loop.index % 4 == 3}
Maar ik krijg het niet voor elkaar, na 2 lijnen loopt het weer mis en wordt de verkeerde template gebruikt.

Iemand een hint die weet hoe ik dit doe in smarty, om die LISE rijen juist te tonen, met de juiste template?

Mvg,
Peter

[velden]

Code: Select all

{foreach ... name=loop}

  {if $smarty.foreach.loop.index % 2 == 0}
    [open de rij]

    [template eerste item in de rij]

  {else}

    [template tweede item in de rij]

    [sluit de rij]
  {/if}

{/foreach}

Zoiets zou ik verwachten. Merk op dat het niet perfect is want bij een oneven aantal wordt de laatste rij niet afgesloten. Dat kun je wel oplossen met wat extra checks met .loop.first en .loop.last

[pedes]

Dank u velden voor de reply

Echter lukt het niet ...
De site zit online via deze link

Op de home zie 6 blokken (3 rijen... massage, gezichtsverzorging, ect..), 1ste rij zijn 2 LISE items, 2de rij zijn 2 LISE items en 3de rij zijn 2 LISE items.
1ste en 3de rij moeten dezelfde layout hebben, 2de rij zit de afbeelding voor de tekst (andere layout).

Wat bedoel met [open de rij] ... [sluit de rij] in uw voorbeeld?

Mvg
Peter

[velden]

Misschien kun je je LISE template posten?

[pedes]

Dit is de LISE template die ik gebruik.
Nu via een {if $smarty.foreach.loop.index % 4 == 3 OR $smarty.foreach.loop.index % 3 == 2}
kan ik het enigzins verkrijgen enkel het laatste item staat verkeerd.
Ik vermoed dus dat het compleet anders moet.

Code: Select all

{foreach from=$items item=item name="loop"}
{if $smarty.foreach.loop.index % 4 == 3 OR $smarty.foreach.loop.index % 3 == 2}
  <div class="col-md-6">
     <div class="c-content-tile-1 c-bg-brown-2">
         <div class="row">
             <div class="col-sm-6">
                  <div class="c-tile-content c-arrow-left c-arrow-brown-2 c-content-overlay">
                      <div class="c-overlay-wrapper">
                          <div class="c-overlay-content">                            
                             <a href="{$item->fielddefs.itemurl.value|cms_escape}" title="{$item->title}">
                              <i class="icon-link"></i>
                             </a>
                          </div>
                       </div>
                     <div class="c-image c-overlay-object" data-height="height" style="background-image: url(/uploads/images/homeitem/{$item->fielddefs.itemafbeelding.value|cms_escape})"></div>
                   </div>
                </div>
                <div class="col-sm-6">
                  <div class="c-tile-content c-content-v-center" data-height="height">
                     <div class="c-wrapper">
                       <div class="c-body c-center">
                            <h3 class="c-tile-title c-font-25 c-line-height-34 c-font-uppercase c-font-bold c-font-white">{$item->title}</h3>
                             <p class="c-tile-body c-font-white">{$item->fielddefs.subtekst.value|cms_escape}</p>
                            <a href="{$item->fielddefs.itemurl.value|cms_escape}" class="btn btn-sm c-btn-white c-btn-uppercase c-btn-bold c-btn-border-1x c-btn-square">Lees meer</a>
                       </div>
                    </div>
                 </div>
             </div>
         </div>
     </div>
  </div>
{else}
  <div class="col-md-6">
     <div class="c-content-tile-1 c-bg-brown-2">
        <div class="row">
           <div class="col-sm-6">
             <div class="c-tile-content c-content-v-center" data-height="height">
                <div class="c-wrapper">
                  <div class="c-body c-center">
                    <h3 class="c-tile-title c-font-25 c-line-height-34 c-font-uppercase c-font-bold c-font-white">{$item->title}</h3>
                     <p class="c-tile-body c-font-white">{$item->fielddefs.subtekst.value|cms_escape}</p>
                      <a href="{$item->fielddefs.itemurl.value|cms_escape}" class="btn btn-sm c-btn-white c-btn-uppercase c-btn-bold c-btn-border-1x c-btn-square">Lees meer</a>
                  </div>
                </div>
             </div>
           </div>
           <div class="col-sm-6">
             <div class="c-tile-content c-arrow-right c-arrow-brown-2 c-content-overlay">
               <div class="c-overlay-wrapper">
                 <div class="c-overlay-content">
                   <a href="{$item->fielddefs.itemurl.value|cms_escape}" title="{$item->title}">
                    <i class="icon-link"></i>
                   </a>
                 </div>
               </div>
             <div class="c-image c-overlay-object" data-height="height" style="background-image: url(/uploads/images/homeitem/{$item->fielddefs.itemafbeelding.value|cms_escape})"></div>
            </div>
          </div>
        </div>
     </div>
  </div>
{/if}
{/foreach}

[velden]

Ik zou proberen:

Code: Select all

{if $smarty.foreach.loop.index % 4 == 0  || ($smarty.foreach.loop.index -1) % 4 == 0}

[pedes]

Dank je Velden voor uw hulp, dit werk zeer zeker.

Ik ben geen zo'n smarty knobbel... wat betekend het juist in verstaanbare tekst...

Thnks
Peter

[velden]

wat betekend het juist in verstaanbare tekst

Dat het doet wat jij bedoelt

Maar als ik zo naar de site kijk denk ik dat je het misschien beter met css kunt oplossen. Want nu werkt het wel aardig voor brede browser breedte maar als je die smaller maakt wordt het er ook niet mooier op (persoonlijke mening).

Wellicht wat werken met het push/pull mechanisme van Bootstrap?

[HarmO]

Een beetje late reactie,
maar ik zou hier zoals velden zegt met CSS werken.

media queries en ":nth-child(n+2)"-style css selectors,
want dan kan je dit makkelijk en mooi aanpassen voor zowel desktop als mobiele versies.