WordPress Gallery Tutorial (as seen on Ma.tt)
February 24, 2009
I’ve seen a lot of people who use WordPress asking how to create a gallery similar to the one on Matt Mullenweg’s website (Ma.tt) using nothing but core WordPress functionality. Fortunately, it’s much easier than it looks and with just a few simple steps you can have a gallery of albums and images up an running in no time. What you’ll end up with is the following:
- A Gallery category
- A custom category template w/a custom field for the “Thumbnail” Album image
- A little extra CSS
- Creation of an Album and added images!
Step 1: Gallery Category
The first step is as simple as making a new Category in WordPress called “Gallery”
Once you have created that category, mouse over the title and look at the bottom left of your browser for the URL. You will need to remember the ID number of the Gallery Category.
The URL should look like http://www.yourdomain.com/wp-admin/categories.php?action=edit&cat_ID=3
Step 2: Creating a Custom Category Template
Thanks to the WordPress template hierarchy we can create custom templates for specific categories we want to display differently. In this case create a new php file in your favorite editor and call it “category-x.php” replacing the “x” with the ID number of your Gallery category from step 1. So if your Gallery ID is 3 your template will be category-3.php.
Next open the theme editor in WordPress and copy all of the code in the “category.php” template. If you don’t have a category.php template then copy the code in the “index.php” template.
If you are not familiar with WordPress templates then the next part might seem tricky so pay close attention. If you are familiar with them this will be a remedial of an explanation.
Paste the code you just copied into the category-x.php file we have open on your computer, all of it. Next, delete the content specific sections. That means that you want to keep the stuff like:
<?php get_header(); ?>
<div id=”content”>
<div id=”contentleft”>
<!– logic and template stuff will go here –>
</div>
<?php include(TEMPLATEPATH.”/sidebar.php”);?>
<!– The main column ends –>
<?php get_footer(); ?>
Your specific layout might use different tags (like <div id=”wrapper”>, etc…) so make sure you keep the base layout stuff and just get rid of the code that creates the content in that template. If this still doesn’t make sense post a link in the Blackbox Support Forum and we’ll try to answer you as soon as we can.
Next, add the following code to your new template, in the case above where the <!– logic and template stuff goes here –> is.
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id=”gallerypost”><a href=”<?php the_permalink() ?>” rel=”bookmark”><img src=”<?php echo get_post_meta($post->ID, “gallery thumbnail”, true); ?>” alt=”<?php echo get_post_meta($post->ID, “gallery thumbnail”, true); ?> Gallery” height=’150′ border=’0′ align=’left’ style=’margin-left: 5px; margin-right: 5px;’ /></a>
<h1 style=”margin:0px 0px 2px 10px;”><?php the_title(); ?></h1><?php the_excerpt(); ?>
</div>
<?php endwhile; else: ?>
<p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p>
<?php endif; ?>
In completion your custom category-x.php template should look like:
<?php get_header(); ?>
<div id=”content”>
<div id=”contentleft”>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id=”gallerypost”><a href=”<?php the_permalink() ?>” rel=”bookmark”><img src=”<?php echo get_post_meta($post->ID, “gallery thumbnail”, true); ?>” alt=”<?php echo get_post_meta($post->ID, “gallery thumbnail”, true); ?> Gallery” height=’100′ border=’0′ align=’left’ style=’margin-left: 5px; margin-right: 5px;’ /></a>
<h1 style=”margin:0px 0px 2px 10px;”><?php the_title(); ?></h1><?php the_excerpt(); ?>
</div>
<?php endwhile; else: ?>
<p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p>
<?php endif; ?>
</div>
<?php include(TEMPLATEPATH.”/sidebar.php”);?>
<!– The main column ends –>
<?php get_footer(); ?>
Download a copy of the above template (zip file)
The last step is to upload (via ftp) that custom template to your site: http://www.yourdomain.com/wp-content/themes/theme-you-are-using/
WordPress will know to automatically start using that template for your gallery category now (assuming you used the right ID #).
Step 3: A little Extra CSS
Add the following to our style.css template:
#gallerypost {
background: #FFFFFF;
float: left;
width: 530px;
margin: 0px 0px 10px 0px;
padding: 10px 10px 10px 10px;
}
You might want to adjust the properties to make it look just like you want but that is the jist.
If you want a boarder around the album image add the following to style.css right after #gallerypost. (In this case a blue border).
#gallerypost img {
border: 1 px double #0000FF;
}
Step 4: Create an Album and Add Images
Add a new post and give it a title that describes the images that will be in the gallery.
Upload your images through the WordPress Image uploader.
While in the Image Uploader select the image you want to represent your gallery.
If you are using Firefox, right click the square thumbnail WordPress has created for you and select “Copy Image Location.”
If using IE, click the button below for Link to “File URL” and copy the url.In this case you will need to add “-150×150” right before the file extension so your url should look like this:
http://www.yourdomain.com/wp-content/uploads/2009/02/imagename-150×150.jpg
Switch to HTML mode in your editor in WordPress and enter the gallery shortcode:
[ gallery columns="4" ]
Below the post editing window is a section called “Custom Fields,” type “gallery thumbnail” in the “Name” field and in the “Value” box to it’s right paste the url to the thumbnail you just copied.
Save the post and go look at your site. Now all that is left is to add more “albms” and images and you are off and rolling.
To see an example implementation of this you can look at http://www.vsellis.com/category/gallery/
Leave your commments below or if you need a little help visit us in our support forums.
Related posts:
- .htaccess Loves You… Chances are that if you have been working with WordPress...
Related posts brought to you by Yet Another Related Posts Plugin.
Comments
44 Responses to “WordPress Gallery Tutorial (as seen on Ma.tt)”
Got something to say?
[...] what I tried I wasn’t 100% happy with the system I created. That was of course until I read this article that gave me the starting point I needed to build a fully functional gallery using [...]
[...] WordPress Gallery Tutorial – I’ve seen a lot of people who use WordPress asking how to create a gallery similar to the one on Matt Mullenweg’s website (Ma.tt) using nothing but core WordPress functionality. Fortunately, it’s much easier than it looks and with just a few simple steps you can have a gallery of albums and images up an running in no time [...]
Wow, what a fantastic tutorial! Very needed and helpful — I wish I had found it several weeks ago, before I cobbled one together over the course of many days…
I have a question: my template will only allow me to display a certain number of posts in category.php, but there will be more than that number of posts in the category itself vs. your example which has room to display all of the photos in the gallery (great photos!).
How do I add previous/next functionality to category.php? Everything I am searching for points to the template tag with single.php.
Hi…. thanks for this tutor!1
By the Way, I need help!
Can you tell me how to modif category.php to create glossary website with wordpress?
Here the example sites!!
http://www.kordkita.web.id
I wanted to create alphabetical category!!
Please help me and mail me when you create this tutor
I couldn’t see the site you referred to but there is a plugin called AZ Index that you can download for free from http://wordpress.org/extend/plugins/azindex/.
I’ve used it here so you can see how it works: http://www.citycrush.com/wine-and-dine/
I get this totally, it is pretty straight forward. I have two additional requirements which I haven’t worked out yet.
1st, to add the media picker button onto the custom fields box so that images can be uploaded on-the-fly.
2nd, to be able to show the a main image with x-thumbnails below, and to use javascript to switch the thumbnail image and master image but still use the categories array in php.
I am not a geek, just poor pitiful English major and artist trying to figure out how to create a cool gallery of images on my site. I don’t even know where to begin. Is it possible to create a gallery of thumbnails that allow the viewer to click on the image to see it full size?
Chris
Chris,
Yes it’s built into WordPress. Just upload your images into whatever post you want (create one called “Vacation Pictures” for example) and in the HTML view in wordpress add the gallery shortcode [gallery] and WordPress will automatically create the thumbnails for you and display them in that post. When a user clicks on the image it will take them to the larger version. If you need help let me know, this could be done very affordably to show you how the first time but it’s pretty easy to accomplish.
Avangelist,
Not sure how to accomplish #1 right off hand but that is a good idea. I’d submit that would be a good plugin (we’ll look into that).
I don’t completely follow you on #2. I get swapping out the images (inside the gallery) but don’t follow how you want to use the categories array?
You might think about opening up a thread in the support forums.
Scott
[...] I would also like to thank both Blackbox Technologies and Kristarella for their awesome posts that helped me get my galleries to where I wanted [...]
[...] and to make it all navigable. As I was doing some research on photo media in Wordpress I found a really great tutorial on how to make a “photo gallery” within Wordpress, using only the core functionality. [...]
Thanks Scott! The tutorial really helped. Appreciate you putting it out there.
Hi Scott,
Love the idea, absolutely cannot get it to work. I still get my post with the thumbs from every single image within the post on the front page. Also, there appears to be no way to link to http://www.uppernet.net/gallery to show the galleries directly.
What I am after is what Matt has on his site. A single pic on a post that links to a gallery page with the subsequent pictures. I believe that is what your tutorial is for. Any ideas?
Thanks,
Neil
Brian, Thanks! Glad you found it useful!
Neil, to start with you need to set your permalinks (Settings > Permalinks) in WP, right now you are using the default URL set up and while that can be made to work, this tutorial isn’t set up for that. Then you need to add a link in your Navigation to your gallery category (should be a gallery, not a page). Hopefully that will get you moving in the right direction. Let us know how it goes.
Scott
Im lost on this part:
//
Switch to HTML mode in your editor in WordPress and enter the gallery shortcode:
[ gallery columns="4" ]
//
Do I enter that for every post? It just ends up looking like I titled the image that. Where in the html do I place it?
Thanks for the great work.
David, You’re not inserting the images directly into the post are you? You should just be using the image uploader without inserting the images (that is what the gallery shortcode will do for you). If you aren’t in HTML mode (top left of the post editor you should see “Visual” and “HTML” tabs) then it won’t work. Let us know if that still doesn’t quite get it for you.
I am having similar problems to Neil. I have no idea how this would work, it almost suggests word press magically knows to put it into the right category, there’s no explanation of how to link the post to the right category and at the moment, when i post the images, like Neil i just get all the images in thumbnails within the post.
I also, would like a gallery, with a list of albums, like the example, with a blurb and a thumbnail of the gallery which links to the full gallery inside….is this tutorial intended to create a gallery like that? as that is what it seems to say.
http://77.86.36.234/
that is what I have got so far (it is a url to a test site for a client, I promise thats not anything dodgy)
also, not sure what you mean by change permalilnks, I would llike more normal urls for each page but surely changing the structure would mean going back and changing every single link on the site?
any help would be wicked, as this example tutorial seems AMAZING and id love to get it to work.
Thanks
Justin
Thanks for the tutorial! I am going to see if I can implement something similar on our site.
Hi, I have used your tutorial and it works wonderfully.
However I have a few question,
1.how to you add new photos to an existing album?
2.I tried using to ftp my photos to a directory and I can’t get it to work… (ftp seems more organised and if this work, updating the album seems much efficient and easier)
3.Where to you set the display photo size? I tried the style.css and nothing happen.
Thanks for the great tips!
Greetings,
My name is Vladimir and I’m from Latvia. I have a question for you, on behalf of native wordpress gallery.
I wanted to create a wordpress gallery which allows users to post comments for each photo of a galley and for the whole gallery itselft. I found this link in the web, it describes the process of creating such gallery. I succeeded and was happy with what I’ve done, everything works fine, but the gallery post produces the image-posts as attachements, and I can’t seem to create the previous_photo/next_photo buttons for comfortable navigation around photos.
Standard wp post navigation funcions, such as:
// •
// •
do not work here, because they cycle through posts, not the attachements. I don’t know what to do. I’ve seen, that you’ve managed to come over this problem.
For example on this page of yours – http://www.vsellis.com/gallery/cool-skies/attachment/amber-sunset/, You have a thumbnailed navigation. Can you share the solution for this problem with me, please? I would be really grateful, I really need to implement this sort of navigation.
I hope to hear from you soon.
Sincerely yours,
Vladimir.
Vladimir, I probably need to update this tutorial sometime soon to include several of the questions that have been posed. That is a good one. WIthin the loop it’s as simple as adding:
< ?php previous_image_link( ); ?>
< ?php next_image_link( ); ?>
You’ll want to space them out using css however you like but that will get you the next and previous images.
I looked at your gallery, looks great!
Hi Scott,
Thanks for the tutorial!
I seem to be missing something, however: after uploading the images and adding the custom field, clicking on the “Gallery”-category causes WP to throw an error.
“Parse error: syntax error, unexpected T_STRING in /var/www/g20311/opnemer.org/HTML/opnemer/wp-content/themes/default/category-10.php on line 16″.
Line 16 is this:
” <a href=”” rel=”bookmark”><img src=”ID, “gallery thumbnail”, true); ?>” alt=”ID, “gallery thumbnail”, true); ?> Gallery” height=’150? border=’0? align=’left’ style=’margin-left: 5px; margin-right: 5px;’ />”
Unfortunately, I’m not much of a PHP-hacker so I don’t know how to identify the error.
Regards, Erik
Hi Scott,
Thanks for the tutorial!
I seem to be missing something, however: after uploading the images and adding the custom field, clicking on the “Gallery”-category causes WP to throw an error.
“Parse error: syntax error, unexpected T_STRING in /var/www/g20311/opnemer.org/HTML/opnemer/wp-content/themes/default/category-10.php on line 16″.
Line 16 is this:
” <a href=”” rel=”bookmark”><img src=”ID, “gallery thumbnail”, true); ?>” alt=”ID, “gallery thumbnail”, true); ?> Gallery” height=’150? border=’0? align=’left’ style=’margin-left: 5px; margin-right: 5px;’ />”
Unfortunately, I’m not much of a PHP-hacker so I don’t know how to identify the error.
Regards, Erik
Erik, Looks like some characters got converted and php tags got dropped, not sure how or why but try this:
” rel=”bookmark”>
ID, “gallery thumbnail”, true); ?>” alt=”< ?php echo get_post_meta($post->ID, “gallery thumbnail”, true); ?> Gallery” height=’150? border=’0? align=’left’ style=’margin-left: 5px; margin-right: 5px;’ />
Hmmm.. wordpress comments doesn’t seem to like the quotes.. I’ll email it to you…
Hi Scott,
I think I’ve got it now! Thanks for helping out.
One more thing: Does it matter if I link to an image-file or an archive-page? The former worked, the latter didn’t, but I’m not sure if it should make any difference.
Regards, Erik
Erik, Your theme will need to have the attachment page template included for that to work but no reason it shouldn’t work if you have the template. FYI, we’ll be updating this tutorial soon and adding some new features/trying to make things still easier so stand by. We’re also working on a new theme for BlackBox-Tech.com and need to get that done first.
Is there an easy way to migrate Gallery2 content (ie images and tags etc) to this kind of Wordpress Gallery?
A script would be nice – is there such a thing?
I have a large collection of photos in Gallery2 but want to ditch it and dread the though of re-entering all the tags etc by hand….
Tom, No script I know of. I’d probably just upload them (you can do that in bulk) trough the WordPress interface once you get your gallery set up.
[...] BlackBox WordPress Gallery Tutorial (no plugin required) [...]
I have same questions as Geoffery (comment 19) and these don’t seem to have been answered. In particular point 3:
Where to you set the display photo size? I tried the style.css and nothing happen. The photos don’t enlarge very much when they are selected.
Thanks!
Geoffery & Mark (sorry if I missed this earlier)
1.how to you add new photos to an existing album?
In wordpress go to the post or page where you want to add images to an existing gallery. Click on the image uploader above the Post TItle (little box icon) and upload more images. They will be automatically added to the existing gallery since they’ll be associated with that post.
2.I tried using to ftp my photos to a directory and I can’t get it to work… (ftp seems more organised and if this work, updating the album seems much efficient and easier)
If you use FTP WordPress won’t know that the images are there and they won’t be logically associated with a particular post/page/gallery. You have to go through WordPress in order for it to know what to do.
3.Where to you set the display photo size? I tried the style.css and nothing happen.
I would set my thumbnail image size to the size you want to use in the WP media settings. WP will automatically create the thumbnail when you upload the image into the system.
I need the gallery to have paging and I love the simplicity of WordPress’s built in gallery. How would I add paging functionality?
Charles – Since the gallery is really based on categories and posts your theme may already have paging built it though it depends on where you want that paging to show up (at the “Gallery” level or inside the albums, e.g. only showing 10 thumbnails at a time, or at a pictures level (attachment pages in WordPress speak). If you need theme modification to make it work that is a little out of scope for this tutorial but look on codex.wordpress.org (I’d start your search on http://codex.wordpress.org/Next_and_Previous_Links). If you aren’t a coder and need help let me know and we’ll give you a quote.
Thank you for your tutorial. It works fine.
The only thing that doesn’t work is the template. I do see the articles published in the image category. The only thing that is missing are the gallery thumbnails:
The template can be found here: http://sassen.org/category/bilder/
Phil,
Did you add the custom field“gallery thumbnail” in your individual posts and give it the value (url) of the image you want displayed on the category page?
Thank you for your kind help and sorry for taking your time. Seems I have a big problem …. I CAN’T READ …
LOL.. no problem Phil. We’re currently redesigning our site to make it easier to read!
Thanks a lot for the tutorial. I have a problem. Your tutorial teaches us how to have a Gallery Category. But in my case, I have been trying to make a non-blog site which does not look like a blog at all. So, after having downloaded wordpess and made a website with the pages that I wanted, I went to theme editor and edited some files so that the links like categories, archives etc are not visible at all on my pages. All that are visible are the links to the various pages that I have.
I wanted one of my pages to be a gallery page which will have thumbnails of photos. When clicked on the thumbnails, I should be led to the full images with next and previous links.
I tried following the method laid out in this tutorial. Since there were no categories visible on my page, I added a page called gallery and copied the code given by you and made the custom template as per your nstructions for my gallery page and called it gallery.php.
I followed the instructions on your tutorial with the only difference being that instead of crating a category as you said, I created a page and had a gallery page template called gallery.php. I uploaded the custom template to the site on my local server. I also uploaded a few images through the wordpress image uploaded. I can see the uploaded images on my image library. But the problem is that when I go to my gallery page, I can see a page with a blank link to an image, but the images are not visible on my gallery page.
I tried creating a post like you said and followed the instructions in your tutorial, but again, When I view my post, I can see the image, the date which it was posted on and it says, filed under categoryA (one of the categories which I had first created before I decided to clear the pages of all categories, archives and any other links which normally appear on a standard blog).
I presume the method in your tutorial will work only if we have a standard blog with categories and posts. But if my site does not show either, then what do I do? How can the images be visible on the page that I created?
When I look at the source of the page, I can see this.
A wonderful tutorial. Very well explained. Thank you very much.
[...] is daar het eerste bewijs van. Wordpress ondersteund fotogalerijen, maar ik ben daar met behulp van deze tutorial iets verder mee gegaan alla ma.tt. Nu hier dus ook een fotogallerij. Ook heb ik de diverse [...]
[...] | Free Icons | Distortion Icons List – 32×32px (tags: icons weblog image) WordPress Gallery Tutorial (as seen on Ma.tt) | BlackBox Technologies (BlackBox) (tags: wordpress gallery tutorial webdesign tutorials howto photos [...]
Hi Scott – this is an awesome post.
I am having problems with the category page code – it’s not parsing on line 11. Can you help?
This is what I have
<a href=”” rel=”bookmark”><img src=”ID, “gallery thumbnail”, true); ?>” alt=”ID, “gallery thumbnail”, true); ?> Gallery” height=’100? border=’0? align=’left’ style=’margin-left: 5px; margin-right: 5px;’ />
Thanks!
Hi Scott – this is an awesome post – gallery posts are working perfectly, but…
I am having problems with the category page code – it’s not parsing on line 11. Can you help?
Tried to post the code, but it’s causing problems – any chance you could email the full code – something is tripping out somewhere..
Thanks!