Template Dev - A look at "The Daily Photo"
There has been some interest about how Glen created TDP template, so I thought I would dissect it a bit. Please note I do not have access to the actual template, so this is just a method to make it happen. BTW, Widescreen is the base template for this look.
The first thing you notice about TDP is the thumbnails stacking up with no text. And the thumbs are all the same size - except the first one. Here is how it's done using the "widescreen" template as a base:
YOU MIGHT WANT TO MAKE A DUPLICATE OF WIDESCREEN BEFORE YOU GET TOO CRAZY.
-Open index.tpl and blog_item.tpl for the widescreen template.
-For index.tpl this is all you need:
{include file="preamble.tpl"}
<html>
<head>
{include file="html_head.tpl"}
</head>
<body>
<div id="content">
{include file="header.tpl"}
<div id="main">
<div id="hello">
{text name="home_page" default="Welcome to $site_name"}
</div>
{section name=item loop=$items}
{include file="img_item.tpl" page=$items[item]}
{/section}
</div><!-- id="main" -->
{include file="menu.tpl"}
{include file="footer.tpl"}
</div><!-- id="content" -->
</body>
</html>
This was mostly just a big deletion as we are simplifying the look. The part to pay attention to is the change to the included file to img_item.tpl, which we will create next. Goto blog_item.tpl and save a copy as img_item.tpl. We will leave blog_item alone as other places in the site may need to use it as is. So let's edit our new img_item.tpl to look like this:
{if $page.num_images}
<div class="index_images">
{section name=i loop=$page.associated_files max=1}
{if $page.associated_files[i].file_mime_type eq "image"}
{if $smarty.section.item.index==0}
<a href="{$page.url}" title="This page has image attachment(s)"><img src="{thumbnail file=$page.associated_files[i].file_path type=$page.associated_files[i].file_type maxw=300 maxh=300 center=1}" alt="" /></a>
{else}
<a href="{$page.url}" title="This page has image attachment(s)"><img src="{thumbnail file=$page.associated_files[i].file_path type=$page.associated_files[i].file_type maxw=98 maxh=98 center=1}" alt="" /></a>
{/if}
{/if}
{/section}
</div>
{/if}
Again, this is mostly a deletion from the original with a few tweaks. Any page without an image is completely ignored; we check to see if it's the first interation through the loop using $smarty.section.item.index==0 ( http://smarty.php.net/manual/en/language.function.section.php ); and then we set are thumbs up to display properly using the thumbnail function ( http://siteframe.org/p/thumbnail_smarty_extension_function ).
That will get you the thumbs and now all you have to do is stack them up. The easiest way to do this is using the css float property. If you notice, I changed the css class to index_images in the above code. All you need to do is open ws.css and look for .blog_images. Copy/Paste that line and change blog to index and delete the "clear:left;" property in your new line. Save the file and you should be able to refresh your browser and see "The Daily Photo" look.
Enjoy, Coby
File Attachments
| Download | Info | Size (bytes) | Downloaded | Created |
|---|---|---|---|---|
| TDP.zip | More Info | 4,961 | 35 | March 5, 2007 13:14 |
I added a zip archive of the three files as cutting and pasting the above code could get ugly.
C
Thanks very much it works now.
Dwayne
http://www.fiftyonepointfour.com/index.php
Cool