Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

Picture Gallery in WordPress

in Wordpress

WordPress’s image uploader offers several ways to retrieve images for display in a post or page. It also offers an easy way to say up an image gallery. No plugins needed.

lotus

This image came from another site

Images From Other Sites

While on the post/page edit screen, look for the first icon after Upload/Insert. You can type in the url for an image that’s at an external site. Insert the image into your post and publish your post. Images from other sites do not create a gallery. The gallery generally consists of thumbnails and neither WordPress nor Thesis will make a thumbnail of images from remote urls, because those images are not in a file on your server. When you link to remote images, it’s called hot linking, and some sites disable that feature because it creates a strain on their resources.

Creating the gallery

First, create your post or page and save it. To create a gallery, you will need to upload the images into the media library from your hard drive. Go to ‘Media – add new.’ If you use the ‘flash’ uploader, you should be able to select more than one image at a time to upload from your harddrive. These newly uploaded images will show as ‘unattached’ to any post or page when you view the list in the library. Click “Attach to,” search for the name of your post or page, choose the page or post, click select, and the image will be attached. Do that for each image you want in the gallery. When you return to your page, click the picture icon next to the upload/insert label. WordPress will have set up a gallery for the page or post that you attached the images. Look at the settings for how many columns you want, and then click insert gallery.

Note: in Settings for Gallery, you can choose to have the image show within the page (attachment page), or outside the page (image file).

I was able to style the images with a black border in custom css with this:

div#gallery-1 img {
border: solid 4px #000000;}

For a more detailed set of instructions on ways you can configure the gallery, consult the WordPress Codex.

Here is a gallery of screen shots of the steps.

{ 1 comment }

Ranessa April 23, 2011 at 6:04 am

Kudos to you! I hadn’t thought of that!

Previous post: