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 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.
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!:)
Rita Joy recently posted..Stencils and Stripes
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 :)
Nicole recently posted..Red Bow Cup Cozy (Free Crochet Pattern)
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!
Angela at A Typical English Home recently posted..Halloween Food: Monster Spud
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.
Angela at A Typical English Home recently posted..How to Create a Project Gallery (Table of Images) in a Blog
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:-)
Jocelyn @BruCrew Life recently posted..Trick or Treat Tuesday
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! :)
susan recently posted..preview
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.
Danielle @ 2 Little Superheroes recently posted..Thrifting in Raleigh
Thanks so much for getting back to me Taryn. I knew I should have gone with Genesis!
Danielle @ 2 Little Superheroes recently posted..Yeehaw Cowboy
This is awesome! Thank you so much for sharing. I’m creating mine today!
Amanda @ Bullfrogs and Bulldogs recently posted..Crossing Something Off My Bucket List
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 http://www.harbourbreezehome.com/?page_id=2695&preview=true
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??
Rita Joy recently posted..Gallery Walls
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”)
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!
Courtney recently posted..Why Conservatives Get a Bad Rap
Very helpful post. I’m on blogger, but I know DIYers are looking for this tut.
Beja {Howdy-Honey} recently posted..Chevron Chair Makeover
Thank you so much for this tutorial! Just what I’ve been looking for!!!
Leslie
Leslie Stewart recently posted..Office Inspiration Board
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
Jo-Anna recently posted..Halloween In Our Home
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
Rebecca recently posted..Favourite Childhood Books
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 recently posted..DIY to Learn
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
Lesley recently posted..Thank You Twenty One 7
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
Greta @ Project Momma recently posted..Spring Sale Spoils (Part 2)
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.
Carly Morgan recently posted..The Rainbow Connection
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!!
Sunday Burquest recently posted..My Painted Piano {An ASCP Project}
Thank you!
Your gallery is gorgeous. I need to find a way to do this in blogger!
Holly Lefevre recently posted..Tattooed Pumpkin Placecards
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!!
Bonnie and Trish @ Uncommon recently posted..Mini Halloween Apothecary Jars
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!!!!
katie recently posted..Stripes be gone…
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
skye @ neathering our fest recently posted..things i’ve learned
Alright, I’m going to get started on this today! Thank you! :)
ange recently posted..Black French Doors – Updating our Home
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).
Alex @ northstory recently posted..Challenge Accepted
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
Allison @ The Golden Sycamore recently posted..Numbered Bathroom Cabinet
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.
Lauren @ The Thinking Closet recently posted..My Blog Migration Story: Part 3
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/
Gilit recently posted..Be Still My Heart 03/03/2013
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
Lora @ Craftivity Designs recently posted..How To: Create a Project Gallery in Blogger
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 recently posted..Recipe – Crispy Ranch Green Beans
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