Creating a Gallery in WordPress without Plugins

In this article, Linda shows how to create a simple gallery within WordPress without plugins...but she also points readers to plugins that really work.

Adding the Images

This next image shows how my window looks after I grab the first image from my hard drive.

Starting from the top:

1.Note that the Gallery link at the top is showing (1) image. That is the image that is now on the screen.

2.The image shows, along with all the pertinent information. Note that this is a larger image at 400x267. I have not squared off this image, and it won't hurt in the long run.

3.I fill in the spaces for the Title, Alternate Text (alt) and the caption as well as a description for accessibility. You don't need to be very detailed here...just enough detail to allow viewers who cannot see the image to know what is showing on the page.

4.I left the link URL blank for the time being.

5.Just to keep things simple, my alignment is to the right, and the image is full-sized. You'll soon learn that you don't need to fret over alignment at this point.

6.Lastly, I insert the image into the post.

This is how the image will look from the HTML side:

I'll take the cursor down one space and continue to add images in this way until all the images intended for this particular gallery are uploaded. There are a total of three images (keeping it simple here!), and when I go to upload the final image, you'll see the change in the number in the Gallery link at top:

This number tells me that I now have three images in the gallery FOR THIS POST. So, I can build the gallery from three images. But, before we go there, here is the final HTML that shows all three images:

Now, I'm ready to create the gallery, and I'll do so from the HTML side. All I need to do is add this command below my images:

I simply added: [gallery], as shown above. Then, I eliminate all the code above that directive. That's right – I eliminate all the code for the images I've uploaded. Since those images now are in my Media Library, I have no fear that they've been eliminated from my database...I am simply eliminating them from the post.

Once I accomplish these tasks, I take a look at the visual side (you probably want to save your draft at this point). I am resizing my window so you can get a better view:

Beautiful, eh? This is the drawback...you cannot see your gallery unless you do a preview. So, if you haven't saved a draft, save it now and hit your "Preview" button at top right to take a look at your masterpiece. Here's how mine looks now:

Note the layout of the preview above. The reason behind this layout is provided by the directives hidden in the previous image. Go back to your draft and click on that gallery image. You'll see two buttons to the left. The first is used to edit the gallery, and the second image allows you to delete the gallery.

When I click on the "edit" button, this is what I see:

From the top:

1.This window shows that I am in the Gallery by the orange link at top. I have three images in this gallery.

2.The next view down shows the images I have in this gallery. And, if I click on the "Show" links connected to any image, I will see a window much like the one that shows when you upload an image to the Media Library.

3.The next information is the most important for the gallery...it shows that I can link the images to an image file or to an attachment page, it shows that I can order images by Menu Order (or by Title, Date/Time or Random), that I can change the order of the images and the columns involved in this gallery. I make a simple change...I want to change the columns from three to two.

Now, when I click on the "Update gallery settings" and return to the HTML view in my post window, this is what I see:

Another minor drawback to using the WP gallery option is that I don't have an option for one column, unless I build that code myself. In this site, the galleries are composed by one column, and I want that column centred. So, I add this code:

In the directive above, I have asked the gallery to align the gallery in the middle of the post with one column and ordered randomly. Once I make this change, I need to save the draft before I can view the preview. With those tasks done, this is the result:

This image above shows the result of a simple gallery using the directives that I added to my post draft. Now that you can see how those directives alter the layout of the gallery, you can go nuts with your directives. The WordPress Codex offers a number of options, including reducing the size of your thumbnails so you have more options on the number of columns in your gallery, etc. with gallery "shortcodes."

You'll learn from that link that you also can add galleries to pages or templates, thereby allowing you much more freedom. But, a word of warning here...depending upon the template you use for your WP layout, you may come across various obstacles. You will learn why I've become enamoured with Hybrid Themes...because, once you get used to a template, it is difficult to switch. Not to mention that Hybrid tends to play nice with WordPress, which is an advantage for a WP fanatic such as myself.