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. August 16th, 2013 at 11:57 | #1

    ii tried the code but i also couldnot get tho align the pictures. is the code right>??

  2. October 20th, 2013 at 23:06 | #2

    Thanks Andy! I loved the detailed account of your pricing experiments.

  3. Titiaan
    November 2nd, 2013 at 06:40 | #3

    Dear ^Lestat,

    Where did you add the jQuery inside the js/bootstrap.js?

    When I added your code, the images would alternatively load with equal height, or not load at all.

    Thanks, Titiaan

  4. November 17th, 2013 at 23:55 | #4

    I love the sweet and I love sharing interesting things above.thank you for sharing lots of interesting information. http://www.kizi2game.com | http://www.friv10game.org

  5. December 9th, 2013 at 01:30 | #5

    This is very much a work in progress whenever I find out about one who is more beautiful than any of these I will add her and kick out number ten Thanks for sharing the informative post.
    Regards
    ))

  6. December 13th, 2013 at 02:37 | #6

    I would like to say that this article really convinced me, you give me best information!
    [url=http://www.kizi8games.net/]Kizi[/url]
    [url=http://www.yepi10games.net/]Yepi[/url]

  7. December 13th, 2013 at 02:40 | #7

    thanks you very munch
    Kizi

  8. December 14th, 2013 at 22:20 | #8

    An interesting article, I love sweet things and I like to share this. It gave me a lot of good stuff. Really thank you for sharing this, I was waiting for further information.

  9. December 16th, 2013 at 08:43 | #9

    Thanks for giving me the useful information. I think I need it. Thank you http://blog.livedoor.jp/yepigaming/ | http://yepigaming.hoxx.com

  10. Jayson
    December 23rd, 2013 at 02:39 | #10

    Written simply and tastefully.(www masterpapers com) It’s pleasant to read. Thank u.

  11. lola
    December 23rd, 2013 at 02:45 | #11

    very good post! need to say you (essaymarket co uk) did a great job and i really appreciate it!

  12. Kaelynn
    December 28th, 2013 at 17:37 | #12

    I am glad to see that people are actually writing about this issue in such a smart way, showing us all different sides to it. Please keep it up. online-essay-writer.org I cant wait to read whats next.

  13. January 1st, 2014 at 08:50 | #13

    thank you for sharing this post, I like your article

  14. January 20th, 2014 at 03:33 | #14

    wish all a fun day excitement. http://www.y2y2.co

  15. February 12th, 2014 at 03:25 | #15

    I do not know what to say more. http://www.frivgirls.net

  16. February 26th, 2014 at 08:51 | #16

    Your post is really good providing good information.. thank you
    Friv 4

  17. March 5th, 2014 at 23:35 | #17

    I would like to appreciate your work and would like to tell to my friends.
    http://www.friv5games.org

  18. March 10th, 2014 at 02:37 | #18

    Also keep in mind that manufacturers of pre-20th century furniture never used plywood or particle board.

  19. March 14th, 2014 at 04:42 | #19

    thanks for share, i like it. Friv 5

  20. March 18th, 2014 at 05:54 | #20

    This is what I’ve been looking for. Thank you!

  21. March 25th, 2014 at 00:46 | #21

    This material is unique, interesting, consuming and thought-provoking. This is very good writing with substance unlike other articles on this subject that contain dribble. I respect your thoughts.

  22. March 25th, 2014 at 10:16 | #22

    Thumbnail twitter bootstrap, new applications
    very good and I like it.
    hopy

  23. May 10th, 2014 at 04:52 | #23

    Nice information, valuable and excellent design, as share good stuff with good ideas and concepts, lots of great information and inspiration.

  24. May 12th, 2014 at 09:37 | #24

    Thanks for this informative post. It help me a lot. And it gave mo ideas on how to make more money in marketing business. I hope lots of people visit this site so they can easily learn this informative post.

    juegos de | game friv | huz

  25. May 12th, 2014 at 19:31 | #25

    I would like to say that this article really convinced me, you give me best information!
    http://www.friv10gaming.com | http://www.kizi10gaming.com

  26. May 22nd, 2014 at 22:07 | #26

    share your very good, I will have the knowledge of good for my homework.
    Huz 2 | Ebog 3 | Hopy

  27. June 2nd, 2014 at 12:30 | #27

    It was a great read which was extremely helpful.

  28. June 6th, 2014 at 21:56 | #28

    I appreciate you bringing it to share interesting. Yepi 2

  29. June 10th, 2014 at 03:25 | #29

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

  30. June 10th, 2014 at 22:02 | #30

    Your share is great, provided you have good knowledge to complement me, I will share for many people.

  31. June 27th, 2014 at 03:29 | #31

    Studies show that green plants are good for workplaces where people perform creative tasks but bad where the work is more monotone.
    friv 2

  32. July 9th, 2014 at 01:32 | #32

    I just wanted to let you know that what you do really affects peoples lives and that people – like me – truly appreciate it.
    Z6

  33. July 10th, 2014 at 21:40 | #33

    You can write about the terms and conditions on the blog. You might chronicle it’s spectacular.

  34. July 11th, 2014 at 20:23 | #34

    Those of the interesting information you always bring out the best that I know, thanks.
    http://www.y8x.org

  35. July 22nd, 2014 at 02:32 | #35

    I saw what you said is very good and it is very useful for me in life, thanks.
    <a href='http:// http://www.friv2g.com'Friv 2g
    Friv 6

  36. friv 3
    August 5th, 2014 at 21:20 | #36

    What’s even more comfortable when you are entertaining after a day of hard work.
    friv 3

  37. August 23rd, 2014 at 03:49 | #37

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

  38. August 30th, 2014 at 04:08 | #38

    hope you will share so much more to me more useful information and better, thanks.

  39. y9
    August 30th, 2014 at 22:02 | #39

    I love to read this type of material Good and attractive information I take from it..Thank you for posting such a good article. Y9

  40. September 3rd, 2014 at 03:09 | #40

    I definitely enjoying every little bit of it I have you bookmarked to check out new stuff you post nice post, thanks for sharing.

  41. September 6th, 2014 at 12:57 | #41
  42. friv
    September 15th, 2014 at 03:37 | #42

    What can not be stopped enthusiasts. friv

  43. September 24th, 2014 at 11:23 | #43

    Those of the interesting information you always bring out the best that I know, thanks.
    friv de

  44. September 29th, 2014 at 04:06 | #44

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

  45. October 9th, 2014 at 10:41 | #45

    I wish I could have been the one to start this comment string, but I’m not so here’s my take on your article. I really like it. It’s very interesting.

  46. October 10th, 2014 at 21:07 | #46

    it is great it gives me that much more enjoyable, good luck.

  47. yepi online
    October 14th, 2014 at 14:13 | #47

    The article you have shared here very awesome. I really like and appreciated your work. I read deeply your article, the points you have mentioned in this article are useful. I must try to follow these points and also share others. yepi online

  48. October 14th, 2014 at 21:05 | #48

    I have been waiting for someone to share this post. This has actually made me think and I hope to read more. Thanks a lot for sharing with us.

  49. October 21st, 2014 at 03:20 | #49

    You can write about the terms and conditions on the blog. You might chronicle it’s spectacular.

  1. No trackbacks yet.