Taryn Whiteaker Designs

DIY and Interior Blog

How To Create A Project Gallery For Your Blog

Thanks For Sharing!

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.

Wordpress Project Gallery, Catablog tutorial, how to create a project gallery for your blog,

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 :)

Top 10 Blogging Tips From Design, Dining + Diapers

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 

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!

You May Also Like:

Reader Interactions

Comments

  1. Rita Joy says

    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!:)

    Reply

  3. Nicole says

    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 :)

    Reply

    • Angela at A Typical English Home says

      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.

      Reply

  6. Jocelyn @BruCrew Life says

    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:-)

    Reply

  7. susan says

    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! :)

    Reply

  10. Rita Joy says

    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??

    Reply

    • Taryn says

      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?

      Reply

      • Greta @ Project Momma says

        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”)

        Reply

        • Kayla @ KR Dixon Designs says

          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!

          Reply

          • Ümran A?k?n Ayd?n says

            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!!

  11. Stephanie says

    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!!!! :)

    Reply

  21. Jackie says

    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 :(

    Reply

    • Lesley says

      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

      Reply

    • Taryn says

      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

      Reply

    • Greta @ Project Momma says

      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

      Reply

  23. Lesley says

    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

    Reply

  24. Sunday Burquest says

    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!!

    Reply

  27. Vanessa says

    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!

    Reply

  31. Dannyelle @ www.lifeisaparty.ca says

    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.

    Reply

  32. Carrie says

    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!

    Reply

  33. Aubrey says

    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!!!

    Reply

  35. skye @ neathering our fest says

    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

    Reply

  37. Christy says

    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!!!

    Reply

  41. Lauren @ The Thinking Closet says

    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.

    Reply

  45. Christine says

    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.

    Reply

  46. Lora @ Craftivity Designs says

    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

    Reply

  48. Dana says

    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!

    Reply

    • Greta @ Project Momma says

      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

      Reply

  50. Wendi @ H2OBungalow says

    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

    Reply

  54. Allyson says

    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!

    Reply

  57. Michelle says

    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.

    Reply

  60. Traci says

    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

    Reply

  62. Breanna says

    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!

    Reply

  64. Christine says

    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!

    Reply

  65. [email protected] Honeycomb Home says

    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!!

    Reply

  66. Jessy @ The Life Jolie says

    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.

    Reply

  67. Jessica H says

    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?

    Reply

    • Taryn says

      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!

      Reply

  68. April R @Uncookie Cutter says

    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!

    Reply

  69. Cindy Magee says

    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. :)

    Reply

  70. Ashley Berry says

    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!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *