Textpattern logo

Help?

Creating a Photoblog

From Textbook

Tutorial by Jon-Michael Deldin.

This tutorial will show you how to create a photoblog with popup comments and a thumbnail page.

Contents

Settings

In the Admin>Preferences tab, modify the following fields:

  • Comments mode: popup
  • Automatically append comments to articles: No
    • This allows us to use <txp:article/> in multiple contexts

Section: photos

Presentation>Sections: Create a new section

  • Section name: photos
  • Section title: Photos
  • Uses page: default
  • Selected by default: yes
  • On front page?: yes
  • Syndicate?: yes

Page template

Presentation>Pages: default – the default page is used for the homepage and /photos. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<txp:css format="link"/>
	<title>
		<txp:page_title/>
	</title>
</head>
<body>
	<h1>
		<txp:link_to_home>
			<txp:site_name/>
		</txp:link_to_home>
	</h1>

	<txp:if_section name="">
		<txp:hide>
			we're on the homepage, so display one image
		</txp:hide>
		<txp:article form="image" limit="1"/>
	</txp:if_section>

	<txp:if_section name="photos">
		<txp:if_article_list>
			<txp:hide>
				This is the thumbnail listing.
			</txp:hide>
			<ul id="thumbs">
				<txp:article form="thumb" limit="9999"/>
			</ul>

			<txp:category_list break="li" this_section="1" wraptag="ul"/>
		<txp:else/>
			<txp:hide>
				we're viewing a single image
			</txp:hide>
			<txp:article form="image"/>
		</txp:if_article_list>
	</txp:if_section>
	
	<p id="footer">
		&#169;2008 <txp:site_name/>
	</p>	
</body>
</html>

Forms

We need to make 2 forms in all: image and thumb.

Form: image; Type: article

This is our single image form. We’ll post our images as article images, not in the body of the post. 

<ul id="nav">
	<li>
		<txp:link_to_prev>
			&#8592; Previous
		</txp:link_to_prev>
	</li>
	<li>
		<txp:section link="1" name="photos" title="1"/>
	</li>
	<txp:if_section name="photos">
		<li>
			<txp:link_to_next>
				Next &#8594;
			</txp:link_to_next>
		</li>
	</txp:if_section>
</ul>

	<h2>
		<txp:title/>
	</h2>
		<txp:article_image wraptag="div"/>
		<txp:body/>
		<txp:comments_invite showalways="1" wraptag="p"/>

Form: thumb; Type: article

This links the article image’s thumbnail to the article. 

<li>
	<txp:permlink>
		<txp:article_image thumbnail="1"/>
	</txp:permlink>
</li>

Options

If you want the body of the article (photo) to display in the popup comment, just add <txp:body/> to the popup_comments form.

Posting an image

  1. Organizing (initial steps)
    1. Content>Organize.
    2. Create a new article category, "Dogs," for example.
    3. Create a new image category, "Dogs," to make things easier.
  2. Uploading the image
    1. Content>Images
    2. Upload an image
    3. Upload a thumbnail or create one. Add in alternate text and select an image category, Dogs
    4. Save
    5. Get the image ID. It’s a number, like 3. This appears in the URL of the Edit-Image screen and in the Content>Images table.
  3. Posting the Image
    1. Content>Write
    2. Click Advanced Options to expand the menu
    3. Leave everything alone, but insert the article image ID from earlier into the Article Image field. EX: 3
    4. Type in your content in the large textarea
    5. Categorize it (use Dogs for this example)
    6. Make sure the section is set to Photos.

And there you go! You are now a photoblogger!

Retrieved from "http://textpattern.net/wiki/index.php?title=Creating_a_Photoblog"

Translations [?]...

About Textbook