grouping a loop

gereby
(@gereby)

8 years, 7 months ago

i would like to loop a custom post type and group the elements by count of 4 for a multicolumn bootstrap carousel.

is there a way of “grouping” the loop?

thank you!!!

my desired code:

<div id=”ged-carousel-example-generic” class=”ged-carousel slide”>
<!– Indicators –>
<ol class=”carousel-indicators”>
<li data-target=”#ged-carousel-example-generic” data-slide-to=”0″ class=”active”>
<li data-target=”#ged-carousel-example-generic” data-slide-to=”1″>
<li data-target=”#ged-carousel-example-generic” data-slide-to=”2″>

<!– Wrapper for slides –>
<div class=”carousel-inner”>
<!– Slide –>
<div class=”item active”>
<div class=”row”>
<div class=”col-sm-3 col-xs-6″>
<img src=”http://placehold.it/260×180″ alt=””/>
<div class=”carousel-caption”>This is a caption</div>
</div>
<div class=”col-sm-3 col-xs-6″>
<img src=”http://placehold.it/260×180″ alt=””/>
<div class=”carousel-caption”>This is a caption</div>
</div>
<div class=”col-sm-3 col-xs-6″>
<img src=”http://placehold.it/260×180″ alt=””/>
<div class=”carousel-caption”>This is a caption</div>
</div>
<div class=”col-sm-3 col-xs-6″>
<img src=”http://placehold.it/260×180″ alt=””/>
<div class=”carousel-caption”>This is a caption</div>
</div>
</div>
</div>
<!– Slide –>
<div class=”item”>
<div class=”row”>
<div class=”col-sm-3 col-xs-6″>
<img src=”http://placehold.it/260×180″ alt=””/>
<div class=”carousel-caption”>This is a caption</div>
</div>
<div class=”col-sm-3 col-xs-6″>
<img src=”http://placehold.it/260×180″ alt=””/>
<div class=”carousel-caption”>This is a caption</div>
</div>
<div class=”col-sm-3 col-xs-6″>
<img src=”http://placehold.it/260×180″ alt=””/>
<div class=”carousel-caption”>This is a caption</div>
</div>
<div class=”col-sm-3 col-xs-6″>
<img src=”http://placehold.it/260×180″ alt=””/>
<div class=”carousel-caption”>This is a caption</div>
</div>
</div>
</div>
<!– Slide –>
<div class=”item”>
<div class=”row”>
<div class=”col-sm-3 col-xs-6″>
<img src=”http://placehold.it/260×180″ alt=””/>
<div class=”carousel-caption”>This is a caption</div>
</div>
<div class=”col-sm-3 col-xs-6″>
<img src=”http://placehold.it/260×180″ alt=””/>
<div class=”carousel-caption”>This is a caption</div>
</div>
<div class=”col-sm-3 col-xs-6″>
<img src=”http://placehold.it/260×180″ alt=””/>
<div class=”carousel-caption”>This is a caption</div>
</div>
<div class=”col-sm-3 col-xs-6″>
<img src=”http://placehold.it/260×180″ alt=””/>
<div class=”carousel-caption”>This is a caption</div>
</div>
</div>
</div>
</div>

<!– Controls –>

<span class=”icon-prev”></span>

<span class=”icon-next”></span>

</div>

https://wordpress.org/plugins/custom-content-shortcode/

Viewing 1 replies (of 1 total)

Plugin Author

(@miyarakira)

I just made a new plugin update to make this easier. I’ve encountered the same situation before where I needed to group posts.

For example:

<!-- Wrapper for slides -->
<div class="carousel-inner">
  [loop type=post count=12]
    [if every=5 first=true]
      <!-- Slide -->
      <div class="item">
      <div class="row">
    [/if]

    <div class="col-sm-3 col-xs-6">
      <img src="http://placehold.it/260x180" alt=""/>
      <div class="carousel-caption">This is a caption</div>
    </div>

    [if every=4 last=true]
      </div></div>
    [/if]
  [/loop]
</div>

Viewing 1 replies (of 1 total)

The topic ‘grouping a loop’ is closed to new replies.

Tags