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. My tutorial on How To Create A Project Gallery For Your Blog.
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 here is how mine turned out! You can view the whole project gallery here and all recipes here.
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.
About Taryn Whiteaker
Hi! I’m Taryn! The voice behind Taryn Whiteaker Designs. I launched this brand over 11 years ago when I became a stay-at-home mom. What started as a small craft and mom blog eventually grew into a full time design and DIY site. My goal has always been to inspire others (especially women!) with design ideas, DIY tutorials, entertaining ideas and give you the tools you need to complete them yourself!
Oh, thank you so much for this great tutorial! I’m always looking for easy-to-follow tutorials as I’m trying to figure out WordPress, too. I just love how your gallery looks ~ this project is going on my “to do” list!:)
I am super excited to try this! Thank you so much for the wonderful tutorial!!!
I checked out your project photo gallery & it looks great! I like how clean yours is without the photos being labeled. I may have to rethink my gallery pages a bit. Thanks for the inspiration :)
This is awesome, thank you!!! You just saved me a bunch of money! :)
Anna
Creating project galleries has been on my to do list for about 2 months and I still haven’t got round to figuring it out (oops). Yours looks great!
Thanks for your words of encouragement – I took your advice and just went for it and I’m so happy to have “create project gallery” crossed off my to do list! I had to do something completely different to mine as I have a Blogger blog, but I’ve linked to this post from my site today so that any of my readers who have a WordPress one can take advantage of your great tutorial.
Since I am getting ready to move to wordpress I am really excited to check out this plug in!!! I want to put all my recipes into a gallery like that. Thanks for the great tutorial explaining how to do it:-)
Taryn, I just have to say THANK YOU!!! I’ve been trying to figure out how to add a gallery to my site for so long. You made it so simple. Thanks! :)
Taryn this is fantastic. I’ve been looking everywhere for a good plugin for this. Now I’ll add it to my to-do list!
I was also wondering how you added your popular posts to your sidebar? Your blog is fantastic, I love it.
Thanks so much for getting back to me Taryn. I knew I should have gone with Genesis!
This is awesome! Thank you so much for sharing. I’m creating mine today!
Taryn, Thanks again for your awesome tutorial. I had your tab opened and it encouraged me every step of the way while I worked on it for my blog. I just finished it and you can see it here
However, my projects are all lined up on the left side instead of neat little rows like yours are. I placed the little ‘_below’ message in the link area, but it has all my links to the right… I don’t expect you to be the “tech support” for me…but do you know what I may have done wrong??
Hey Rita! Your gallery is looking great!
This actually happened to me. My Recipe gallery looked just like yours for a while. I couldn’t figure out why it was this way when I did the exact same thing as my other one. SO, all I did was re-insert the code that included the gallery code a few times and it eventually worked. Sometimes code can be so picky and it just took a few times to make it look the way I wanted. May be try that?
Thanks so much for this. I am following step by step and having the same issues with it aligning to the left and not in gallery view. Maybe I am confused by the switch out “[” for “(“. Is this correct?
[catablog_gallery id=”XXXX” [catablog template=”gallery”]
– or –
(catablog_gallery id=”XXXX” [catablog template=”gallery”)
Such a great tutorial Taryn!!! I’m having a similar issue trying to get my items to actually create the gallery format versus the straight line.
[catablog_gallery id=”XXXX” [catablog template=”gallery”]
This is the code I am using. Any tips??
Thanks so much!
Hi! I’m having a similar issue trying and when I use to fix this cod.
[catablog_gallery id=”XXXX” [catablog template=”gallery”]
I was almost going crazy!
THANK YOU THANK YOU!!
You are freakin’ awesome! Ive been meaning to look into this since my redesign, so this tutorial couldn’t have come at a better time! I want to kiss you right now!!!! :)
FAB tutorial! I’m totally doing it right now :) Everyone will be so happy to have all of my inflammatory political posts organizers, LOL!
Very helpful post. I’m on blogger, but I know DIYers are looking for this tut.
Thank you so much for this tutorial! Just what I’ve been looking for!!!
Leslie
This is fabulous and exactly what I’ve been looking for!!!
This is fantastic! I just moved to WordPress and was looking at the option of setting up a gallery for my posts! Thank you so much!
Jo-Anna
I am a brand new blogger and new to all of this. I came across your blog and wanted to tell you how nice and clean your site looks!
Marisa
Thanks so much for the tutorial, I have only been blogging since last may, so this is very helpful info. I was wondering how you did the gallery in your post. I use wordpress as well http://www.mydomesticdomain.com
Thank you sooo much for this post. I have it “pinned” and will be giving this a try!
Great tutorial! Thanks!
Rebecca
http://www.heronscrafts.blogspot.com
First of all, huge thanks to Taryn!! I never had a proper project gallery and now I have an amazing one!
This is not for the faint of heart, though. It took me many hours to catalog everything. A few tips I figured out:
1. For the gallery display to work properly (grid of images), make sure Lightbox is enabled. Go to Catablog > Options > Lightbox and check the first checkbox to enable it.
2. The code on your page should be in this format: [catablog_gallery id=”7984″ template= “gallery”]
3. Change your thumbnail size as Taryn recommends BEFORE you upload your pictures. The default is only 100 pixels. I uploaded a bunch of pictures then changed to a larger thumbnail size and my pictures were distorted. I had to re-upload them all to get them crisp at the larger size :(
Jackie, Thanks so much for giving the code again. I couldn’t get it the way it was explained in the post, sorry Taryn. When I copy and pasted yours Jackie I just replaced the numbers and it worked perfectly. Thanks again for the additional tips. Now it’s working. Lesley
Hey Jackie!
Thank you so much for your feedback! It’s always great to hear other people’s experiences with this. It’s so funny how HTML code can be so picky sometimes. I think a lot your experience may be that you are on a different theme than me, every theme will require slightly different options which is really helpful for other bloggers to know. I didn’t need to enable lightbox with my theme, but good to know that you had to. I’ll also update the tutorial so people realize they need to change the thumbnail size before they upload.
Thank you!
Taryn
Thank you thank you for your comment. I spent an hour trying to get the code right. I had to check light box and take out catablog before template in the code and it worked immediately. I wish I would have read this an hour ago!!!
Greta
Thank you so much for your comment! I drove myself crazy for an hour trying to figure out why my gallery wouldn’t line up.
Helpful post–I’d not heard of this plugin before. Thank you for sharing!
Thanks so much. I have a gallery but it takes so much time to update because I do it all manually. I am thinking I may switch to this but still save the gallery I created just in case. I have been having trouble with plug-ins lately taking down my site. Thanks so much for the tutorial I love the look of the gallery so much.
Lesley
Great tutorial! I’d always wanted to know how to do this! I found if I replaced the [ with the ( it didn’t work for me, it worked just to leave it the way it was. I would have never figured this out myself so thank you!!
Thank you!
Your gallery is gorgeous. I need to find a way to do this in blogger!
Thanks for sharing the plugin and for all the helpful hints! Took a while for me to realize that mine looked funky because I entered it into the Visual section instead of the HTML but it worked like a charm after I changed it. Thanks again!
great tutorial Taryn and beautiful project gallery!!
Thank you so much for this tutorial!! It’s exactly what I was looking for and so easy to follow. I’m def a new reader of your blog. :)
Thanks so much for your instructions. I now have a recipe gallery on my blog! I have many more to make, but am so happy to have one completed.
Hi Taryn,
Thanks so much for the great tutorial. I saw it a while ago, and finally got around to doing a Valentine’s Day project gallery on my blog following your tutorial. Now, I just need to do all the other projects, recipes, and parties, lol. I did have to reload all the pics after I changed the thumbnail size, which may have been because of my theme, and at least it didn’t take too long.
Thanks again.
Taryn, this is fantastic! I’ve been using Link Manager from InLinkz but this is so much more streamlined. Quick question, and I’m sure the answer is yes but I want to double check, you can easily add a new link without changing the code, right? Just add the new project to correct category, and it will automatically be updated without having to reinstall the code?
Thanks so much, I’m going to get this set up today!
Thank you so so so much, Taryn, for this tutorial. It was recommended to me by another blogger. To be honest, I had been wanting to make a gallery but had NO idea that there were plugins. So you totally saved the day telling us about Catablog and how to use it. Your tutorial was so easy to follow and now I have a DIY and recipe gallery. I still have some tweaking to do but I’m so happy to have it. Thanks again!!!
I have always wanted to make a project gallery! Must give this a try!!!!
This is such a great tutorial!!! Might want to add in there that if you want to include the gallery in a blog post you can do that as well! :) I will be using this so much in the future so thank you so much for sharing!! :)
xoxo
Alright, I’m going to get started on this today! Thank you! :)
Taryn, you are the bomb-diggity!! I’ve been wanting to organize my DIY while I don’t have a whole lot and like you, I have searched through several plug ins without finding what I wanted! Thank you so much for sharing!!!
Thank you for this! I can’t even begin to tell you how helpful it is. I just found your blog and I love your Project Gallery projects (I share the same design aesthetic).
Thank you so much for this – it came up in a Google search (and it’s great that sweet Shannon from Fox Hollow Cottage was our first comment – I love her). I just made my first gallery and have plenty more to make but thank you so much! http://alittleclaireification.com/recipes/
Following on Twitter, FB etc now so come find me and say hi! :) Claire
THANK YOU for such a great tutorial, Taryn! I love your project gallery…and now I love my own, too! ;)
Allison
Just gave you a shout-out in my most recent post (comment luv grabbed it) for helping me set up a project gallery at my new site (I migrated today from WordPress.com to self-hosted WordPress). Your tutorial was SO helpful and easy to follow. Thank you a million times for sharing it with us.
I pinned this ages ago and finally got around to actually doing it. Thanks so much, it worked just perfectly!
Thanks for sharing your tips. This was super helpful.
I DID IT! Thank you so much for the tutorial. I honestly did not think I could pull this off, but I did and it is thanks to you! I’m going to work on prettying it up next weekend.
Thank you, thank you!
http://shoes-off-please.com/project-gallery/
Hi, Taryn. I love your website and your work. I had a quick question about your tutorial and the gallery for catablog. I am having trouble making my page display in columns. Did you have to do something specific to make that work? Also, my link and name of the item is showing up on the right of the item, not as a hover. Here’s a link to my gallery page. Thank you.
Taryn,
Found this when I first started blogging and “filed it away” {aka Pinterest!} Really love your Project Gallery and wanted to create something similar, but I’m on Blogger. I searched all.over.the.place and couldn’t find a tutorial so I used a Table and turned it into a Project Gallery! Thanks so much for the inspiration! I shared how I made a Blogger version, and linked back to you for WordPress users, on my blog. Thanks again!
http://craftivitydesigns.blogspot.com/2013/04/how-to-create-project-gallery-in-blogger.html
I just happend to stumble upon this and it is exactly what I needed to know. Thanks for the tut!
Thanks for the tutorial! I got my posts to appear in my pages, but for some reason I can’t get it to go gallery style. I guess I’ll keep trying to play with the code or check out the plugin page.
Thank you again for the easy to follow tutorial- I’m much more apt to figure things out when people use pictures (like you did!). Great job on your first wordpress tutorial!
Dana,
If you read through the comments many of us had the same experience. The comments on this post it will give you the answers. Particularly the comment from “Taryn” time-stamped October 24, 2012 at 1:17 pm. That is what helped me after an hour or so driving myself crazy… I got it fixed :)
Good Luck!
Greta
Yay thanks so much! I figured it all out and feel so organized and smart :) Great tutorial, especially for the tech challenged like myself.
My new gallery looks great!! I just converted last night to WordPress from Blogger. This was my first change on my own. Thank you for the excellent tutorial..I found you through The Thinking Closet.
Big Hugs to you! ~ Wendi
Visiting from Girl in the Garage’s link to this tutorial. Thanks so much! Can’t wait to put it into action!
Thank you so much for your tutorial! I pinned it ages ago and finally got around to setting it up this weekend. Thank you bunches!!!
Thank you sooo much! I just did a gallery, then for the life of me, couldn’t figure out how to add it to a page. You are a life saver!
This is soooo helpful! I Have been needing to make one forever and I have had no motivation until now! You really laid it all out and made it easy. I have one question, I am seeing the word ‘previous’ at the bottom of each section in the project gallery. You can take a look here: http://domesticsuperhero.com/project-gallery/ Do you know how I can fix this? It looks so weird!
Thank you for this post! Working in it now.
Hey Taryn,
Thank you SOOOO much! It took a while, but I finally got it to work. Great post!
Thank you so much!!!! I have been trying to find the right plug-in to do something like this for months. I think you have saved me from going completely insane.
Hi Taryn,
I know you wrote this last year, but I just came across it!! Thank you so much for this awesome tutorial! It is EXACTLY what I needed. I have been struggling to find a Project Gallery plug-in and you saved my life :)
I just finished mine, and it was as easy as you described! I’d love to hear your opinion of it http://paintedvintage.com/project-gallery/
Thanks so much!!
-Sherri @ Painted Vintage
THANK YOU! I have been looking for a way to do this for a while now!
Taryn, thank you for sharing this fabulous tut on adding a gallery. I am in the process of switching over to a self-hosted WordPress blog and I was looking for a gallery plug-in. I am so glad that I found your site. I had a bit of trouble getting my to display across the page instead of down the page but I located the answer to my problem in your comments section.
I can’t wait to check out your other blogging tips.
Traci
Thank you! I have been looking for a gallery plugin that does just this thing! Fist bump for you my friend and an new follower too :)!
So glad I found this! However, I feel like a dummy because I can’t even find the “plugin” tab on my dashbaord? Am I missing something? I downloaded catablog from the plugin gallery but what do I do once it’s downloaded onto my computer? I consider myself pretty tech savvy (being a graphic designer and all) but I’m having a serious brain fart. Any help would be much appreciated!
Just switched over to wordpress.org and used this tutorial to set up my gallery! So easy to follow, thanks so much!!
xo,
bre
Thank you so, so, so much for this tutorial! This was exactly what I’d been searching for and your instructions were so helpful getting it set up on my blog. I’m a total newbie so I appreciate you sharing this knowledge. Thanks again!
Taryn, I cannot thank you enough for this tutorial! It would’ve taken me days to figure this out on my own! Also, thanks to the commentor, Jackie. For whatever reason that code worked when I copied and pasted it, nothing else I tried would get that gallery to line up. Thanks again to you both!!
Thank you for sharing this- what a game changer :) I was wondering if you or someone else might have some insight for 2 issues:
1. I have multiple galleries on one page (different kinds of projects ) and at the bottom of each gallery it says “previous” in lighter gray lettering. It doesn’t seem to be a hyper link but I cannot figure out how to make it go away.
2. II had originally set it to keep the aspect ratio (under options>thumbnails) and now that I see it, I think I want the regular square thumbnails, but when I uncheck it, they don’t change. Is there any way to get it to change without having to reload every photo or will Ineed to redo everything?
Here is my site for reference http://www.thelifejolie.com/projects
Thanks in advance to anyone who has info.
Thank you for this tutorial! I found this post from the eBook Framework by Just a Girl and Her Blog. I was wondering if you have suggestions on how to make galleries that automatically update when you publish new content? or does this plugin make it easy?
Hi Jessica! Unfortunately I don’t know how to automatically update them. That would be nice though! I know some people have found other solutions that do update automatically but I’m not sure what they are. Sorry!
Thank you so much for this tutorial! Found you through Building a Framework. I did have to use Jackie’s tip for the lightbox option and the slightly different code as well. I’m loving my new gallery page, thank you thank you!
Thank you so much for posting this tutorial! I’m visiting from Building a Framework. I am so excited to be back to blogging after a 3+year hiatus and starting up brand new shiney blog. :) Now on to read your 10 tips post. :)
Hey! I’m not sure what I’m doing wrong…but my gallery looks nothing like yours. I never saw anywhere to hide the title text or have it only appear when hovering over the image. Please help!
Great post! When you resize the images what size would I use?
So I was uploading my photos perfectly until suddenly I got an Error 500 message when I tried to upload. Did you ever get this? What did you do?
Thank you so much for this tutorial!
Thank you Taryn for the post!