Home > Programming, css, jQuery, php > Setting equal height images with twitter bootstrap thumbnails

Setting equal height images with twitter bootstrap thumbnails

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 : '&nbsp'; ?></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.

Categories: Programming, css, jQuery, php Tags: , , ,
  1. November 15th, 2014 at 08:48 | #1

    Use a bank cards with$0 stability. If you’ve got multiple styles of balances on a bank cards – buys, cash loan, and stability transfer – over minimum payments move to the larger rate stability. Meanwhile, the choice stability, e.g. buys, does not decline and instead accumulates attention.

  2. December 2nd, 2014 at 03:56 | #2

    Very interesting, I’ve spent a lot of time to read and think about it, thanks for your ideas.Kizi 7 | Kizi 9

  3. December 18th, 2014 at 03:37 | #3

    Thanks for giving me the useful information. I think I need it. Thank you
    Kizi 8
    Kizi 6

  4. December 19th, 2014 at 06:32 | #4

    Thank you for presenting your points and providing this information. I have learned something about this topic.

Comment pages
1 2 351
  1. No trackbacks yet.