Using Twitter Bootstrap 2.3.2 I had set up Thumbnails rather quickly. Only to discover a few things;
1) The alignment was off on the second row of thumbnails.
2) Image sizes were different.
<div class="row"> <?php if ( ! empty($dies)): ?> <ul class="thumbnails"> <?php foreach ($dies as $die): ?> <li class="span4"> <div class="thumbnail"> <?php // your image dir here... $src = 'http://www.placehold.it/260&text=No+Image'; $attr = array( 'src' => $src, 'data-src' => $src, 'class' => 'media-object', 'height' => '180', 'width' => '260' ); echo img($attr); ?> <div class="caption"> <h3><?php echo ! empty($die->die_number) ? $die->die_number : ' '; ?></h3> <p><?php echo $die->short_description; ?></p> </div> </div> </li> <?php endforeach; ?> </ul> <?php else: ?> <div>There are no dies at this time.</div> <?php endif; ?> </div>
Resulted in this…
The alignment technically was not off. The thumbnail left margins were doing exactly what bootstrap was telling them to do. I fixed the alignment by overriding some css in my style.css:
.row-fluid .thumbnails .span2:nth-child(6n+1), .row-fluid .thumbnails .span3:nth-child(4n+1), .row-fluid .thumbnails .span4:nth-child(3n+1), .row-fluid .thumbnails .span6:nth-child(2n+1) { margin-left: 0; }
This pretty much changes the left margin, depending on the span level you have set for the list items. This was not my idea. I got it from stack overflow.
Now for the image Height sizing. If any of my images varied in heights, they would automatically fit the width but not the height. So I ended up with the thumbnail divs in the same row, varying. Not the end of the world, but it certainly didn’t look very well when I added the text underneath them. _-__-.
A little bit of jQuery did the trick (once again from stack overflow).
/* set equal height thumbnail images*/ $(document).ready(function(){ $('.thumbnail img').css({ 'height': $('.thumbnail img').height() }); });
Now the rows all line up, and the image heights are all the same.