I’m going to apologize in advanced for today’s post because if you don’t have a blog or you aren’t on WordPress, you’ll probably just want to skip over this one. I very rarely post about blogging on the blog, but to my surprise ever since I revealed my completed Project Gallery I have had several people ask for a tutorial on how I created it. So here it is.
I will also say that, if you are a blogger and haven’t created a gallery yet. You definitely should! It’s a great way to showcase your projects and it’s an easy way for readers, other bloggers, brands, publishers, etc. to see all of your work in one place.
I’ve had this project on my ‘to-do’ list forever. Over the past few months I’ve downloaded plugin after plugin and could never find one that was 1) user-friendly 2) had all the features I was looking for and 3) was free. Until now! I came across a plugin called ‘Catablog’ and I love it (and I’m not getting paid to say that). This plugin offers a lot of awesome features but I’m just showing you what I used for my gallery.
This tutorial is specifically for bloggers using WordPress.
Disclaimer: I have never done a WordPress tutorial before and I’m not a techie person, so bear with me on this. I hope it helps answer some of your questions but please email me if you have additional ones.
The first step is to Download the Plugin. You can do that by either going through your dashboard (left) and installing it directly from your Plugin tab by searching for ‘Catablog’, or you can download it directly from WordPress.org (right) here.
After you have successfully installed your new plugin, make sure it is activated by viewing it in your list of plugins (left). At this point, you should also see a new ‘Catablog’ tab on your dashboard (right).
Now let’s get started on your gallery. From the plugin menu, click ‘Add New’ and then click ‘Select Image’ (left). You will then be greeted with a pop-up box asking you to choose the images from your computer.
*UPDATE: Before you upload your pictures, skip down to the “Catablog Option” and “Resizing Images” Section first. If you upload your pictures and then resize them, they will become pixelated. So make sure to increase the size first.
Once you have made your selection, your image will appear as a thumbnail (right). One this screen, you’ll want to add two pieces of information 1) The title of the project, this is the title that will appear on the thumbnail in your gallery so describe the project accurately. 2) In the ‘Link’ box, add the direct URL to the project post. This is the URL that the reader will be taken to when they click the picture in the gallery. Repeat this process for every project you want in your gallery.
TIP: Since I did my whole gallery at once, I opened up another window with my blog homepage, so it was easy to grab the post URL to the project and then pop back over to this screen. I also have all of my blog photos organized into specific folders on my computer, so adding all my photos was a breeze. Highly recommend it :)
Once you have all of your photos uploaded, it’s time to create a gallery. Under the Catablog Menu choose ‘Galleries’ and then type the name of your gallery into the box that says ‘New Gallery Name’ and click ‘Make New Gallery’ (left). You’ll see that I created several galleries, I have one for different types of projects ie. recipes, crafts, furniture, etc.
Moving on. The great thing about Catablog, is that it makes it really easy to add an image to multiple galleries. Once you have all your images uploaded and galleries named, go to the ‘Library’ tab in the Catablog Menu. Here you will see all of the photos you just uploaded (right). Here you will choose which images go into which galleries. You can choose all of your furniture projects at once by checking the little box to the left of each image and then click ‘Bulk Action’, then choose ‘Add to Gallery’ then, ‘Apply’.
NOTE: Only select images on one page at a time, or else you will lose your check marks.
Once you click ‘Apply’, you will see another pop-up window and here is where you select the gallery you want them added to. In this case, we will choose ‘Furniture and Decor’ (left).
After all of the images are into the gallery, go back to the ‘Galleries’ tab and then click on the ‘Furniture and Decor’ gallery. You will see all of the images in once place (right). Now here is the best part, you can actually drag and drop each image into the order you prefer. It’s super easy! Then click save changes.
Alright, we are almost there. Now You’ll want to make your gallery page. Go to “Add New Page” on your WordPress dashboard and name it Project Gallery (or any other fancy name you like) (left). Now, here are where things get a tad tricky. You need to add the code from each gallery into the page. Go back to the ‘Galleries’ tab on the Catablog Menu and you’ll see a code that looks something like this ( catablog_gallery id=”XXXX”) after each gallery, but replace the ‘x’ with numbers (right) and the ‘(‘ with ‘[‘.
If you add the code directly to your page, your gallery will appear in one single line straight down the page. If you want it to be more of a gallery (like mine), then you will need to add a little more code. So this is what it should look like (catablog_gallery id=”XXXX” [catablog template=”gallery”) but replace ‘(‘ with ‘[‘ and just a reminder, those ‘x’s will be replaced by the numbers from your specific gallery code. AND I suggest actually copying/pasting the code directly from the gallery and not just replacing the numbers, for some reason things can go bad that way.
I added Titles onto my page because I did different categories, but you don’t have to. Make sure you hit ‘Publish’ or else you won’t be able to preview your gallery.
Ok, just a few more things. In the Catablog Menu go to ‘Options and then ‘Thumbnails”, here is where you can decide how large you want your images. I kept mine at 125X125 (left).
Next, go to the ‘Title Link” tab and go to the box that says “Link Target”, here is where you can decide where you want the title and the hyperlink to appear on each image in your gallery. Note, you won’t actually see the title until the mouse hovers over it. I chose to have mine below each image, so I changed this to ‘_below’. If you don’t change anything from the default setting, your gallery will not have titles or hyperlinks back to the project post!
And if you enjoy reading blogging related posts, you can read my Top 10 Blogging Tips HERE :)
I hope this answered some of your questions! Like I mentioned before, I am NOT a techie person. But if you have additional questions I am happy to help but I can’t guarantee I’ll be able to solve any major issues. You can also visit the support group for this plugin here.