WordPress.org

User:alphaoide/wp powered photoblog

This article is a ROUGH DRAFT. The author is still working on this document, so please do not edit this without the author's permission. The content within this article may not yet be verified or valid. This information is subject to change.

A Photoblog is a blog whose focus is on the photographic images not necessarily the text for content. Images are used in posts as the content. With little textual content, WordPress can easily be used as a photoblog with a few modifications.

Taking advantage of the features in WordPress, the following is a common model for photoblogs and include the following:

One full-size photo per page
Previous and next photo navigation
Popup comment
Archive with thumbnails

To maximize your photoblog capabilities, some plugins can be used to make developing a photoblog easier, too. First, the basic model of photoblog.

Photoblog vs Normal Blog

Here are a few things you need to know to help you understand the differences and procedures involved in setting up your WordPress Photoblog differently from a normal WordPress site.

Posts = Photographs: While some photoblogs can be set up to include textual content, for the most part the content is the photograph. This requires some manipulation and changes to the core template files to generate the look and feel of the photoblog.
Different Post Views: While photoblogs can have different looks and ways of displaying photographs, in general, their display means changing the traditional page views of WordPress. For instance, the front page of your site would normally feature the most recent 5, 10, or more posts. For a photoblog, you may only want a single image displayed as your front page, and the navigation to move to the previous single images, forcing the front page to act like a single post view. Yet, in traditional multi-post views such as the categories, archives, and search pages, instead of viewing the full-size image, you will want to the visitor to see the thumbnail view of many images. This requires modification of the template files that handle these displays.
Comments on Photographs: In general, most people comment on posts and content within a post, so it helps to have the comments visible on the same page as the posts. For a photoblog, you may want the comments displayed in a separate window, called a popup comment window, to keep comments separate from the posts. For information on enabling popup comments, see, Enabling Popup Comments.
If Posts = Images Then Pages = Content: With modifications to the index.php template file, to display content information such as About, Contact, and other textual information, use Pages. In the WordPress Template Hierarchy, all web pages are generated using the index.php template file if a specially designated template file is not avaiable. Because the index.php will have been modified for the photographs, be sure and create a page.php template file to hold the text content for your site with Pages.

Preparing Photographs

Begin by choosing a WordPress Theme for your photoblog or design one yourself. Keep in mind the fact that you will require two sizes of photographic images for your photoblog. One is a full-size image that will be used on the single post view and the other is a thumbnail size you will use on the multi-post view web pages such as the front page, archives, categories, and search. A link will be created from the thumbnail sized image to the single post view featuring the full-size image.

The size of the two images are dependent upon your Theme's layout. If the width of the post area is fixed at 400px, the full-size image should not exceed 380px to allow for padding and margins. If the image's width exceeds the width of the XHTML container, it will push the edges around and distort the look of your layout.

Also, remember photographs come in horizontal and vertical formats, so the two sizes should occupy approximately the same space in your layout, and your layout should allow for vertical as well as horizontal images.

Keep your sizes consistent for an overall look. For example, the full-size image maybe 480x360 pixels for a horizontal format image, and a comparable size for a vertical. Resize your images to those sizes to fit within the web page design. The thumbnail maybe 150px or 250px wide, but keep it consistent throughout unless you wish to have your multi-post pages look more like a collage than an ordered view.

Once the images are prepared, upload them to your WordPress site. You may want to keep related images together in a folder such as dogs, cats, weather, cars, or boats, or you may want to have the full-size image in one folder and the thumbnail images in another called full and thumb, or have them all in one folder. Images can be uploaded with the WordPress Administration Panels > Upload panel or using FTP Clients programs.

Posting Images

Begin by posting a test image to help set up the new photoblog.

To post your images to your WordPress site, go to Administration Panels > Write > Write Post panel.

Type in a Post Title and choose which category the images match. In the Excerpt text area, insert the code to display the thumbnail image.

<img src="/photos/thumbs/redcar4.jpg" alt="Red car on track at car race, photo by Harriet Smith" 
title="Red car at car race, photo by Harriet Smith" />

In the Post textarea box, add the code to display the full-size photograph.

<img src="/photos/full/redcar4.jpg" alt="Red car on track at car race, photo by Harriet Smith" 
title="Red car at car race, photo by Harriet Smith" />

Click Publish to save and publish the photograph.

The Photoblog Front Page

The front page of the photoblog will be used to display the most recent post as a full-size image. When the next post is made, it will be displayed, but the next and previous navigation will take the visitor through the full-size displays of the previous (and next) photographs in the series.

To set up WordPress to display only one post at a time on the front page, go to Administration Panels > Options > Reading and set the number of posts to display to 1.

