fOtofair2006v4.0: Diary layout, templates, recap, next steps

This time we’ll look at creating the actual fOtofair diary, including where-to and how-to insert your clickable thumbnails. If you’ve missed any of the previous diaries, check them out here. We’ll also take stock and do a Recap, and then look at Next Steps.

– Contents –
(Click to jump to a section)

fOtofair Diary Layout
Diary Template
Photo Comment Template
Recap
Next Steps

For those who were around last year, you’ll find that we’ve kept both the layout and the templates the same, with only a few tweaks to the font and colour, and of course the logo.

Where-to

The fOtodiary consists of a small introduction box in the main diary section, and the actual photos posted in the comments section. Take a look at Indianadem’s diary from last year to see the overall dairy layout.

There are two templates used to create the fOtodiary, one for the introduction box (Diary Template), and one for the photos (Photo Comment Template), both of which are described below.

To create your fOtodiary, copy the Diary Template code and paste that in the main diary section, replace the example title and short description, and hit ‘Submit.’

When your diary has been created, you add your photos as you would regular comments. Copy the Photo Comment Template and paste into the comment box, replace the example with your clickable thumbnail link, photo title, and description.

We’ll take a look at both of the templates and walk through each step in more detail below.

– Contents –

Template Code

How-to

1. Copy the code as follows: Select everything between the <– Begin etc. –> and <– End etc. –> markers, so from beginning of <div style …> to end of </div>.
2. Paste this code into the BT ‘Intro Copy’ box (the top one) of your fOtodiary.
3. Locate ‘Your Title’ in the code, and type your own title over this.
4. Locate ‘Your descriptive text here.’ in the code, and type your own descriptive blurb over this.
5. Make sure that you have formatting set to ‘HTML formatted.’

   

6. Enter your diary title using the format: fOtofair2006 YourUsername
7. Important! Preview before posting to make sure the template displays correctly, and that the text fits within the box. If it looks good, hit submit.
8. Once your diary is posted you will find it on the Recent Diaries list. Click on it to open, and begin adding your photos as you would regular text comments (see next section: Photo Comment Template).
9. This is an example of what the diary section should look like:

   

– Contents –

The photo template is where you will post your clickable thumbnails. They are posted as individual comments to your fOtofair diary in the comments section. Post one photo per comment, which will give you a maximum of 10 comments per diary. (Remember that the maximum number of photos per diary is 10. You may post a total of 4 diaries – 2 per day – over the course of the fOtofair.)

We recommend that when you create your photo comment templates, you save them to a text file. That way, you can work on them now and have your diary ready to go — instead of doing all the work the day of the fair.

Template Code

How-to

1. Copy the code as follows: Select everything between the <– Begin etc. –> and <– End etc. –> markers, so from beginning of <TABLE …> to end of </table>.
2. Paste this code into a text file (if creating your diary ahead of time) or the BT comment box.
3. Copy the code for the clickable thumbnail you have created, and paste that over the example in the above code.
4. Locate ‘Your Title Here’ in the code, and type your own title over this.
5. Locate ‘Add a description of your photo here.’ in the code, and type your own description over this.
6. Enter your comment title using the format: fOtofair2006 YourUsername
7. Important! Preview before posting to make sure the template displays correctly, and that the photo appears and the link works. If the thumbnail and text fit within the box and the link opens when clicked, hit post.
8. This is an example photo template code and display:

   

– Contents –

Submission Requirements

• Original work only.
• B&W, colour, and manipulated (ie, photoshopped) images okay.
• No video.
• Do not use large size photos in the fOtodiaries — use thumbnails that link to larger images. As a guide, keep file size to less than 160px wide/50kb.
• Maximum 10 photos per diary.
• Maximum 2 diaries per day, for a total of 4 diaries over the course of the fOtofair.

Diaries and Links

• fOtofair2006v3.0:Creating clickable thumbnails
• fOtofair2006v2.0:Submission Criteria & fOtohosts
• fOtofair2006v1.0
• Photo Fair 2005 – Welcome and Links to Photo Diaries
• How’d boo do that? (An HTML Primer) by superscalar
• HTML 101 by RenaRF

– Contents –

If you are creating your own fOtodiary:

• Select your photos and upload to your photohost.
• Create your clickable thumbnails.
• Create photo comment templates for each of your photos, and save them to a text file.
• To make sure your fOtodairy is added to the main fair diary, email the link to your diary to the fOtofair2006 team with YourUsername in the subject line.
• We highly recommend that you create your own diary. Help is available to guide you through the process. Feel free to use the fOtofair diaries to experiment and ask questions, and don’t forget the froggy bottom cafe is always a good place to ask questions and get feedback.

If you would like the fOtofair team to create your fOtodiary:

• Select your photos.
• Send one photo per e/m to the fOtofair2006 team. Photo files should be the large size image. We’ll create the thumbnails.
• E/m subject line for submissions should include: fOtofair2006: YourUsername (e.g., fOtofair2006: olivia)
• Label your photos with YourUsername and a consecutive number to indicate order of photos (e.g., olivia1.jpg, olivia2.jpg, etc.).
• In the first e/m, please provide a title for your diary and a few sentences describing the fOtodiary.
• For each photo, please provide a title (if there is one) and a brief description of each photo. Make sure the description matches the right photo filename.
• If you choose this route please note that the submission deadline is October 21, 2006.

– Contents –