creating a photoblog

Creating a Photoblog with Textpattern, part 1

Contents

In this series

I’ve seen a number of questions on the Textpattern forum that suggest new users are attempting to build photoblogs, and failing – or at least choosing unnecessarily complex methods. By “photoblog”, I’m referring to the kind of layout used by many of the more popular examples of the genre, like Chromasia and Heather Champ: one image per page, with previous/next navigation linking the images in a chain.

Textpattern has a built-in “article image” feature that’s ideal for this kind of blog. As the name suggests, it lets you associate an image with each article. The advantage of using an article for each image rather than an image gallery is all the Textpattern features that go with articles: a unique permlink URL, titles, user comments, and room for us to add a description and excerpt.

In order to structure our photoblog, all we need to do is make it display one article per page. The usual method of achieving this is using <txp:article limit=1 /> on the main photoblog page, with <txp:older> and <txp:newer> for navigation.

Unfortunately, there’s a drawback to using the <txp:older /> and <txp:newer /> tags. “older” and “newer” are intended for paging through lists of articles. The main list page (http://example.com/ or http://example.com/section/) is page 1. Clicking on “older” takes us to page 2 (http://example.com/?pg=2 or http://example.com/section/?pg=2), and so on. This means that the content on each page changes each time we post a new article: the article that was formerly on the front page is now on pg=1, the article formerly on page 1 is now on pg=2, and so on. Bookmarks, search engine indexes and link aggregators will become out of date every time we post a new article.

Textpattern also has <txp:next /> and <txp:previous /> tags, which sound more promising. These are intended for paging through single articles, which is exactly what we want. Unfortunately, they only work on article archive pages, not list pages. Even though our front page only shows a single article, it is technically a list page, so <txp:next /> and <txp:previous /> won’t work.

To solve this catch-22, I’ve written a simple plugin: zem_nav. It works exactly like <txp:next /> and <txp:previous />, except it removes the list page limitation. To use it, place something like this in an article form:


<txp:zem_link_to_prev>&larr; prev</txp:zem_link_to_prev>
<txp:zem_link_to_next>next &rarr;<txp:next_title /></txp:zem_link_to_next>

Here’s a basic photoblog recipe using the above techniques. Make sure you’ve installed and activated the zem_nav plugin first.

Page Template
Edit the ‘default’ page if you’d like your photoblog to be the front page of your Textpattern site. Otherwise, create a new page template and name it ‘photoblog_page’.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
[..snip..]
<!-- center -->
<div id="center">
<txp:article form="photoblog_form" limit=1 />
</div>
[..snip..]

Section
You’ll need a section where archived posts will live. If you’re using a default Textpattern installation, you can use the “article” section to begin with. Otherwise create a new section, and follow the prompts to upload the PHP file and edit .htaccess if necessary. Set “Uses page” to “photoblog_page” (or “default”, if the photoblog is the main page of your site).

Article Form
Save this as “photoblog_form”, and set the form type to ‘Article’:


<txp:permlink><txp:article_image /></txp_permlink>
<txp:zem_link_to_prev>&larr; prev</txp:zem_link_to_prev>
<txp:permlink><txp:title /></txp:permlink>
<txp:zem_link_to_next>next &rarr;<txp:next_title /></txp:zem_link_to_next>

This will display the article, followed by next/current/previous links. You’ll need to arrange the layout and style to taste, of course.

You can see a quick sample photoblog I’ve put together using these examples here.

Section
If you want your photoblog displayed on the front page of your Textpattern site, there’s nothing more to do, provided you correctly edited the ‘default’ page template. If your photoblog is to be displayed in a separate section, create your section as usual, and set ‘Uses page’ to ‘photoblog_page’.

Posting an Image
Posting an image requires two steps:

  1. Upload your image. You can do this using Textpattern’s built-in image handling (the ‘image’ tab under ‘content’ in the administration interface). Make a note of the image ID number, since you’ll need it when posting your article. If you’d prefer, upload your image to your server using FTP. The advantage of using Textpattern’s image handling is that it helps with thumbnails, which will come in handy later.
  2. Post an article. Do this exactly as you would post a text article. You can provide a title, excerpt and body text if you wish, or simply leave those blank. To attach the image, click on “Advanced Options” and look for the “Article image” field, just to the left of Excerpt:

If you uploaded your image via the Textpattern image, enter the image ID number in the Article Image field. If you uploaded via FTP, you’ll need to enter the relative URI to the image file – typically something like /images/pic01.jpg.

You don’t have to wait until you’re ready to publish images before uploading them. To save time, you can upload a batch of images in advance, and post the articles over a period of time.

Next: customizing your photoblog.


7 September 2004, 04:28 by zem ·

You continue to impress…

Good work, zem.

— Matthew Kelley    Sep 8, 05:08 am    #

this is exactly what is was looking for, but for some reason, it doesn’t work as it supposed to work (as in your example!).

when i post a second post and i click on previous i get a 404 file not found error. the page ../default/1/first-post isn’t created, nor is the page ../article/2/second-post. what is it i do wrong?

i hope you can help me with my problem!

regards, mark

— mark    Sep 9, 05:45 pm    #

Mark,

It sounds like there’s something screwy with your section files and/or .htaccess. More discussion here.

— zem    Sep 10, 05:11 am    #

hey zem, nice. i’m only slightly disappointed that www.fiftymillimeter.com didn’t make your list of popular examples of the genre. especially as we’ve been on textpattern from the beginning.

— ian    Sep 12, 09:53 pm    #

Ian,

I actually had a link to fiftymillimeter.com in an earlier draft, as an example of the use of ‘pg’ navigation.

I’ve added you to my links section instead.

— zem    Sep 13, 11:44 am    #

haha. well, thank you, but i was only teasing.

— ian    Sep 15, 08:31 pm    #

Just one thing. When I use the form you mentioned above for the photolog, the actual photo doesn’t come in the RSS. Is there a way I can get to see it via RSS ?

Thanks

— Sid Carter    Oct 14, 12:10 pm    #

Would it not be possible to do this using a category (with possible nexted categories inside it) for the images and then create a plugin to get images from this category and completely bypass the article thing?

I might try and work this idea out because I don’t like having to do two things to change one thing.

Thing thing thing thing.

— SteveC    Jan 7, 11:35 pm    #

The zem_nav plugin is broken in TXPrc3. Could you fix this?

Apologies for the impatience.

— Anark    Feb 22, 05:44 pm    #

Is there any reason why the links would disappear on the main page, but appear on the ‘index.php?id=x’ pages?

I’ve sections and clean links disabled, if that matters.. and i’m on 1.0rc1

— riff    Mar 25, 09:53 am    #

just a lil heads up, I’ve RC3 up and running and the normal link_to_prev and such works perfectly. link_to_next on the default page is a bit flakey, but i’m happy!

— riff    Mar 26, 08:49 am    #

I have this working now thanks, however I have a problem I dont understand. The first picture loads fine, but when I click prvious to see other images, instead of the correct layout I get the comment form appearing underneath the image, which I dont want.

Any ideas what is causing this ?

go to www.muxton.com/photos

cheers

— Scott    Apr 7, 07:41 am    #

Hi,

I’m going to set up a photoblog with textpattern and wonder if it would be possible to have a few thumbnails displayed next to the main image, either the 5 most recent pictures posted or the 2 images that are directly before and after the image being viewed ?

Would you know what would be the way to achieve that ?

Thank you for any tips. And cheers!

— Lilou    Mar 23, 06:46 pm    #

Commenting is closed for this article.