Frequently Asked Questions:
Upload and insert multiple images in a post at one time
One of the cool features of WordPress 2.5 (have you upgraded yet) is that you can upload multiple images at one time.
If you haven’t already tried this yet, all you have to do is click on the “Add media:” image button, click on “choose files to upload” and use shift+click or command+click (ctrl+click for PCs) to select multiple images at once. You can also click on an entire folder to upload all the images inside it.
Well, that’s pretty cool and all, but wouldn’t it be even nicer if you could insert all your images into your post all at once instead of one by one? Well, you can, sort of. All you need to do is use WP 2.5’s new “gallery” shortcode feature, with a little special sauce thrown in.
Here’s how it works:
First, upload a bunch of pictures using the “Add media:” image button.
Once they’ve all finished uploading, click on the “gallery” tab of your little uploader box, and at the bottom you can click on “insert gallery into post.” What this does is add a little bit of special WordPress code to your post that says:
[ gallery]
(I added an extra space after the first [ that shouldn’t be there so that the code wouldn’t execute in this post). When you publish your post now, it will insert all your images into your post as small thumbnails. Go ahead, try it and then come back here.
Cool, huh? The only problem is, we don’t want little thumbnails, right? Right. The next step is to modify the gallery shortcode just a bit so that we display our images full-size. To do that, just change the gallery short code to:
[ gallery size="full" columns="1"]
(again, leave out the space after the first “[”). Now if you publish your post your images should display full-size, one per line, and centered. We’re getting closer.
However, there is still a funky border that we don’t want.
To get rid of that, we have to make one change to our stylesheet. We only have to do this once, and then from now on every time we use the gallery shortcode, we won’t have those borders. To make the change, go to “Design” –> “Theme Editor” and open up “Stylesheet (style.css)”. Scroll down to the bottom, add a new line, and paste in this line:
.gallery img {border:none !important;}
Click “update file” to save your changes, refresh your browser, and the borders should be gone.
Once you get used to this, this can save you a lot of time. Again, all you have to do is upload all your images, and then paste this line (minus the extra space) into your post where you want your images to appear:
[ gallery size="full" columns="1"]
The only real downside is that inserting your in this way does not allow you to type text between images, so if you like to do that, then this probably isn’t for you. But, if you like to write up your post and then post all of your pictures in a row, this could save you lots of time.
Questions? Instead of emailing for support, leave a comment below so everyone can benefit from any clarification.
HOW DID YOU KNOW I was just about to ask you this question!?! when I’ve tried to use the gallery, my images showed up all funky, some thumbs, some large, some left aligned…really a mess. so I gave up. I’ve since upgraded, so off to try it again with these modifications. thank you!
Well, not as easy as you might think. The problem here is that you assume that we all know how to modify these codes. I for one have never done this before and I have no idea how to do it. May be easy for you but not for all. I copied and pasted the code as instructed but it did not work. I still have the border on the top and bottom of the picture. I put it at the bottom of the page just like you said but is that right? did I forget to add something? a bracket or a dot? All I know is that it did not work. Frankly, these should be fixes on your end and not the users responsibility.
@Rick: I’d be happy to help you with your problem. I’m sorry if the instructions weren’t more clear. Can you post again on your blog using the gallery code so that I can see the problem and try to help you debug it?
Also, when you say that these “should be fixes on our end” you fail to understand that ProPhoto is a theme for WordPress, which is a huge, open-source software project used by millions and which is in constant development. We cannot possibly anticipate all of the feature changes and code implementation that is constantly coming out in new versions of WordPress. The post you commented on was meant to be a helpful resource for people in using a new WordPress feature, not a ProPhoto feature. I know editing CSS can be a bit overwhelming at first, but I do go out of my way to make it as easy as possible, and I am very easy to reach for support.
Hi Jared, if we want to do all of the above, but instead of center we would like it to be left alligned, now do we do that?
Thanks so much!
@Caty: I’m not sure if that is possible with the shortcode parameters. You can read the WordPress codex article about it here: http://codex.wordpress.org/Using_the_gallery_shortcode
Hi Jared,
When I post one image, I still have the funky border- even though I inserted the code to remove borders.
What can I do?
@Andrea: it looks like you’ve previously turned on a border for your all your images. so when you’re not using the gallery function, that border shows up, but when you do use the gallery function the borders are gone, because you did insert the code correctly.
what you need to do is remove the code that is adding a border to your non-gallery inserted images. it’s right around line 353 in your style.css, it looks like this currently:
div.entry-content img {
margin: 10px auto 15px auto;
padding:0;
border: 1px solid #666666;
}
just remove the line about the border.
How do I get my images in order? They are all numerically named and once inside the gallery they get all jumble up and out of order. I dont see anyway to resort them back into the correct order. I cant post them like this.
And really, there is no way to turn off these borderes and still be able to type in between the images?! That stinks
@Jes: there’s no way to type in between images when inserting multiple images at once. if you want to type between them you will need to insert them one by one. sorry, that’s just a limitation of wordpress, not of prophoto.
i’m not sure about the images getting jumbled. again, if you want very specific, granular control of these images and what order they come in, you’ll need to insert them one by one. this is just a shortcut to dump a bunch of images into your post at once. it was never meant to be more than just a quick image dump.
The problem some people may have is with the period before the line you add to your stylesheet. Follow all the steps but delete the period and you should be good to go. I had troubles until I deleted the period.
Jeff, that’s odd, because the period should be necessary. a period in a stylesheet indicates a “class” reference. i don’t recommend removing the period unless you’re having trouble.
This is working perfectly for me with regard to inserting all images, centering them up and displaying them.
However, when the post is being listed under ‘Categories’ I am getting some code that is showing up under the post title as shown here:
http://vimstudio.com/blog/?cat=8
Thanks for an AMAZING product! If you would like to post our blog to your client list, I would be ok with that.
@Neal Hacker: I can’t seem to even see your blog. is it working ok? what’s your blog address so I can look at this.