Dynamic Site Design: Displaying Thumbnails with a Random Background


Published on May 17, 2005 at 6:51 PM EST
In the Tutorials category.

While we often talk about “dynamic” sites and site designs, let’s face it, they’re all rather static: the same basic templates are used with different content. “Fluid” designs allow for some variation, but most use the same computer to view every site, so they won’t see the “fluidity” (if that’s a word). For the most part, that’s a fine thing—a connected, familiar view of every page makes your site more comfortable and easier to use.

I wanted to overcome some of the static-ness of most site designs with Scrapbook. Photos and photo galleries are a popular thing on danandsherree.com, so they were an obvious choice to help liven things up.

Photo thumbnails and photo gallery thumbnails all have a nice background to them to help separate them from the rest of the content. In the previous site design, it was a slide mount and colored box that set them off. In Scrapbook, it’s a leather photo frame and “wood” scrapbook paper. They’re not quite that simple, though: there are actually three leather photo frames, each a different color (brown, yellow-green and red); similarly, there are three “wood” papers (red, yellow and green). Visit danandsherree.com to see them in action.

The idea is simple: the backgrounds aren’t so different as to make each page feel different, but they’re different enough to make each page feel fresh. Each page you visit and each time you visit will show you a slightly changed result. My hope is that that little bit of added flavor might help people enjoy our site more and come back more often.

How To

A little PHP and CSS are all that is needed to make this work. Using PHP’s rand function, a random number can be generated and attached to the CSS class name. In the stylesheet, reference multiple definitions.

Right-hand Thumbnails

The HTML and PHP that make this work:

<div class="right"><div class="thumbnail<?php echo rand(1, 3); ?>">Uploaded Image HTML Goes Here</div></div>

The PHP has been bolded. rand(1, 3); will select a random number between one and three, inclusive. Change this to a larger range to have more than three options. This will generate something like ...class="thumbnail3"..., which gets looked up in the stylesheet, whose definition is below:

.right {    margin: 0px 0px 15px 15px;
   padding : 0;
   float : right;
   clear : right;
   width : 170px; }

.thumbnail1 {
   margin : 0;
   padding : 0;
   display : table-cell;
   background : url(/thumbnailbackground1.jpg) no-repeat;
   text-align : center;
   font-size: 145px;
   vertical-align : middle;
   width : 170px;
   height : 166px; }

.thumbnail2 {
   margin : 0;
   padding : 0;
   display : table-cell;
   background : url(/thumbnailbackground2.jpg) no-repeat;
   text-align : center;
   font-size: 145px;
   vertical-align : middle;
   width : 170px;
   height : 166px; }

.thumbnail3 {
   margin : 0;
   padding : 0;
   display : table-cell;
   background : url(/thumbnailbackground3.jpg) no-repeat;
   text-align : center;
   font-size: 145px;
   vertical-align : middle;
   width : 170px;
   height : 166px; }

I’ve bolded two important spots: the class name and the background file name, both of which needs to vary if you change the number of background options. And of course, the file name needs to point to a real file.

Photo Galleries

This is largely similar to the above, though specific to photo galleries.

<div class="gallerycontainer<?php echo rand(1, 3); ?>">
<span class="align"><span class="gallerythumbnail">Uploaded Image HTML Goes Here</span></span>
<span class="align"><span class="gallerythumbnail">Uploaded Image HTML Goes Here</span></span>
</div>

As many <span class="align"><span class="gallerythumbnail">Uploaded Image HTML Goes Here</span></span> lines can be added as you like. The CSS:

.gallerycontainer1 {
   text-align : center;
   background: url(/gallerycontainerbackground1.jpg) repeat #d3a556;
   border : 1px solid #342a1f;
   margin : 20px 0;
   padding : 15px 15px 15px 15px; }

.gallerycontainer2 {
   text-align : center;
   background: url(/gallerycontainerbackground2.jpg) repeat #d3a556;
   border : 1px solid #342a1f;
   margin : 20px 0;
   padding : 15px 15px 15px 15px; }

.gallerycontainer3 {
   text-align : center;
   background: url(/gallerycontainerbackground3.jpg) repeat #d3a556;
   border : 1px solid #342a1f;
   margin : 20px 0;
   padding : 15px 15px 15px 15px; }

.gallerycontainer .align {
   text-align : center;
   margin : 10px 5px 10px 5px;
   padding : 5px;
   width : 130px; }

.gallerycontainer .align .gallerythumbnail {
   display : table-cell;
   vertical-align : middle;
   height : 130px;
   width : 130px;
   font-size: 145px;
   margin : 0;
   padding : 0;
   text-align : center; }

The Bad Way

If you’ve got an idea for how you’d like to use this sort of thing, but changing past entries’ HTML is daunting, you could always serve up the stylesheet with the PHP in it. First, append a “.php” extension to your stylsheet. At the top of the stylesheet add:

<?php header("Content-type: text/css"); ?>

Then add the PHP to the style definition (bolded below):

.thumbnail {
   margin : 0;
   padding : 0;
   display : table-cell;
   background : url(/thumbnailbackground<?php echo rand(1, 3); ?>.jpg) no-repeat;
   text-align : center;
   font-size: 145px;
   vertical-align : middle;
   width : 170px;
   height : 166px; }

The big problem with this approach is that your stylesheet is different each time it’s served up, negating the benefit of caching. Perhaps not a big deal to some, but every little bit of bandwidth savings counts, right?