With a Text editor, open your Theme's index.php template file. Your Theme's CSS references may be different. The WordPress Loop is the default Loop that comes with the basic WordPress installation, but the title and post meta data section has been removed to streamline the Site Architecture 1.5 template codes to just include a CSS class around the photograph. The the_content template tag will display the full-size photo from the Write Post panel entry.

<?php get_header(); ?>
<div id="content">
<!-- Begin the Loop -->
  <?php if (have_posts()) : ?>	
    <?php while (have_posts()) : the_post(); ?>	
      <div class="photo">
        <?php the_content(); ?>
      </div>
    <?php endwhile; ?>
  <?php endif; ?>
</div>
<?php get_footer(); ?>

Adding Navigation

The navigation for a photoblog may be different from a typical WordPress site. The posts_nav_link template tag is usually used to move between the next and previous posts on the front or home page. It will not work with single post pages. But we "want" the user to be on the equivalent of a single post page, so we may want to fool the main template to think it is actually moving between single post pages and not multiple post pages.

The previous_post and next_post will only work in single post page view, so we change the template tags with a query to make it "think" is is always on single post view. We use the conditional tag for is_single to force The Loop to assume it's on a single post page.

<?php get_header(); ?>
<div id="content">
  <?php if (have_posts()) : ?>	
    <?php while (have_posts()) : the_post(); ?>

      <div id="photoNav">
        <?php $wp_query->is_single = true; ?>
        <div class="previous"><?php previous_post( '&laquo; %', 'prev', '' ) ?></div>
        <div class="next"><?php next_post( '% &raquo;', 'next', '' ) ?></div>
      </div>

      <div class="photo">
        <?php the_content(); ?>
      </div>
    <?php endwhile; ?>
  <?php endif; ?>
</div>
<?php get_footer(); ?>

Adding Comments and Metas

Within our simple Loop and query, we want to add the title of the post and some post meta data. This includes the date and a link to comments for the photograph. You could add more information if you want.

To add the title to the photoblog post, create a CSS class for the meta data and add the appropriate template tags. On our case they are the_title(), the_date(), and comments_popup_link(). We chose the popup comments link style so the comments would appear on a separate pop up window, keeping the look of the photoblog clean.

Again, we have an issue similar to the navigation. The comment link will only appear on a non-single post page. So, we fool it with another query that says "if the post is on a single post page, believe that it isn't a single post page and do the following". This is used right before the use of the comments_popup_link().

<?php get_header(); ?>
<div id="content">
  <?php if (have_posts()) : ?>	
    <?php while (have_posts()) : the_post(); ?>	
      <div id="photoNav">
        <?php $wp_query->is_single = true; ?>
        <div class="previous"><?php previous_post( '« %', 'prev', '' ) ?></div>
        <div class="next"><?php next_post( '%»', 'next', '' ) ?></div>
      </div>
      
      <ul class="meta">
        <li><?php the_title(); ?> | </li>
        <li><?php the_date(); ?> | </li>
        <?php $wp_query->is_single = false; ?>
        <li><?php comments_popup_link(); ?></li>
      </ul>
      
      <div class="photo">
        <?php the_content(); ?>
      </div>
    <?php endwhile; ?>
  <?php endif; ?>
</div>
<?php get_footer(); ?>

The Photoblog Archives

For the photos archives, we want to display the thumbnails of all photos all in one page. There are various ways to do this, but for the simplest method, consider creating a Page template file to create a Custom Archive Index to display your photoblog thumbnail images.

Following the instructions for creating a Page template, to display the archive, we will use the the_excerpt() template tag and link the thumbnail to its full-size version with the help of the the_permalink() template tag.

<a href="<?php the_permalink(); ?>"><?php the_excerpt(); ?></a>

Here is an example of the new Page template file called archives.php:

<?php
/*
Template Name: Archives
*/
?>
<?php get_header(); ?>
<?php query_posts( 'posts_per_page=-1' ); ?>
<div id="archives">
  <?php if (have_posts()) : ?>	
    <?php while (have_posts()) : the_post(); ?>	
    
      <div class="photo">
        <a href="<?php the_permalink(); ?>"><?php the_excerpt(); ?></a>
      </div>
      
    <?php endwhile; ?>
  <?php endif; ?>
</div>
<?php get_footer(); ?>

To use this Page template file, go to Administration Panels > Write > Write Page and assign a title for the Archives Page. In the option for choosing the Page Template to be associated with this Page, from the drop-down list, choose Archives. Click Create New Page and your new photography archive page is live.

To create a link to your new Archives, you can use the wp_list_pages() template tag or create a manual link from within your site or other template files.

WordPress.org

Codex