Page 3 of 3 pages « First < 1 2 3
EE Photo Contest
The XML file
Slideshow Pro requires certain elements in the XML file, which are clearly spelled out in its documentation. If you use Monoslideshow, it has its own requirements. Basically, we’re generating the XML file from our weblog entries. One of EE’s nice features is segment variables. Segment variables let you dynamically change aspects of your templates based on what appears in the URL. That’s why we’ve tacked on the year and the month in the URL to the XML file. Now we’re going to use those to pick out which pictures to display.
The code looks like this: (code fragment provided)
So, from this URL:
http://www.nobodyreadsthis.com/photocontest/contest_xml/2007/04
...all we’re doing is telling EE to display entries that are from April 2007. We’re also telling EE to stick the file location in the img source from the ‘extended’ field in our weblog, take the title of the entry (the person’s name) and the description of the photo (in the ‘summary’) field, and make a caption out of it.
The result is an XML file that’s created on the fly, depending on what’s in the URL. In our case for April 2007, the resulting file look like this:
<gallery>
<album title="Nobody Reads This Winning Photos" description="" lgPath="" tnPath="">
<img src="http://nobodyreadsthis.com/contest/2.jpg" caption="Joe Schmo - Winter 2007" tn="/phpthumb/phpThumb.php?src=http://nobodyreadsthis.com/contest/2.jpg&h=25"/>
<img src="http://nobodyreadsthis.com/contest/1.jpg" caption="Jane Doe - Winter Scene" tn="/phpthumb/phpThumb.php?src=http://nobodyreadsthis.com/contest/1.jpg&h=25"/>
<img src="http://nobodyreadsthis.com/contest/princesslily.jpg" caption="Debra Weiss - Princess Lily" tn="/phpthumb/phpThumb.php?src=http://nobodyreadsthis.com/contest/princesslily.jpg&h=25"/>
<img src="http://nobodyreadsthis.com/contest/lily2005.jpg" caption="Debra Weiss - Lily 2005" tn="/phpthumb/phpThumb.php?src=http://nobodyreadsthis.com/contest/lily2005.jpg&h=25"/>
<img src="http://nobodyreadsthis.com/contest/gardenwk1.jpg" caption="Debra Weiss - Garden Week 2006" tn="/phpthumb/phpThumb.php?src=http://nobodyreadsthis.com/contest/gardenwk1.jpg&h=25"/>
<img src="http://nobodyreadsthis.com/contest/Flowers001-sm.jpg" caption="Debra Weiss - Purple flowers" tn="/phpthumb/phpThumb.php?src=http://nobodyreadsthis.com/contest/Flowers001-sm.jpg&h=25"/>
<img src="http://nobodyreadsthis.com/contest/garage.jpg" caption="Debra Weiss - My Garage" tn="/phpthumb/phpThumb.php?src=http://nobodyreadsthis.com/contest/garage.jpg&h=25"/>
</album>
</gallery>
Sweet, huh?
Judging this Month’s Photos
Our photo contest is pretty popular, and as the client’s user base has grown, more and more folks are submitting their photos. We tell them that we’ll only accept four photo submissions per month, and the users are good about that, but each month there’s a lot. I’m writing this article at the end of a month, and right now, there’s over 150 submissions. It would be very inconvenient for my clients to have to open each entry and preview it to see each photo.
So I made them a thumbnail preview. That’s why there are two image fields in the moblog template. Taking another look at that:
The body field has a link to the image. This is used so if the actual entry is previewed, the image will show. We’re not really using it in our application. The extended field has just the name of the image file. That is what we’re using for everything else.
To generate a quick thumbnail preview, I’m using a very handy free application called phpThumb(). It does a lot of things, but mainly it creates thumbnails from images on the fly. It’s fairly easy to install, once you get the paths right, and it works great. Once you see what it can do, you’ll probably use for all sorts of things in your projects. I’m also using it in the xml file template to generate the tiny thumbnail images you see in the navigation area of the slide show.
First, I’ve defined some thumbnail styles in the template, like this:
<style type="text/css">
.thumbnail {
float: left;
width: 200px;
margin: 0 1em 1em 0;
padding: 0;
text-align:left;
}
.thumbnail img {border: solid 1px #666666;}
.thumbnail p {
text-align: left;
margin: 0;
padding: 0;
font-size: 11px;
line-height: 13px;}
</style>
The code in the template that displays the thumbnail, caption, and date submitted looks like this:
{ exp:weblog:entries weblog="{my_weblog}" status="thismonth" show_future_entries="yes"
disable="pagination|categories|member_data|trackbacks" rdf="off" dynamic="off"}
<div class="thumbnail">
<p>{entry_id} - {title} ({entry_date format="%m/%d"})</p>
<a href={extended}><img src="{path=site_index}phpthumb/phpThumb.php?src={extended}&w=160&h=120" alt="{title}" /></a> <p>{summary}</p>
</div>
{/exp:weblog:entries}
Notice how the weblog uses the status of “thismonth” to display just the entries that have been submitted for the current month.
When the client is ready, they delete the entries they don’t want. They change the status of the winners from “thismonth” to “open”, and they’re good to go.
We also archive the contests by month, which you can probably figure out. To make it even more spiffy, we also display by individual winner as well, so every winner has their own individual mini-gallery. That uses a custom SQL query with some fancy joins in it. I really wish I could show it you, but as mentioned previously, it was developed for a members-only portion of the site.
Permanent Link Filed under: Expression Engine
Page 3 of 3 pages « First < 1 2 3
Next entry: The Industrial Cottage
Previous entry: CSS Color Charts