1

I'm using UnderscoreJs and my code now is: 

<script type="text/template" id="image-template">
<% _.each(images, function(image){%>
<div class="row">
    <div class="col-md-4 myimg">    
        <img src="<%=image.imgsrc%>" class="img-thumbnail"/>
    </div>
</div>
<% }); %>

</script>

But this is creating a new row for every image. I know i shouldn't do it this way. What I want to achieve is to show 3 images in every row and thn move on to the next row with another 3 <div class="col-md-4 myimg"> for the next 3 images. Or only 2 of those DIVs if there are only 2 more images. There may be 20 images so i will need 7 rows, 6 with 3 of those DIVs and the last with only 1.

How can I achieve this?

Many thanks.

Somename
  • 3,376
  • 16
  • 42
  • 84
  • Set the row outside of your loop. Bootstrap should automatically start on the next line when the total of columns is > 12. Please see getbootstrap.com/css. – vandijkstef Aug 13 '16 at 14:08
  • So i removed the `row` div from the US script and set it like this: `
    ` and showing the columns in `results` div. BS is automatically starting on the new line. It does that even without the `row` class. I want the `row` class added for each new row.     – Somename Aug 13 '16 at 15:12

2 Answers2

1

I know you asked for a underscore solution, but I would use lodash's chunk. You can create your own chunk function as outlined in this answer if you would prefer.

<script type="text/template" id="image-template">
<% _.each(_.chunk(images, 3), function(chunk){%>
  <div class="row">
  <% _.each(chunk, function(image){%>
    <div class="col-md-4 myimg">    
      <img src="<%=image.imgsrc%>" class="img-thumbnail"/>
    </div>
  <% }); %>
  </div>
<% }); %>
</script>
Community
  • 1
  • 1
Tholle
  • 108,070
  • 19
  • 198
  • 189
1

As commented, and:

  • A row is used to group elements together within a container. The word row is slightly stupid, since it doesn't enforce rows. It's really about the grouping
  • Bootstrap will automatically fill the "row" (or container/parent element) untill it's over 12 cols, where each col uses 1/12 of the width (taking gutter and spacing with it)
  • A div/html element that has display:block; wil automatically start on a new line. (Use inline-block or floats for that) You will notice bootstrap is completely floated

Taking the above I suggest the following code, where the container should be the box all the images are in. I'd like to add in col-xs-12 to ensure mobile visibility (1 per "row").

Please use the following CSS selector to target your images

.myImgs > div { // All direct descendants of myImgs }

.myImgs img { // All images within myImgs } 
or 
.myImgs > div > img { // Extremely specific }

-

<script type="text/template" id="image-template">

<div class="container myImgs">
    <% _.each(images, function(image){%>
    <div class="col-xs-12 col-md-4">    
        <img src="<%=image.imgsrc%>" class="img-thumbnail"/>
    </div>
    <% }); %>
</div>
</script>

If you really need the row, try to get a counter within the loop. (1 on first pass, 2on second, 3 on third etc.) U can work with conditons there: If (number%3 === 0) {end row + new row}. Open and close the row as well before and after the loop. % is called modulus, and gives the remainder/offset. So only valid multiplication of 3 will return 0 (3, 6, 9 etc). Small note: 0%3 = 0

vandijkstef
  • 407
  • 3
  • 8