Creating a Gallery with WordPress
Step 1: Separate your Gallery from your Blog
1 - Go to “Manage > Categories” and add a new category called “gallery” (or equivalent). Make note of the category ID number.
2 - In your theme’s Index Template (usually “index.php”, though some themes vary), look for:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
3 - Add:
if (is_home()) if (in_category(’CATEGORYID’)) continue;
before the closing ?>
4 - Change CATEGORYID to the ID number of your “gallery” category. This will prevent all posts to that category from being displayed in your main blog. They will only show up under http://yoursite.com/category/gallery. You can exclude additional categories using the same method. Note: this won’t exclude these posts from the RSS feed.
Step 2: Design Your Gallery
Use Category Templates to give your gallery it’s own look while still fitting in with the rest of your blog.
The quick and dirty method:
1 - Make a copy of your Index Template. Normally it’s called “index.php”, but some themes use “post.php” or “home.php”. Use whichever one contains the Loop.
2 - If you don’t already have a “category.php” in your theme, rename the Index Template-copy as “category.php”. Otherwise, you’ll end up with the gallery layout across all your categories. Make a copy of “category.php” and renamed it “category-CATEGORYID.php’, where YOUR_CATEGORYID is the ID number of your gallery category.
3 - In “category-CATEGORYID.php” replace everything from <?php if (have_posts()) to </div> <?php endwhile; ?> with this:
<div class=”gallerymain”>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class=”gallerypost” id=”post-<?php the_ID(); ?>”>
<h2> <a href=”<?php the_permalink() ?>”> <span> <?php the_title(); ?> </span> </a> </h2>
<?php the_excerpt(); ?>
</div> <?php endwhile; ?>
</div>
Add anywhere in your stylesheet:
.gallerymain {
width: 800px;
height: 100%;
margin: 0 0 0 0;
padding: 0 0 0 50px;
line-height: 20px;
float: left;}
.gallerypost {
float: left;
width: 200px;
padding: 0px 50px 50px 0px;}
3.2 - Edit the above to your hearts content.
Note: Using <?php the_excerpt(); ?> instead of <?php the_content(); ?> will allow you to easily create a “preview” or thumbnail image for all your pictures/sub-galleries.
Step 3: Add Content
If you have no interest in sub-galleries or hardcore organization, and just want an easy-to-view grid of single pictures, you can start posting. For setting up sub-galleries, go on to the next page. Note: the caveat to this is that each picture gets it’s own post, which can cause a hassle when it comes to batch editing.
1 - Start a new post.
2 - Enter your picture(s) and text and format as you see fit. *
3 - Enter your thumbnail and any gallery description into the Excerpts field. ** Link the image to the POST, so people can leave comments on your picture.
* The easiest way to add pictures to a post is to load the picture using the WP upload module and “send to editor” the full picture with no link. Otherwise, HTML templates can be used to get the layout you want.
For those of you into sharing all the EXIF camera details along with your pictures, the EXIFRead is a handy piece of freeware for extracting that information.
** And the easiest way to make a thumbnail is to load the picture and “send to editor” the thumbnail with link and cut/paste the code into the excerpt field. Just remember to change the link to it connects to the post itself.
Write a Comment