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.

  5. December 21st, 2014 at 04:04 | #5

    Kizi – Play Kix – Play best free online Kizi at PlayKix.net

  6. January 9th, 2015 at 03:20 | #6

    you always bring everyone the most interesting and useful, I like it all, thank you.

  7. February 21st, 2015 at 04:29 | #7

    Hey brother,your stuff is very nice.you can get monster warlord hack without any cost than click here.

  8. March 2nd, 2015 at 02:11 | #8

    Very interesting, I’ve spent a lot of time to read and think about it, thanks for your ideas.
    http://www.juegosfriv9.net” “Juegos Friv”>Juegos Friv |
    Yepi 4 |
    Yepi 1

  9. March 4th, 2015 at 23:04 | #9

    Very interesting, I’ve spent a lot of time to read and think about it, thanks for your ideas.
    Friv 7
    Frive
    Yepi 10

  10. March 22nd, 2015 at 04:28 | #10

    Your posts have more meaning for me. thanks for sharing.

  11. Alice
    March 24th, 2015 at 02:49 | #11

    A NAV bar, and three panels, each one with a story, with a bootstrap page panel is completely irrelevent, panel two is a text area, and a panel of three is an iframe.
    So I have two queries,
    How To Fill The Gap in the text area, and iframes height, I have tried attributes, CSS, and jQuery. Essay writing website

  12. March 28th, 2015 at 10:21 | #12

    I was really impressed. This is really interesting topic, I’ll write a paper on it or probably I’ll just buy essay . Thank you very much!
    Firv
    Friv 1
    Yepi

  13. April 6th, 2015 at 03:57 | #13

    all what you presented here and I’ve read that it is good for my work everything makes me happy,thanks.
    WP She’s Viral Pro |
    Kizi 2015 |
    Juegos 2015

  14. April 7th, 2015 at 00:06 | #14

    Thanks for sharing this interesting blog with us. My pleasure to being here on your blog. I wanna come back here for new post from your site.

  15. April 16th, 2015 at 02:45 | #15

    I would like to thank for the efforts you have made in writing this post.

  16. April 16th, 2015 at 12:36 | #16

    I just want to say thanks for your wonderful post, it is contain a lot of knowledge and information that i needed right now. You really help me out my friend, thanks

  17. April 20th, 2015 at 02:18 | #17

    I think this is definitely an amazing project here. So much good will be coming from this project. The ideas and the work behind this will pay off so much.

  18. April 20th, 2015 at 03:08 | #18

    You topic is very great and useful for us…thank you

  19. Yepi 12
    May 4th, 2015 at 11:04 | #19

    Just might be here Yepi 12

  20. May 8th, 2015 at 04:20 | #20

    Good post. Thanks for you

  21. May 14th, 2015 at 02:17 | #21

    Quazi, I adore you both. This sounds phenomenal, thank you for all your hard work! Should be a lot of fun!

  22. May 14th, 2015 at 02:18 | #22

    A good informative post that you have shared and appreciate your work for sharing the information

  23. May 18th, 2015 at 21:46 | #23

    Go3kGames.com is resource flash games.we update new-best free games online from internet. Here you can find game: Action game, Racing game, Girls game, Puzzle game, Strategy game ..and more. Visit and play funny games at Go3kGames.com.

  24. May 31st, 2015 at 11:37 | #24

    Your article is very good, I liked it, thank you.
    Kizi game
    85play

  25. June 26th, 2015 at 01:15 | #25

    Programming i snot my cup of tea. As for me it is very complicated.

  26. issia
    July 7th, 2015 at 00:49 | #26

    I really appreciated the post. It proved to be Very useful to me do my essay for me

Comment pages
1 2 351
  1. No trackbacks yet.