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.

  50. October 24th, 2014 at 01:39 | #50

    I was searching for something else. The story and blog you have published is very interesting as well as informatics, Thanks for sharing such type of informatics thing.

  1. No trackbacks yet.