HomeХобби и стильRelated VideosMore From: SimpleHow2z

Display Wordpress Images Side By Side

158 ratings | 20149 views
Like us on FaceBook: https://www.facebook.com/simplehow2z Visit Our Website: http://simplehow2z.com/ This video will show you how to display your WordPress images side by side instead of the default up and down. You may notice I added some coding, this is so you can create as much or as little space between the images as you'd like. for example you can change the 1px on each line to 3px. This will increase the space between each image. The larger the number, the greater the space. Here is the code I used: ***NOTE: Youtube wouldn't let me place the code as is, so I had to mod it a bit. *Replace all "11's" with "less than symbol" (shift + comma key) *Replace all "22's" with "greater than symbol" (shift + period key) 11div style = "text-align:center"22 11div style="display: inline-block; margin-right: 1px"22 [YOUR FIRST WORDPRESS CAPTIONED IMAGE] 11/div22 11div style="display: inline-block; margin-right: 1px"22 [YOUR MIDDLE WORDPRESS CAPTIONED IMAGES] 11/div22 11div style="display: inline-block; margin-right: 1px"22 [YOUR LAST WORDPRESS CAPTIONED IMAGE] 11/div22 11/div22
Html code for embedding videos on your blog
Text Comments (133)
Eileen van Dijk (23 days ago)
Very helpful, thanks!
Carsten Niemand (2 months ago)
What if I want to align 4 images?
Estefania Garza Zavala (3 months ago)
Super usefull, you are the man! thank u!
Verbo SS (4 months ago)
how to remove the borders?
wheatonna (5 months ago)
When I click on "update", WordPress reduces the <div style="display: inline-block; margin-right: 5px”> tags to </div>. And the images are just as before. Why does WordPress do that?
alan straw (6 months ago)
Thanks for your time.
Matthew Nickerson (9 months ago)
Great video.
Kay_Lu (11 months ago)
I basically just spent almost 5 hours fighting a nasty fight with picture alignment for a job.... YOU SAVED ME!!!!!!!!!!!!!!!!!!You're my new HERO!! This has just solved all my problems, this was the only thing that helped with my problem of table scaling on the mobile version!!!!Thank you so much, bless you!!!! regards, yours desperate nerd
ArtIsInFormation (1 year ago)
Finally!! Came through when so many others didn't.
Aaron Patterson (1 year ago)
I used this for displaying products side by side and it worked perfectly but now all the photos are really small...do you know how i might be able to make the images larger again while keeping them side by side?
This works, but it only works on small images. Ty for info.
Michelle West (1 year ago)
Thank you! This worked great!
Trish Sanders (1 year ago)
Can you do the same thing with galleries?
Tony Guarino (1 year ago)
Div with the inline-block did the trick. In WordPress, I was trying to align images with a table and it was working great, until I shrunk the window. This mimics the responsive quality and it was overlaying the sidebar on the right side of the page. This way with divs moves the images down as the window gets smaller. Also, using Div without the extra code, the text kept creeping up on the right side. Now the text does not and stays below the images and the page looks good. I made captioned image button links so it would look good on either desktop, tablet, or phone and be responsive to all sizes. Works great. Thank you!
canadian boy (1 year ago)
Got a question. Where did you go to find the coding? I pressed enter 3 times after each caption, but where you lost me is where you clicked something at the bottom of the screen and the coding came up. Right at 1:23 in your video
Cammi Quinton (1 year ago)
It's not working for me. It's fine in the Visual, where it has two side-by-side and one below (I like the pics the size they are and 3 won't fit across). However, in the preview, they're just lined up down the center, one below the other. Any ideas?
paul scholes (1 year ago)
Thank you soooooo much
Lucie Robinson (1 year ago)
Super helpful - thanks!
Pinay Nomad (2 years ago)
wow! I tried many tutorials and this is the only one that worked! Thanks man! :)
Kris Krug (2 years ago)
So what if I want more than one row of pictures? Would I just use the top code to start a new line?
oseerw (2 years ago)
Thanks for the help :)
Larissa Keiser (2 years ago)
Thank you!! This was so helpful and efficient :D
isnt there a plugin that does this?
Seth Killian (2 years ago)
How /where do you get the code??? I can't catch it online
GuitarPlayingTV (2 years ago)
Thank You!
Lea Kontio (2 years ago)
I'm quite new to any of this and i've successfully completed to task of displaying images side by side but what bothers me is how do you get a second paragraph to the captions without messing up everything? just so that i can write for example: Celebrity undercover 2007, with acryls Would be nice if anyone could help me :D
candice bobchak (2 years ago)
Thank you so much. I am new to wordpress and you saved my internship.
Zlatan Beast (1 year ago)
i am intern student, same situation i guess haha
SimpleHow2z (2 years ago)
+candice bobchak Awesome! I'm glad we could help!
Jenny Molon (2 years ago)
Easiest of all how-to's I ever found on the web! You saved me a lot of time!!!!! Thank you!!! :)))
SimpleHow2z (2 years ago)
+Jen Molon You are welcome, I'm glad it helped.
Pasan Karunanayake (2 years ago)
THANK YOU SOOOOOOO MUCH. I was pulling my hair out before....
SimpleHow2z (2 years ago)
+Pasan Karunanayake So glad we could help!
According To Seniority (2 years ago)
Thanks so much!!
Diego Consimo (2 years ago)
Thank you so much!!! i didnt find this code in anyplace! Great job!
Jess Acton (2 years ago)
THANK YOU SO MUCH! I'm making a lil archives for my blog and I couldn't find easy instructions for how to do this anywhere else. You're a life saver!
SimpleHow2z (2 years ago)
+Jessica Acton You are welcome!
Connie Wilson (2 years ago)
You state, "I have the coding here." Where did that coding come from? Newbie to webbing.
SimpleHow2z (2 years ago)
+Connie Wilson the coding came from nothing more then research and a bit of coding knowledge.
Amir Afiq (2 years ago)
It helped me...thank u so much!
Robbert Jacobs (2 years ago)
I've been looking for this for at least a week now Thanks!
Jesse Steel (2 years ago)
your a beautiful person!
Bridget Stoker (2 years ago)
Thank you for this easy to understand tutorial! I was able to place my social icons side-by-side and placed the code in a widget. Because of this, I was able to delete the social icons plug-in. Yay!
SimpleHow2z (2 years ago)
+Bridget Stoker Glad we could help!
Terri Jensen (3 years ago)
Thank you, this worked perfectly.  I have lined up two photos with captions at the right.  Is there a way to have text wrap to the left of the two photos?
SimpleHow2z (3 years ago)
+Terri Jensen I'm not sure in wordpress, but perhaps you can wrap the image with text in a program like photoshop.
Juan D (3 years ago)
Do you know how I can put some space in between each pic? Thanks for the vid, very useful!
SimpleHow2z (3 years ago)
+Apebongo T. You are welcome! I'm glad I could help!
Juan D (3 years ago)
+SimpleHow2z Dude, thank you so much! I didn't think you would respond so quickly. So much appreciated.
SimpleHow2z (3 years ago)
+Apebongo T. in the code you will see this line "div style="display: inline-block; margin-right: 1px" at the end you can see the "1px" all you need to do is change the number 1 to any value you'd like. any number greater then "1" will increase the space. for example, you could try: div style="display: inline-block; margin-right: 5px. Please note, if you want equal space between each pic, you will need to have the same "px" number for each image. Hope this helps, CHRIS
MyYardBuddy (3 years ago)
An easier way to do this that works with media or text is the [one_half] or [one_third] short code they are closed short codes. Much respect to this video though. Look them up to fit your situation.
Tanner Regez (3 years ago)
Ok thanks.. now how do I add a paypal buy now form to line up with each picture??
Dinesh Roy (3 years ago)
Thank you a lot!
Marvin Uu (3 years ago)
Does this apply to video posts?
RadiantSilverlighter (3 years ago)
This doesn't work for me.  :(   I have thumbnails with captions and all it does make the thumbnails disappear and centers the captions from the thumbnail (2 letters per word)  right down the center of the page.   I don't know what i'm doing wrong, I used the text code just like you said (yes I changed the "11's" to < and "22's" to > )   Nothing seems to work.
SimpleHow2z (3 years ago)
+RadiantSilverlighter I'd like to see the code your using. Do you have Skype? (not for video but voice and screen sharing.)
Kay Ellen Gilmour (3 years ago)
Thank you ever so much. Much easier than pulling out all the rest of my hair!!!!
Orion Ake (3 years ago)
Thanks +SimpleHow2z ! it works wonders for a cause I'm a part of. https://mml3supporthub.wordpress.com/
TKB MEDIA (3 years ago)
THANK YOU!!
also, does this work only with "caption" images? What about just images?
SimpleHow2z (3 years ago)
+SpaghettiSauceAndMeatballs.Com Yes this will also work with images only.
Thanks for this. Will this work if I have text under the photo as well? Same concept but with image and text, in essence making columns
SimpleHow2z (3 years ago)
+SpaghettiSauceAndMeatballs.Com I've never tried to put a lot of text under an image. However, you can put the text as the caption and it will line up directly underneath the image.
Katie Quinn (3 years ago)
Awesome - thanks for posting, this solved all of my problems! :o)
IPSI (3 years ago)
Great video! Can you tell me if this also works around video and I want to add an image next to the video on that page. Video was added using a plugin
SimpleHow2z (3 years ago)
+IP Solutions International Thanks for watching! Truthfully, I'm not sure if it works with both video and an image. It won't hurt to try, It should work, I don't see a reason it wouldn't. If you try it, please let me know how it goes.
ellednyc (3 years ago)
hi there! I feel like i'm *so* close but something is not quite working. the layout looks near-perfect in the "visual" area of the drafted post but when I hit preview and/or publish the sizing and alignment of he photos goes completely off! eek! please help (:
SimpleHow2z (3 years ago)
@ellednyc I'd like to see the code,  I should be on SimpleHow2z Help Desk for Skype calls later this evening. You can go to our website, then click on the help desk tab. If I'm not online, add me to your contacts with a note of what's going on and I will answer as soon as I can. http://simplehow2z.com/
Brenda Holland (3 years ago)
I used these instructions and they worked great while in draft. When I look at preview they are in a vertical line not a row. Will it magically transform when I click publish?
Brenda Holland (3 years ago)
+SimpleHow2z I just wrote another blog yesterday and I tried again putting the pictures side by side and it worked this time. Thanks.
SimpleHow2z (3 years ago)
+Brenda Holland In my wordpress experience, the way you see it in "preview" is the way it will look on your site when you click "publish." I'd like to see what's going on with the code. Could you either send me the code or screenshot? or I should be on SimpleHow2z Help Desk Skype later this evening or tomorrow. You can go to our website, then click on the help desk tab. If I'm not online, add me to your contacts with a note of what's going on and I will answer as soon as I can. http://simplehow2z.com/
Himanshu Verma (3 years ago)
Hey thanx for the video but can u please help me widen up the content portion, it is very narrow ; i mean the area where we write the content it can't even display a full title last word goes on to the next line
Juan D (3 years ago)
+SimpleHow2z Yeah, I can't put any text before the images: they get disorganized and the text doesn't appear anywhere on the page.
SimpleHow2z (3 years ago)
+Himanshu Verma can you send a screen shot?
Five Point Five (3 years ago)
This isn't working for me. In my image code I found a difference. The [caption id=etc...] at the beginning of the code, up until <ahref is missing. Is there some fix for this? The images just stay as they are. Thanks for your help.
SimpleHow2z (3 years ago)
+FivePoint Five I'll be happy to help, I would like to see the code. SimpleHow2z has a Skype help desk. I should be on later tonight. Click the link below, then click on 'Skype Call or Chat With – CHRIS.' You can go there any time, even if I'm not online, just add me to your contacts with a note that you need help with the images. http://simplehow2z.com/help-desk/
neexie (3 years ago)
It worked! Thanks :)
Michael Rector (3 years ago)
You are my hero. Worked perfectly!
Per R (3 years ago)
how about just two images side by side with no caption?
SimpleHow2z (3 years ago)
+Per R. simple fix, Just leave out the "middle images" code and use only the first and last images code. if you need further help you can visit our helpdesk at.: http://simplehow2z.com/help-desk/  If you don't see me online with our skype call helpdesk, feel free to send me a message and add me to your contacts and I will help you as soon as possible. 
Lidya Kassa (4 years ago)
Very helpful, thank you!!!
It didn't work. All three pictures are on the right side. I even tried changing the code to left, middle, right and still all are on the right??
SimpleHow2z (4 years ago)
+Ford's RV Training & Service I'd like to take a look at the code and help ya out! We can Skype this evening if you'd like. Visit our website: http://simplehow2z.com/   Click on the "Help Desk" tab, then on the Skype button "Call or Chat with Chris."
thank you vrery much
Katy Yung (4 years ago)
THANK YOU for this video. It saved me many more hours trying to figure this out. This should have been my first stop.
Jeremy Harris (4 years ago)
That worked perfectly
Meg Staples (4 years ago)
Hi! This is an awesome video, but my first image is a little askew (further up than the rest) and thought on what the reason might be? 
SimpleHow2z (4 years ago)
+Meg Sellner  Hard to tell, not being able to see either the code or the screenshot of the images. Here are two possibilities for one of your images going askew  1. are all the pictures the same dimensions?  2. You may have too many words on one caption image description. If one image description has more words, it will make room for itself by pushing the image up. If none of those two suggestion/questions help, feel free to send me a screen shot of the images and the code you're using. Hope this helps, -CHRIS
N64 Hub (4 years ago)
This is only putting two photo's side by side per line :/ Any idea what the problem might be?
SimpleHow2z (4 years ago)
+Longswordcock I don't think the links would affect it and I'm not sure the file type would either. In WordPress, The main container doesn't provide very much space; try to reduce the picture to 150 X 150. While in the backend of WordPress, click on the picture and you should see two icons, choose the one that will allow you to edit the picture. Then, at the top, click on the "Advanced Settings" tab. Finally change the "width" and "height" to "150" and click update. Let me know if it works or not. We'll get it to work, no worries.
N64 Hub (4 years ago)
But it didn't work :/ could it have to do with the fact that it links to a custom URL? Or perhaps filetype?
SimpleHow2z (4 years ago)
+Longswordcock awesome! Glad we could help...
N64 Hub (4 years ago)
Yeah, I used the medium (300x300) resolution :c
SimpleHow2z (4 years ago)
I believe the problem is the size of your image that you chose as a step before inserting it. Try a different size from the list of sizes that WordPress provides to you when you upload an image, do this before inserting it "into post." Hope this helps, -CHRIS
Chromefly (4 years ago)
Very nice. Thank you. However........how can I put a space between each image?
SimpleHow2z (4 years ago)
+Chromefly not to worry, it's a simple fix :D I just updated the code in the description to allow you to create more space evenly between the images. All you have to do is locate the 1px on each line, and change the number. The larger the number, the greater the space. Hoped this helped, -CHRIS
magnificentc (4 years ago)
really helpful, thanks dude!
pullupbartender (4 years ago)
beautiful. thank you very much. i knew there had to be a simpler solution than making those tables.
Paul Sauve (4 years ago)
I had done this previously by inserting a table. This is much more elegant. Thanks
Efrain (4 years ago)
not working for me, images still show up as default on top of each other
Scott Feldstein (4 years ago)
I have 2 playlists from Wordpress's playlist editor and I want them side by side.  I messed around with your code a bit but could only get the bottom one to move a bit to the side, still below the other playlist.  The page is: http://waxbuckets.com/415-2/ The code is: [playlist tracks="464,447,455,462,454,460,445,449,456,453,465,468"][playlist tracks="451,448,463,467,466,457,450,452,459,458"] <p style="text-align:left;"></p>
SimpleHow2z (4 years ago)
+Scott Feldstein This code works specifically for images, however you can try to Just leave out the "middle images" code and use only the first and last images code. if you need further help please send us a message. Hope this helps, -CHRIS
Rams709 (4 years ago)
How do you get 2 images side by side in the centre? This works for 3 images
SimpleHow2z (4 years ago)
+Rams709 Just leave out the code for the "middle images". Hope this helped, -CHRIS
Nick Albright (4 years ago)
Great Tutorial. Thanks so much. http://brightoriginals.com/ definitely not finished yet but thanks to you I'm getting closer.
SimpleHow2z (4 years ago)
Glad we could help. Your website is coming along nicely, looks very professional! Thanks for watching, -CHRIS
Anne Alexander (4 years ago)
Thanks you so much!!!
Jason Jennings (4 years ago)
Thanks that was helpful!
Gonzo (4 years ago)
Hello, I sell propane and propane accessories.
Rebecca Kelsey Sampson (4 years ago)
This was seriously so helpful! I had spent an hour trying to figure out how to make images side by side and clickable on Wordpress with no luck whatsoever until seeing this video. Thank you so much! This is what I was able to make with your help: http://rebeccakelsey.com/my-projects/ Kindness is the best accessory, Rebecca
SimpleHow2z (4 years ago)
Your website looks great! Thanks for watching, -CHRIS
srbjwe (4 years ago)
Thanks for the side-by-side instructions. I had been looking around for how to do this for a while ... nice to have the answer! 
DirtMaster (4 years ago)
thanks very much, been trying to line up to blocks of ads on my site for days! lol thanks
Dayana Kibilds (4 years ago)
I'm having the same issue as Valerie. As soon as I save the draft, Wordpress replaces <div style="display: inline-block;"> with just <div>
SimpleHow2z (4 years ago)
@ Dayana Kibids, Not sure why you and Valerie are having this issue, It could be a number of things. Just a couple suggestions: 1. is this code on top of the image's code? 2. Did you put the </div> at the end of the image code? If you're still having problems, feel free to message me with your code, and I'll try to sort it out for ya! Thanks, -CHRIS
Sibeans (4 years ago)
I've been looking for this for hours! You have no idea how much this helped me. :D
Sarah Staggs (4 years ago)
Ahhh! Thank you!!!
SimpleHow2z (5 years ago)
can you message a screenshot of what you're seeing to me?
Valerie Joy Smith (5 years ago)
Thanks for your reply Chris. I have found the reason why the images don't align side by side is that the code inserted between the div's disappears when I click on the visual editor. I searched for a solution to this problem but I can't find one. I see that other people have experienced losing code but no-one comes up with a solution. I wondered if you know how to fix this problem. I thought that there could be a plug-in that stops the code from disappearing but I haven't found one yet.
SimpleHow2z (5 years ago)
Try uploading the images without the links (in caption form), then put them side by side with the code. After that, you can go into the caption options and add the affiliate link. Hope this helps, -CHRIS
Valerie Joy Smith (5 years ago)
I was really pleased to find this video but unfortunately the images don't align side by side for me. I've tried several times and also checked the code many times. The images contain affiliate links but I wouldn't have thought that would make any difference. I wondered if you have any suggestions that might help.
SimpleHow2z (5 years ago)
@Christoffer Sylvest Carlsen: Great question! Simply take out the margin-right: 5px on the second line above the very first caption. You could also leave the margin-right: 5px where it is, and add just the 5px to every line you inserted above all the captions below the first caption. You can change the number 5 to whatever number you'd like, to make the space larger or smaller. Just make sure whatever number you choose, is the same on the first line above every caption. Hope this helps -CHRIS
Great video - this really helped me! But can you somehow explain me, how I can get rid of that extra space between the first and second picture? I can see you have it aswell at 4:59
SimpleHow2z (5 years ago)
@A TL Group: Think of HTML as a sandwich, the very first "div" at the top of the very first caption, is the top slice of bread. All the "div's" in between for each caption, simply closes out that individual caption. The very, very last "div" in the code, is the bottom slice of bread, trapping all the good stuff in between making the sandwich complete.
A TL Group (5 years ago)
I received your email about the 2 /div. Don't worry about it... I am able to follow your instructions. BUT if you would like to know for your own "peace of mine" the time line is about 4:41 to 4:43 on the video.
A TL Group (5 years ago)
Love the simplicity of your videos, but... Why did the last caption have 2 /div at the end? Thanks in advance for your reply

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.