Displaying images side-by-side in WordPress
I’ve been using WordPress for about two months now and I really like it. It takes away a lot of the pain from blogging. Recently I was writing a blog post and I was trying to get two images displayed side-by-side. This proved to be more difficult than I thought. There’s no immediately obvious way in WordPress to display images side-by-side. I tried to use tables, but that didn’t work out. I also tried to use the gallery, but that displays all the images, and I just wanted to display two. I was able to get it working finally.
The method involves the inline-block display property. You first insert images as you normally would, making sure that they have no alignment. An important point to note here is that you might want to adjust the size of your images if their combined width (plus any padding) exceeds the width of content area. Once you adjust the sizes of the images (if you need to), you wrap each image in a div that has its display property set to inline-block. You also want to set the right margin to some non-zero value so that there’s a space between the images. The code looks like this:
<div style="display: inline-block; margin-right: 5px"> [ ... wordpress generated code for first image ... ] </div> <div style="display: inline-block"> [ ... wordpress generated code for second image ... ] </div>
And the rendered content, like this:
Honey and Ham
Ham Jumping
What if you wanted to center the content? That’s pretty simple too:
<div style = "text-align:center"> <div style="display: inline-block; margin-right: 5px"> [ ... wordpress generated code for first image ... ] </div> <div style="display: inline-block"> [ ... wordpress generated code for second image ... ] </div> </div>
The rendered content looks like this:
Honey and Ham
Ham Jumping
The only problem with this solution is that it won’t work in browsers that fail to implement standards correctly (IE8 does though). But overall, a pretty simple method that should work in most browsers. Also, instead of having to type out the styles every time, you can easily add these to your stylesheet and then use them as you need them.
Popularity: unranked [?]
The read was quite interesting and i think the dogs are really cute.
Vivin,
This is freakin’ sweet. Thanks for sharing this. While not isolated to WordPress, this is helpful for showing virtually any content side-by-side via CSS.
~Joe
Social comments and analytics for this post…
This post was mentioned on Twitter by vi5in: New blog post: Displaying images side-by-side in WordPress http://bit.ly/4yMaYb…
Trackback by uberVU - social comments | November 6, 2009
@Kellie Richardson
Thanks Kellie! Those are my sister’s dogs. The one on the left is a Queensland Red-Heeler and Jack-Russell Mix. She is 7 years old. The one on the right is a Beagle and he’s around 8 or 9 months old. Honey used to be my dog, but I gave her to my sister when I went to Iraq. Both of them are from the animal shelter.
@Joe Manna
Thanks Joe. Yeah, I figured it would be useful for that as well! I’m glad that IE8 implements inline-block. It’s a very useful display property.
This is very helpful. Is there any way to do three (or more) images together in one line? Thanks!
@MWE
Yup, you can do it easily using the same method as above. You just have to make sure that the sum of the widths of all the images does not exceed the width of the area in which you are displaying your post. Otherwise the images will wrap:
[...] coding a normal XHTML/CSS website and all attempts failed. Eventually I found a code snippet on somebody’s blog which gave me that incredibly useful code to stop WordPress being [...]
Pingback by EvolveOrDie » Center 2 images side by side in WordPress | March 5, 2010
I have two photos that are the same size, but one caption is longer (see my story from March 5th). Using your code, the bottoms of the photos+captions are aligned. Is there a way to align the tops of the photos, and allow the longer caption to extend below the other photo?
Thanks.
@Eric
You could try display:table-cell; vertical-align:top; on the wrapping div. But I’m not sure if that’s going to work. This is a good question; I have the same issue in on of my posts (http://vivin.net/2009/10/28/how-to-replace-the-internal-hard-drive-in-an-imation-apollo-500gb-2-5-portable-hard-drive/3/) but I haven’t been able to get around it.
@vivin
Vivin
Thanks for the hint. I am not a programmer by any stretch of the imagination, but I found something that worked.
Try this for your post:
@vivin
Since my earlier post didn’t show my solution, let’s try again…
Try this for your post: display: inline-block; vertical-align:top; margin-right: 5px;
@Eric
Thanks Eric! I will try that out!
THANK YOU! This was driving me crazy cause I couldn’t figure it out.
On the Home page (and you may have to refresh or click on home when you get on the site), I have three images which I want side by side. When I used the code you provided above, the images came out the way I’d like them, but then the sidebar moved to the bottom of the page . . . ugh! Didn’t want that . . . might you have a tip to correct that? I’m working on this site for a dentist . . . any advice much appreciated. Dena
@Dena
Hey Dena,
Sorry I didn’t get back to you sooner! Have you tried adjusting the width of the images?
@Jason D.
No problem! Glad I could help!
Thanks a lot for your tip on inline blocks ! I was unable to get the images side-by-side *with* captions till I read your post ! Thanks again !
@Preets
Glad you got it working!
Thx for informations!!
Hahh! Brilliant!
Works perfectly thanks!
Until I found this I was using one small (400px) image centered between paragraphs and it just looked lost amongst white space – especially on a wide screen.
I can’t believe there isn’t a one click solution to this in WP.
Thanks again – You’ve made my day!!! :O)
Thanks a lot, this is just what I was looking for. =)
Thanks so much for this! I’m a wordpress novice, and this was just the information I needed in order to display two images centered side-by-side in conjunction with the shadows (drop-shadows) plugin.
Thanks for this. Searched for ages in google. Just needed to ask the right question! This is perfect.
Hey Vivin,
I know heaps of people have thanked you already, but we use WP on a lot of sites and have struggled with the best way of doing this. What you have suggested works a treat. Thank you!!
there are gaps between the images how to make it with no gaps?
@icute
Just remove the “margin-right: 5px” attribute from the CSS. If that doesn’t work, use “margin-right: 0px”.
have tried both of it but it wont works
@icute
Try this:
Notice the “position:relative; left: -5px”. WordPress seems to insert a space between the two images. By positioning the image relatively, and moving it 5 pixels to the left, you can remove that space.
Ive tried your given code but it shows some borders at my images(ive already put borders=”0px” for the images and the css part), maybe my css theme has a border line for inline element so i manage to find another solution for it
Thanks, works perfectly, even for 2 or 4 images side by side
[...] Displaying images side-by-side in WordPress | Rough Book – February 20th ( tags: wordpress coding css images pictures tip trick ) [...]
Pingback by Delicious Bookmarks for February 20th through February 21st « Lâmôlabs | February 21, 2011
Thank you so much, it worked perfectly! I couldn’t figure this out! Such a simple fix!
FINALLY!!! After all of the effin google searches…… THANKS BRO!
I have been using the following to display 2 images in WordPress however the images don’t show in Firefox. Is there code that Firefox recognizes to to this?
02.
03.
[ ... wordpress generated code for first image ... ]
04.
05.
06.
07.
[ ... wordpress generated code for second image ... ]
08.
09.
Sorry that should read.
[ ... wordpress generated code for first image ... ]
[ ... wordpress generated code for second image ... ]
thanks works perfectly
@Terry
That’s strange. I don’t know why it wouldn’t show in firefox. The pictures on this page seem to show up perfectly. What does your code look like?
@Online Games Guide
@Barry
@Jason
@Brad Reid
@Damo
@Adelaide SEO
@icute
@Raju
@Henrietta
@Christopher Perkins
@Dharmang
Glad to help!
@icute
Where do I insert this… into the HTML section of my text editor?
Thanks
@eric
The code can be put in the wordpress in html mode, using visual mode would produce spaces.
Fantastic, (
[ ... wordpress generated code for first image ... ]
[ ... wordpress generated code for second image ... ]
)
works brilliantly used it to place/tile two then three images side by side.
Many Thanks !!!!
will let you know if it messes up in some browsers
Many thanks for this solution!
Thanks man, I just spent 30 minutes trying to get two small images to sit in the same line and your solution worked perfectly.
This code works great when using FireFox. However, IE still displays the images in vertical. Any idea why this is?
@Warpfield That’s probably because IE doesn’t support the inline-block property.
@vivin
Actually, after upgrading to IE 8, the images appear as expected, side by side. I figure Microsoft finally decided to get with the program and make their browser follow more inline, (excuse the pun), with current HTML standards.
Dude,
Thanks for this post! I can’t believe WP doesn’t have a better solution to this other than inserting a gallery (grr). Thanks again!
Jane
This is great. Thank you! Is there any way to make the caption a live link? I’ve tried several things and nothing works yet. Also, how do we make the caption centered? It says centered but isn’t. Thank you!
@Sculley
Got it. Some other classes were throwing it off so to style the actual caption, I styled: #content .wp-caption-text: {text-align:center;}. For link, I moved the around the whole [] and it worked.
Hiya Vivin
This has helped me a lot. like others I have been searching for ages for a solution and thought I’d give up. But I’m happy I found your post!
One quick confirmation question…if i make the images the same size and when added together they make the full width of the page, can I make the padding larger to create a bigger gap?
Another question – I’d like to add a title above each image but not centralised, just aligned left. How can I do this ? Sorry I’m still learning code.
Thanks