 |
| |||
|
|
|
|
3.4. Creating a Thumbnail Index Page using the IndexPage TagMost web albums consist of one or more pages of thumbnails, possibly with titles, that are linked to larger versions of the photos. The IndexPage tag and it's children are used to create thumbnail index pages. In the tutorial_simple template, there is only one page of thumbnails. In a more complicated example you might have mulitple pages of thumbnails with next and previous buttons along with possibly a list of pages. Those options will be discussed later in this document. For now we'll just focus on the basics. 3.4.1. IndexPageDescribing the thumbnail index page of your album begins with the <IndexPage> tag.
Figure 3-6. IndexPage sample The DefaultThumbWidth attribute specifies what width to resize the thumbnails to when creating the index. Similarly the DefaultThumbHeight specifies the height. NeoPhoto will resize a given photo to fit in the size of the width and height specified, however it will maintain the aspect ratio. Consequently, the actual width or height of a given thumbnail may actually be smaller than what's specified here. The optional MaxRows attribute specifies the maximum number of rows to put on a single thumbnail index page. The IndexPage tag does not have any text content. 3.4.2. HeaderThe <Header> tag, which is required and must be a child of the IndexPage tag, is used to describe the HTML that will be displayed at the top of the page before any thumbnails are displayed. Typically this is where you output your HTML start tags, your title and your introductory text. It has no attributes. The text content under the <Header> tag is the HTML you wish to have displayed at the top of the page. From the tutorial_simple template: You'll notice that all the “<” and “>” tags in the text content are encoded. The first item in the text content is an <HTML> tag, the second is an HTML comment, the second a <HEAD> tag, then comes the title and close tags. As you can see with the templates distributed with NeoPhoto, you can add a much more elaborate header but this suffices as a simple example. 3.4.2.1. Using HTML commentsNote how we've included some HTML comments in the text content; a comment at the start of the text content and one at the end. We have found it's a very good idea, especially early on, to add these kinds of comments into your templates so that you can easily line up what HTML is coming from which tags. By putting a start and an end comment in each text content section you'll have a much easier time tracking down problems with your templates. 3.4.2.2. Using NeoPhoto VariablesNote the {GalleryTitle} in the text content above. {GalleryTitle} is what we call a NeoPhoto Variable. When your users enter a title for their photo album in the software there needs to be a way for you, the template writer, to be able to include that in the HTML. This is the role of Template Variables. Everything a user can enter into a photo album from titles and descriptions to dates and keywords, can be used in a template as a Template Variable. In order to separate NeoPhoto template variables from other text in your text content section the variables are enclosed in “{” and “}” characters. For a complete list of built in variables please refer to the Template Variable Reference. Template Variables can be used in any text content sections, however not all variables can be used under all tags. For instance the {ImageTitle} variable only works under an <Image> tag. See the reference for complete details. 3.4.2.3. Using Stock Graphics in your HTMLAny attractive design you are likely to create will involve the use of graphics. In the <Header> section above we've included a “Made with NeoPhoto” graphic to demonstrate how you can include a graphic from a template. There are two things to know
By keeping all graphic reference relative and making certain only to reference graphics included with the template you'll ensure that your templates can be used on any website. When NeoPhoto creates the webpages that make up the web gallery, it first creates a folder, then generates all the HTML pages and finally copies over any additional files it finds in the template folder. In this way you can include any kind of HTML object you like from stock graphics like gifs and jpgs to java applets and flash animations. Just remember to always reference them as if there are in the same folder as your HTML files. 3.4.3. ImageRowThe next tag under IndexPage is the ImageRow tag. For each type of row of thumbnails on an index page there is a corresponding ImageRow tag. There may be any number of ImageRow tags. The ImageRow describes one row of thumbnails. When NeoPhoto generates HTML, it loops through all the ImageRow tags in order and applies one photo to each Image tag under the ImageRow. When it reaches the last Image tag in a given ImageRow it looks for the next ImageRow tag and repeats the process. If it gets to the last Image tag in the last ImageRow and still has not generated pages for all the photos in the album it simply loops back to the first ImageRow tag. This provides an advantage in that each row on your thumbnail index page can be different. It's important to note that if NeoPhoto runs out of photos and there are still more ImageRow tags remaining it will skip over the rest of the ImageRow tags and continue generating HTML at the Footer tag. There are no attributes for the ImageRow tag nor is there any text content. Everything happens in the children of ImageRow. Note that typically you'll want all of your thumbnails to be in a table. The HTML open table tag should be put in the <Header> section and as you'll see the later on the corresponding HTML close table tag will go in the <Footer> tag. 3.4.4. FixedContent under ImageRowIn our tutorial_simple template, the first tag under the ImageRow is FixedContent. You can use a FixedContent tag under the ImageRow to include fixed HTML that's not associated with any particular photo. For instance, we typically use them to start and end a HTML table row. In the case of our tutorial_template, all the FixedContent contains is a “<tr>” and a comment. You could of course include more elaborate HTML for a more a more complicated design. 3.4.5. ImageThe Image tag is where you actually specify how a thumbnail should be rendered. There will be one Image tag for each thumbnail you want displayed in a given row. As a result the number of thumbnails that your template will display is fixed. However, because you describe a complete row of thumbnails with the use of multiple ImageRow tags you can have each row render it's thumbnails completely differently making it possible to create some novel designs. The text content of the Image tag contains the HTML that outputs the given thumbnail. Although the size of the thumbnail is specified in the IndexPage tag you can also add a ThumbWidth and ThumbHeight attribute to the Image tag to override the default setting; so you can have each thumbnail sized differently. There are a number of variables available under the Image tag which are not available elsewhere. These are the values the user has entered about this particular photo. These variables include:
There are more variables. See the Template Variable Reference for more information. As you can see in the tutorial_simple example, these variables get substituted for each photo in the album. In the example, there are two Image tags under a single ImageRow. The first photo in the album is applied to the first Image tag. The next photo is applied to the next one and then the process repeats itself. NeoPhoto will automatically create the thumbnails, give them names and provide that in the {ImageThumbFileName} variable. It will also automatically create any detail pages and provide their names in the {ImagePageFileName} variable. As you can see if many of the templates provided with NeoPhoto you can become pretty elaborate with stock graphics and other adornments around each photo. 3.4.5.1. FixedContent under ImageIf you have multiple Image tags in an ImageRow, what happens if you don't have enough photos to fill out a complete row. As you can see in the Tutorial Simple example, there are an odd number of photos. If NeoPhoto reaches the last photo in an album before reaching the end of the current ImageRow it will look for a FixedContent tag under the Image tag and will output that HTML instead of a photo. This allows you to cleanly end your row or possibly put something in place of photos to finish out the row. In the example, we've added a “Made with NeoPhoto” graphic in place of the photo to illustrate this point. Because we named the tag here FixedContent it can be a little confusing. A FixedContent tag under an Image tag has a different meaning than a FixedContent tag under an ImageRow. Remember that the FixedContent under an Image tag is only used when NeoPhoto runs out of photos. The FixedContent tag under an ImageRow tag is always used. 3.4.6. FixedContent under ImageRowSimilar to the way we used the FixedContent tag at the beginning of the ImageRow, we use one at the end of the row to close the table row. Again, in the tutorial_simple file it's a simple “</tr>” along with some comments. 3.4.7. FooterThe <Footer> tag is the last thing present under the IndexPage tag. This works in the same way as the Header tag except that it represents the bottom of the page. In the case of the tutorial_simple example, the footer closes the table spanning all the thumbnails and includes a “DTLink Software” logo and some text.
|
||||||||||||||
