How To Create A Project Gallery For Your Blog

2.9K Flares Twitter 7 Facebook 83 Google+ 46 Pin It Share 2.7K StumbleUpon 6 2.9K Flares ×

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.

2.9K Flares Twitter 7 Facebook 83 Google+ 46 Pin It Share 2.7K StumbleUpon 6 2.9K Flares ×

About 

Taryn is the owner/editor of Design, Dining and Diapers, a lifestyle blog that focuses primarily on DIY home decor, seasonal crafts, easy recipes and just being a mom! She is all about making things for less by upcycling thrift store finds, using what’s on hand and transforming dollar store finds. Taryn lives in the greater Seattle area with her husband, 2 year old daughter and newborn son.

Follow Me

Chalkboard Social Media Icons_Facebook Chalkboard Social Media Icons_Instagram Chalkboard Social Media Icons_Pinterest Chalkboard Social Media Icons_Twitter Chalkboard Social Media Icons_google+ Chalkboard Social Media Icons_Bloglovin Chalkboard Social Media Icons_Email Chalkboard Social Media Icons_YouTube

Comments

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

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

    • 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.

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

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

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

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

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

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

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

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

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

    • 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

    • 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

    • 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

  8. 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

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

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

  11. 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.

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

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

  14. 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

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

  16. 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.

  17. 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.

  18. 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

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

    • 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

  20. 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

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

  22. 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.

  23. 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

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

Trackbacks

  1. [...] That was until, I read Jackie’s (from Teal & Lime) post about her new DIY Project Gallery. She had found a great WordPress gallery plugin through Taryn from Design, Dining & Diapers. The plugin is called CataBlog  and Taryn has a great tutorial on using it: How To Create A Project Gallery For Your Blog. [...]

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>