O'Reilly logo

Painting the Web by Shelley Powers

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 4. The Web As Frame

Once your picture is just right, it’s time to put it into a page and let it shine. Editing a photo is only half the fun when it comes to publishing photos on the Web. The other part is the presentation, and just as with the tools and technologies associated with photo editing, you have a lot of options for how you can display your photos.

If a photo is meant for story illustration, you can embed it directly into the text, and we’ll look at clean approaches to do this. However, you can also add a photo “filmstrip” at the bottom of the story, or to the side—even a link to a slideshow.

Speaking of slideshows, some of the same tools you use to edit the photo can also be used to generate either HTML or Flash slideshows; or you can use any number of freely available slideshow packages that are, more or less, drop and play. The functionality can also be implemented using JavaScript for a more modern “Ajaxy” feel.

Rather than a slideshow, you can also publish your photos in a more formal gallery. Again, some photo editors and workflow tools can generate galleries, or you can use server-side software that manages the gallery functionality for you. You can even embed a small piece of code into your web page and have it alter the photo that’s displayed as part of a header, background, or sidebar item each time a person accesses a page.

Regardless of how you publish your photos online, one issue related to all the techniques is how large your published photo should be, which is indirectly related to the topic of thumbnails. Thumbnails are more than just miniaturizations of the larger photo—they can invite exploration or even provide their own unique presentation and statement.

The Art of Thumbnail Sizing

I would estimate that more than 90% of the thumbnails for photos online are generated automatically from whatever software is used to publish the photo online. The software does a good job, and the thumbnail looks OK, but we’re not giving thumbnails the respect they deserve when we let the applications handle their creation.

A thumbnail is usually just a smaller, perhaps more optimized, version of a larger, better quality picture that is linked to the thumbnail. It’s a way to provide a sample of the larger picture without burdening the person with big photos that may take longer to download, or that may take up too much page real estate.

Thumbnails, though, can provide a whole new way of looking at the photo, and even a way to create something new, interesting, and completely different from just the photo itself.

Consider another area of life where size matters: food and the presentation of such. Nothing better than sitting down to a turkey the size of a small bus or a big plate of lasagna (or a pot roast with golden roasted potatoes!), but I don’t think there are any of us who don’t appreciate the samplings of food we get at parties: pretty crackers with slivers of salmon or bite-sized hot mushroom tarts passed as hors d’oeuvres. There are restaurants that serve meals that are nothing more than a series of courses with smaller servings, one right after another, that mix taste and presentation. Between courses, wait persons pass out whatever the chef has created for amuse-bouche that day: tiny creations that explode the myth that food tastes the same no matter the dimensions. As Melissa Clark wrote in “Tiny Come-Ons, Plain and Fancy” for the New York Times in 2006, “The fact is that as long as it’s small, tasty, and pleasing to the eye, almost anything can make an amuse-bouche.”

The same concepts can be applied to photography, with thumbnails as the tasty tidbit, the hors d’oeuvre, the amuse-bouche that enlivens the page.

Tip

The examples in this chapter use Photoshop CS3 or GIMP, but all the effects can be re-created using the desktop photo editors reviewed in Chapter 3. Whenever necessary, instructions are provided that show you how to manually create an effect.

Resizing, Resampling, and Retargeting

There is no area where the differences between a photo for the Web and one for printing are more apparent than that of photo resizing.

Photos published to the Web have one constraint on their size: the pixel dimensions. Printing, on the other hand, is heavily dependent on the resolution of the photo, because unlike monitors, TVs, and the like, printers can resize the pixels, and the higher the resolution, the better the print.

If you look at something like Photoshop’s Image Size dialog, the top part has the pixel size, which is what we’re interested in for web publication. The middle part, labeled as “Document,” only matters to printing. The last part of the dialog, which has to do with constraining dimensions and resampling, affects both.

The Scale Styles setting is of interest if you’ve added layer styling, such as a drop shadow. Constrain Proportions, which is most likely replicated with other tools, allows you to set a new width or height and have the other dimension resize accordingly. Or not, if you want to adjust the image only on one dimension.

The last option, again supported in most photo and graphics applications, is resampling. Resampling uses an algorithm to interpolate between the image’s current size and the size you want it to be. Some applications support one algorithm; others, including Photoshop, support several and allow you to pick the one you prefer. Most photo editors support the Bicubic algorithm because it provides the smoothest gradients. Other algorithms work better for hard-edged graphics, such as illustrations. You might want to spend some time exploring the resampling algorithms supported by your photo editor, to understand what works the best for you.

Tip

Resampling is used when sizing a photo for the Web, but it should be turned off for printing.

Applications that work in batch to create thumbnails should use resampling. Some may even allow you to specify the algorithm. ImageMagick, which I cover later in this book, uses different methods based on the format of the file and whether the image is being increased or decreased.

Regardless of resampling algorithm, you don’t want to “resize” your image by specifying smaller dimensions in the img tag in the web page, or use CSS to constrain image sizes. One reason is that you’re not saving bandwidth, because the file sizes are the same. The other reason is that browsers do a lousy job of resizing photos. Plus, it takes longer for the image to display. Which leads us to the next issue: what size image?

iSizing

There is no right size for a published photo. The size of your pictures is determined by the tools you use, your web page layout, what you know of the people who visit your site and their connection type (and patience level), and the average monitor resolutions.

Years ago, we designed for pages 640 pixels or less. Nowadays that wouldn’t hold the average photo. Today’s conservative standard is to assume people are viewing your pages with 800x600 resolution. However, according to statistics at the W3 Schools (http://www.w3schools.com), 54% view pages with monitors set at 1,024 x 768, 26% at higher resolutions, 14% at 800x600, and 6% unknown. Of course, these statistics are based on the W3 School’s visitor statistics—other sites may vary.

Regardless of what size layout you use for you web pages, you can use smaller images, or thumbnails, in your web pages, and then provide larger images for people capable of (and interested in) viewing them.

The thumbnail size can vary based of whether it’s “standalone” or embedded into text. For my own sites, I use thumbnails ranging in size from 400 pixels to 600 pixels when the image doesn’t have text wrapped around it. For photos embedded into text, I use thumbnails as small as 50 pixels. The size is dependent on how the thumbnail is being used and its subject.

Mobile Sizing

These sizes I mentioned in the last section should work with most computer monitors, but what about people accessing the pages, and images, with cell phones or other small handheld devices? In the section “Adobe Photoshop CS3,” in Chapter 3, I demonstrated what a photo can look like on a cell phone, and the result wasn’t very pretty. The average viewscreen for a mobile device is about 120 pixels wide. That’s not a lot of space.

I’ve always admired people who can surf the Web on a device not much bigger than a dieter’s chocolate bar, so much so that I create mobile stylesheets for all my sites. A mobile stylesheet is CSS that’s linked in such a way that it’s loaded only if the site is accessed by a mobile device. The link looks similar to the following:

<link rel="stylesheet" href="http://burningbird.net/wp/mobile.css" type="text/css"
media="handheld" />

In the stylesheet, I eliminate the problem of image sizes on mobile devices with the following CSS:

img { display: none }

For most of my sites, I just turn off image display for mobile devices, and then provide clean and simple access to my writing. This approach also helps conserve the device user’s bandwidth, which can be quite limited.

In the last section, I mentioned not using CSS to size a photo. However, when dealing with mobiles, especially when embedding thumbnails into a page, resizing the image within a mobile stylesheet is an option. To manage varying sizes of thumbnails, the following just ensures the image is never wider than 50 pixels:

img { max-width: 50px }

The max-width attribute sets the maximum width of the image, and doesn’t affect the size if the width is smaller than the amount specified. Most browsers, other than Internet Explorer 6.x, support max-width, and that includes many mobile devices. Or, you could just specify a fixed width, like the following:

img { width: 50px }

This doesn’t eliminate the bandwidth issues, and using CSS to resize an image is not the best way to display your photos, but it will do for most handhelds. To test what the page looks like, I use the mobile device emulation built into the Opera browser to view the page in my laptop, as shown in Figure 4-1.

Viewing web pages using mobile CSS and Opera’s mobile device emulation
Figure 4-1. Viewing web pages using mobile CSS and Opera’s mobile device emulation

The Opera emulator provides an option to turn images on or off, but this option doesn’t impact the page in the figure, as my own CSS controls the image display.

Another approach is to use JavaScript to resize the images, but this is problematic on handheld devices. An advantage to using a script is that you can test the window dimensions and determine whether the page is accessed by a mobile or other small device. Again, though, this puts a scripting dependency on your site just for displaying images that may or may not display all that well on the device in the first place. In addition, many mobile devices don’t support scripting when accessing web pages.

Instead of modifying the page or images using client-side script, you can also query for the user agent in your server-side application and use code to redirect image requests to mobile-sized images. However, not all mobile phones provide the correct user agent.

To make graphics on mobile devices even more challenging, Apple’s new iPhone and Touch iPods with Internet access don’t follow the same conventions as mobile devices and won’t use a mobile stylesheet. The only setting that Apple supports in its devices is the size of the content area viewpoint, discarding spacing within the page:

<meta name="viewport" content="width=800" />

What the iPhone and Touch iPod do is shrink the page down, so it fits the display. To expand the material, the person uses a “pinching” motion or a built-in touch keyboard. To see what a page would look like in iPhone, a company called Marketcircle created an emulator called iPhoney that can display a page vertically or horizontally, just like in the device, as shown in Figure 4-2. The only difference is the emulator doesn’t have touch control.

Web page with photograph displayed in the iPhoney emulator
Figure 4-2. Web page with photograph displayed in the iPhoney emulator

Tip

iPhoney is available at http://www.marketcircle.com/iphoney/.

Which leads us to our last "sizing” issue, one based on very new technology that will potentially have an impact on images served through the browser in the future.

Seam Carving

At the same time I was writing this book, the world of photography was all agog about a new algorithm for resizing photos that was making the rounds of the web sites. Called “seam carving” and invented by Dr. Ariel Shamir and Shai Avidan at the Efi Arazi School of Computer Science in Israel, this algorithm would examine a photo for vertical and horizontal paths through the photo that have the least “energy,” and could then target these areas for either removal (for shrinkage) or expansion (for enlarging) without an overall negative effect on the photo.

Tip

A video demonstration can be found at http://www.faculty.idc.ac.il/arik/IMRet-All.mov, and the paper on the process can be downloaded at http://www.faculty.idc.ac.il/arik/imret.pdf.

It’s a fascinating algorithm with interesting results, but most photographers had kittens when viewing it, especially when people began to shout out requests for this technology as browser extensions.

When we create a photograph, there is a reason for all that seemingly nonenergetic space within the photo. A field of white may seem to be extraneous material to the algorithm, but is an integral expanse of crystal white snow to the photographer. The algorithm creators used the text in a web page as an analogy of re-targeting, as they called their concept. In web pages, unless a column is a fixed size, as the page changes to a smaller size, the words wrap and are pushed down the page. Why not have the photos resize like the text?

The thing is, resizing a web page and causing the words to wrap doesn’t impact the message of the text or result in dropped conjunctives—in other words, it doesn’t say, hey, let’s drop every other “and.”

The Creative Art of Thumbnails

Most photo thumbnails are miniature versions of the parent photo, meant to be small enough to provide a low-bandwidth, space-friendly version of the picture that also piques enough interest for the user to click through to the larger image. Any of the applications that generate galleries (covered later in this chapter) create thumbnails just like this. For the most part, the result is satisfactory.

Still, for those times when you’re embedding a photo into a web page or manually creating your own specialized gallery page, you might want to branch out and try something new.

Adding Drop Shadows

Rather than just create a plain, flat thumbnail, you might consider adding a shadow behind the image, to make the image pop out of the page. Most photo editors provide either plug-ins, specialized routines, or layer effects to create a shadow effect.

Photoshop provides layer styles that can create a beveled look, drop shadow, or other effect directed on the layer edges. It’s quite simple to use, too. The first step is to convert your background image to a layer, if you haven’t already done so. Double-clicking on the background in the Layers window and accepting the default name will do the trick. The next step is to increase the canvas size to make room for the drop shadow, the term for these shadows. The dialog to adjust the canvas can be accessed through the Image menu. The last step is to open the Layer Style dialog and select Drop Shadow or another effect.

In the Drop Shadow option window (Figure 4-3), adjust the angle representing the light source and the offset value (how much the shadow is “pushed” horizontally or vertically), as well as shadow color, opacity, and width. If your thumbnail is small, you’ll want to keep your shadow small. In addition, if you plan on displaying several thumbnails in one web page, make sure the settings are the same for each for consistency.

Photoshop’s Drop Shadow option
Figure 4-3. Photoshop’s Drop Shadow option

Once finished, you could save the image as a PNG, which would preserve the transparency of the shadow. The problem with this is that IE 6.x does not respect alpha channels, and the image is going to look quite bad in this browser. If you have IE 6.x users (and 21% of my sites’ viewers are still using IE 6.0), you’ll probably want to flatten the image and then save it as a JPEG.

Thumbnail created in Photoshop using the Drop Shadow Layer Style
Figure 4-4. Thumbnail created in Photoshop using the Drop Shadow Layer Style

To recap the steps:

  1. Convert the background to a layer.

  2. Resize the canvas to allow for drop shadow.

  3. Pick the Drop Shadow option from the Layer Styles.

  4. Adjust the shadow.

  5. Flatten the photo to save as JPEG.

Instead of layer modification, GIMP provides a Script-Fu process, shown in Figure 4-5, to generate a drop shadow on an image. You also don’t need to provide canvas space; the tool automatically sizes the canvas.

GIMP Script-Fu Drop Shadow process
Figure 4-5. GIMP Script-Fu Drop Shadow process

GIMP’s drop shadow process differs from Photoshop’s in that there is no light source angle. Instead, you provide an X and Y offset value. Positive values put the shadow to the right, and negative values to the left.

Other applications either have built-in drop shadow support or can emulate it using well-published steps. Just search on the name of your tool and “drop shadow.” You can also create your own drop shadow.

To create a home-baked drop shadow in a tool that supports layers (and we’re all using tools that support layers), increase the size of the underlying canvas in order to have enough room for the shadow. Next, create a second transparent layer and add a rectangle the same size as the thumbnail. Fill it with the same color as your shadow, usually black.

Move the rectangle so that it matches the shadow location. A good place to start is 8 pixels below the thumbnail and 8 pixels to the right. Then, using the appropriate filter or effects setting in your editor, add a Gaussian Blur to the shape. Start with a blur setting of 15 and experiment from there until satisfied. Once you’re finished, you have a shadow as good, or better, than the packaged products. Figure 4-6 shows the bird thumbnail with a shadow created by Script-Fu and a shadow created using the steps I just outlined.

Comparison of an automatically generated shadow and one created manually
Figure 4-6. Comparison of an automatically generated shadow and one created manually

To recap these steps:

  1. Increase the size of the underlying canvas to hold the shadow.

  2. Add a new transparent layer.

  3. Create a rectangle the same size as the thumbnail.

  4. Fill this rectangle with the color of the shadow (usually black).

  5. Offset the shadow by moving it down or up or to the right or left, depending on where you want to place the shadow effect.

  6. Apply a Gaussian Blur to the shadow layer.

  7. Switch layer locations so the shadow is under the thumbnail.

Cut-Out Thumbnails

Rather than the typical rectangle, you might want to consider variations on the shape by using a cut-out thumbnail. In this type of thumbnail, rather than use the whole photo, you use a piece of it. The number of shapes you can use to create the cut-out are as varied as the leaves in the forest, but I’ll look at two: ovals and slices.

Oval thumbnails seem to work nicely with the right subject. They don’t work whenever the photo corners are important, because corners can’t be captured with an oval. They are good, though, for a surprising number of subjects, including industrial photos, critter pictures, people, and flowers.

An oval thumbnail is simple to create—just cut out the shape. Unlike the rectangles, though, I’ve found that ovals work better with something to define a three-dimensional effect. A shadow works, but a bevel can work better. Another approach is a smooth, flat bubble effect, especially with industrial photos.

Figure 4-7 shows several thumbnails of birds, each cut into an oval and each given a beveled edge and drop shadow. With Photoshop, this is simple: just convert the background to a layer, select the oval (using fixed size to ensure the oval is the same for each thumbnail), invert the selection, and delete the background. Once the oval is cut out, then access Layer → Style, and select Drop Shadow, and Bevel and Emboss. This gives the images a nice three-dimensional feel without obscuring the image.

Set of thumbnails cut into ovals and styled
Figure 4-7. Set of thumbnails cut into ovals and styled

To recap the steps:

  1. Convert the image background to a layer.

  2. Using an elliptical selection (set to a fixed size to ensure that the oval is the same for all pictures), drag the selection using your keyboard, or mouse over the photo until positioned correctly.

  3. Invert the selection, using Select → Inverse.

  4. Delete the selection using the Delete key, or Edit → Cut.

  5. Access Layer → Blending Options and select both Drop Shadow and Bevel and Emboss.

  6. Adjust the settings for both until the thumbnail is styled as you like, and then duplicate the steps and style settings for all other grouped thumbnails.

  7. Trim the excess background using Image → Trim and accept the defaults.

  8. Save as PNG to preserve transparency, or flatten for JPEGs, setting the background color to the same color as your web page.

Once the thumbnails are cut, they can be embedded into a web page using the same technique given for a rectangle thumbnail. The rectangle enclosing the oval is no different than a rectangle enclosing a regular thumbnail. Later in this chapter, I’ll demonstrate how these can be added to a web page for a manual gallery page. Figure 4-8 shows an example of a layout with the thumbnails to the left and the opened image to the right.

Oval thumbnails and displayed photo
Figure 4-8. Oval thumbnails and displayed photo

Figure 4-8 demonstrates another aspect of thumbnail cutouts: what part of the original photo to capture in the thumbnail?

In the bottom row of the thumbnails, all the way to the left, is an odd-looking bird head with feathered tufts coming out. This bird actually isn’t the primary bird in this photo, as shown in Figure 4-9. However, the fluffed head is eye catching, as well as curiosity inspiring—a better choice than the “real” subject of the photo.

Choosing a photo component to center in the cutout for a thumbnail
Figure 4-9. Choosing a photo component to center in the cutout for a thumbnail

The best choice for a cutout thumbnail isn’t always the main subject, or even the photo’s center. A thumbnail should not only represent the original photo; it should form a creative statement in itself, and should also make the person want to click through on the image.

A cutout thumbnail is especially helpful if your photo doesn’t make a good thumbnail by itself because the detail gets lost in the smaller size. Rather than shrink the entire photo, just cut out a portion that makes a good representation and use that. You can even use rectangles rather than ovals. But then, you can use triangles, polygons, puzzle piece or garden tool outlines, and so on.

Another thumbnail type is a slice—taking a stripe, either vertically or horizontally, from the photo. The slice can be any width and taken from any part of the photo. This type of thumbnail is easier to lay out in the page because they’re usually aligned either in one column or one row, depending on the orientation of the images. The thumbnails also work best if the thumbnail is identifiable from the slice, and if the thumbnails in a group complement one another. Figure 4-10 shows five thumbnails, all from floral photos, each given a 90-degree (straight up and down) drop shadow.

Slice thumbnails from five floral photos
Figure 4-10. Slice thumbnails from five floral photos

Expanding Thumbnails

The simplest thumbnail is linked using a hypertext link to the larger photo. Clicking the link opens the photo in a separate page. Simple, quick, and works regardless of the device or whether the person accessing the page is using a mouse or keyboard. For gallery presentations (we’ll look at gallery software later), this isn’t a bad approach.

It’s also the best approach for linking directly to any of the expanded images. Here’s a sample line of HTML for a hypertext link:

<a href="bigger.jpg"><img src="smallerimg.jpg" alt="smaller image" /></a>

However, it’s irritating to have a new page open when you click a thumbnail that’s embedded into a story, forcing you to return to the previous page once you’ve looked at the image. A workaround is to open the photo in a separate browser page or tab using the anchor element’s target attribute. The following example uses this attribute:

<a href="bigger.jpg" target="separatewindow"><img src="smallerimg.jpg" alt="Smaller
image" /></a>

Again, though, you then have to switch between browser windows or tabs in order to enjoy both the photo and whatever else is associated with it. Another issue with using the target attribute is that it’s not valid in XHTML. To work around the validation problem, JavaScript can be used to add a target attribute for each anchor so that the XHTML validates. Which means having to parse the page, find the anchors, ensure that scripting is turned on…OK, so it’s not the best approach to take.

My favorite solution, and the one I use with all my sites, is to provide a hypertext link for a separate page if a person accesses my site without JavaScript enabled in his browser, or if he’s not using a mouse. For everyone else, though, I use a JavaScript library to open the image directly in the page. I have my own software to manage this in-page display, the code for which I’ll cover later in this book. However, there are excellent libraries that do the task for us, and are as easy as adding a few lines of script to a page’s header.

One application is Lightbox2, created by Lokesh Dhaker. Everything required to use the application can be found in the download folders. To use it, upload the folders and add the following four lines to the HEAD section of the web page:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

The application does make use of both the Prototype and Scriptaculous JavaScript libraries and if you’re using either of these, or your own, you’ll want to test for compatibility. Once the script is added, to enable the thumbnail-expanding functionality to any image, add the rel="lightbox" attribute to the anchor tag surrounding the img element, with an optional title="Some title" to provide a photo title:

<a href="heronsmall.jpg" rel="lightbox" title="Heron"><img src="herontiny.jpg"
style="border: none; float: left; margin: 0 5px 5px 0"/></a>

Clicking on the image overlays the page with a semi-opaque layer and expands the photo, as shown in Figure 4-11.

Thumbnail expanded using Lightbox2
Figure 4-11. Thumbnail expanded using Lightbox2

Lightbox2 isn’t the only thumbnail expansion software. Others, such as Highslide, provide a nice animated effect when opening the photo, as well as some photo scrolling capability. Searching on “JavaScript thumbnail” brings up dozens more.

Tip

Lightbox2 is accessible at http://www.huddletogether.com/projects/lightbox2/. Highslide is free for non-commercial sites, and is available at http://vikjavev.no/highslide/.

The effects that can be used for thumbnails can also be used for photos embedded into text or other content. In fact, the presentation of a photo can add as much meaningful context as the subject of the photo.

Embedding Photos: Condiment and Spice

Ever notice in magazines and newspaper articles that the editors will insert photos and other graphics, either of the subject or of something that complements the subject in some way? Using visual elements to accentuate text is a long established procedure, and is not just used to provide visual aids in how-tos or tutorials.

Photos accompanying news or stories of events set context, and also help frame the event in the user’s mind. We are creatures who wrote with pictures at one time before we developed abstract languages and alphabets; we’ve not lost that need for visual reaffirmation of a story.

In other types of written works, the use of graphics draws the eye, can break up long passages of writing, and serves as a subtle accent to the core offering—like how the good use of spice makes all the difference between a good recipe and a really great one. Even the madly popular Harry Potter books had illustrations at the beginning of each chapter that helped frame the characters in our minds.

Prep

Adding a photo to a piece of writing is as simple as using an img element within the writing. A CSS style setting informs the browser how the image exists relative to the text, and adding an informative alt attribute ensures that those who visualize with senses other than sight have a chance to participate.

An img element is not a block element. In Figure 4-12, the text follows immediately after the image.

Inserting an image into a paragraph using default styling
Figure 4-12. Inserting an image into a paragraph using default styling

To align the image with all of the text, we use CSS to “float” the element, either to the left or right, causing the text to flow around the object. If we float the image to the right, the text following the image flows to the left of the image; floating the image to the left forces the text to float to the right of the image. To show how this works, the following img tag with associated style setting is embedded directly into the document before the paragraph element containing the text:

<img src="heronsmall.jpg" alt="black and white photo of heron" style="float: left" />
<p>
<!-- paragraph text -->
</p>

This setting uses the default spacing for the img element. To add additional spacing, a margin is given around the object. Start with a 5-pixel margin, to the right and bottom, and then adjust accordingly:

<img src="heronsmall.jpg" alt="black and white photo of heron" style="float: left;
margin: 0 5px 5px" />

With a right float, use a margin set to 0 for the left and top, and 5 pixels to the right and bottom. Of course, we want to avoid using style settings as much as possible in elements, in order to make it simpler to modify in the future. What we can do is define left and right float classes in a stylesheet and then use these accordingly:

img.right
{
    float: right;
    margin: 0 0 5px 5px;
}
img.left
{
     float: left;
     margin: 0 5px 5px 0;
}

Figure 4-13 shows the same image styled with the float left setting.

Tip

The figures in this section use the famous Lorem Ipsum, beloved text of layout designers and web page creators like you and me. I use the Lorem Ipsum generator available athttp://www.lipsum.com/ for all my layout testing, as well as for book examples such as the one in this chapter.

Page excerpt with the same image embedded using float left setting
Figure 4-13. Page excerpt with the same image embedded using float left setting

By using CSS classes, we can alter the settings universally. This is handy if we set other attributes such as the border, background, and padding. We’ll get into these and other CSS attributes in Chapter 9.

Of course, we don’t have to embed images directly into text and instead can choose to use images about the same width as the paragraphs and forgo the float. Even using this approach, we can be creative with what we do with the image presentation in order to enhance the image’s effect. I’ll get into that in the next section, but first, there’s another technique we can use that mixes embedded images with breaks and the use of CSS floating.

Float a Row of Images

The one thing that irritates me about tools that generate photo galleries and slideshows is that they almost invariably use HTML tables in order to control the layout of the thumbnails or images. Why is the use of HTML tables such a pain? After all, tables are great for providing equal spacing that can adjust to the page size.

HTML tables are meant to display tabular data, such as data pulled in from a database. Screen readers treat the tables this way, as do many web robots that scan pages for content for search engines or other uses. It’s semantically incorrect to use an HTML table for photo galleries, because automated processes accessing the page make an assumption that there’s some meaningful reason behind grouping the data in the table. Meaningful in some way other than that it’s an easy layout technique.

The use of an HTML table isn’t necessary, either. The same technique we use to embed an image into a text block can be used to “align” images relative to each other. In Example 4-1, three small images are embedded into the test document, aligned one right after the other horizontally. The three images are contained within a div element to facilitate controlling the block of images within the main text body.

Example 4-1. Three images aligned horizontally using CSS
<div>
<img src="herontiny.jpg" alt="black and white heron" style="float: left; margin: 5px 10px"
/>
<img src="tinyduck.png" alt="male wood duck" style="float: left; margin: 5px 10px" />
<img src="tinycardinal.png" alt="curious male cardinal" style="margin: 5px 10px" />
<br style="clear:both" />
</div>

Notice that the images are all aligned to the left. The inline style settings used float each image to the left, pushing the rest of the content that follows to the right. The cardinal is now to the right of the wood duck photo, which is, in turn, to the right of the heron, though the order they’re loaded into the page is opposite from the direction in which they appear.

Following the row is a break element, br, with a style setting of "clear:both". The clear property prohibits floating elements to the left or right based on the setting: left, right, both, or none (which is the default). This forces the content to move down to accommodate the images that have been floated. Since a float takes an element out of the natural page flow, if I didn’t use the clear property, the rows of images would impact adversely on the HTML elements following the images. Now, the float is literally “cleared” before the next content item.

Rows of images can be made using this technique. To repeat the row just given, but this time putting the cardinal in the middle and switching the heron and wood duck, I would use the following, as shown in Figure 4-14:

<div>
<img src="herontiny.jpg" alt="black and white heron" style="float: left; margin: 5px
10px" />
<img src="tinyduck.png" alt="male wood duck" style="float: left; margin: 5px 10px" />
<img src="tinycardinal.png" alt="curious male cardinal" style="margin: 5px 10px" />
<br style="clear:both" />

<img src="tinyduck.png" alt="male wood duck" style="float: left; margin: 5px 10px" />
<img src="tinycardinal.png" alt="curious male cardinal" style="float: left; margin:
5px 10px" />
<img src="herontiny.jpg" alt="black and white heron" style=" margin: 5px 10px" />
<br style="clear:both" />
</div>

The key to using CSS to style rows of images is to use a container to set the overall width of the rows and using the float: left to flow images to the left. The row is followed by a br element using the clear property; otherwise, the rows will end up overlaying one another because there’s nothing to “push” the content down the page.

I don’t use float:right, because floating will push the image all the way over to the left or right, as far as possible. If the images don’t fill the space, there will be a gap between the last non-floated image and the margin.

I use CSS with thumbnails, but also with graphics that I want to use as a visual break in a long block of text. This is in addition to other presentation effects that I add to the images while I’m creating them, detailed next.

Plating Photos

What’s the difference between eating in and eating out, other than someone else does the cooking and clean up? One major difference is how the food is served. Even the simplest restaurant will add some garnish, such as an orange slice or parsley, to a dish. The fancier restaurants can take food presentation to an art form, a process known as plating. They don’t do this to be froufrou or in order to charge you an additional 20 bucks. They do so for practical reasons: to heat plates for hot food or cool them for cold; to keep foods that should be separate apart; to add flavor in a controlled manner, such as placing raspberry sauce under a slice of fudge cake.

Layout with two rows of photos, with spacing and layout controlled by CSS
Figure 4-14. Layout with two rows of photos, with spacing and layout controlled by CSS

For the most part, though, the reason that good cooks plate their presentations is to enhance the experience—to ensure that the diner experiences the food with as many senses as possible.

This process of plating can also be applied to photographs. Too often we put a photo into a page and other than a border or drop shadow, we ignore everything else about it and around it. Adding a photo into a story is an opportunity to not only embellish the story, but also to indulge your creativity when preparing the photo.

Thanks to digital cameras and the advances made in technology to manage photos, publishing pictures online has become the new arms race: he or she with the most photos online wins. Sacrificed in that rush to get the pictures online is the enjoyment we can experience taking time with each individual picture.

Creating a Reusable Ladder Mask

I live for layers in a photo editor. They’re probably the most helpful tool in our editing arsenals.

One use of layers is to create a template image that can be saved and reused multiple times. The template is copied each time it’s used, and then pasted into a new layer in the target photo. Through the use of layers, I can then shift the template about until it’s just right.

Figure 4-15 shows a series of beveled tiles, all created from one photo, embedded into a web page. The distance of the photos to each other is true to the original picture, because I use a template to “cut” out the individual items without impacting the layout of the items.

Beveled “tiles” from one photograph, used as a visual separator
Figure 4-15. Beveled “tiles” from one photograph, used as a visual separator

The template is nothing more than a long rectangle with a series of same-sized squares, placed equidistant from one another, that are cut out, leaving a transparent background for each. To use such a template, first transform the background image into a layer. Then, copy the template and paste it into the photograph, first coloring the template in such a way that it doesn’t match any nearby color, as shown in Figure 4-16.

At this point, use the Magic Wand (or whatever your photo editor supports) to “select” the template and delete it, leaving behind the isolated squares. You can crop out the rest of the picture, and use the Photoshop Bevel and Emboss layer style to add the beveled effect. The same challenges with alpha channels, PNGs, and IE 6.x relate to this type of effect, so you may want to flatten the image to a JPEG before saving.

Here are the steps to re-create this effect:

  1. Create the template by cutting out the parts of the image that will remain in the final work.

  2. Transform the photo into a layer if it isn’t already.

  3. Copy and paste the template into a new layer in the target photo.

    Using the Beveled Tile template to cut out the tiles
    Figure 4-16. Using the Beveled Tile template to cut out the tiles
  4. Move the template around until the openings are aligned to your preference.

  5. Color the template so that it doesn’t match any color in the underlying photo, and then merge the two layers.

  6. Select the template using whatever tool selects items based on color and proximity. I used Photoshop’s Magic Wand for the work in this chapter.

  7. Delete the selected item, and then crop the image down so that only the cut-out portions of the photo remain.

  8. Apply an effect, such as the Photoshop Bevel and Emboss.

This makes a good “break” in text because the image is not so tall that the item is overly distracting. Depending on the topic of the text and the photo used, it should add color and a visual enhancement to the story. It can also be resized smaller to create an even subtler visual break.

Tip

Novell provides a great tutorial in how to manually add a bevel effect in GIMP at http://www.novell.com/coolsolutions/feature/17391.html.

A variation using this pattern doesn’t cut the template, but instead modifies it so that it becomes part of the picture. Figure 4-17 shows another example with the same template but a different underlying photo. In this version, a metal effect is added to the template by selecting the Drop Shadow, Bevel and Emboss, and Gradient layer styles, as shown in Figure 4-18. The underlying photo is trimmed down to fit within the frame, and then the two layers are merged into one.

Metallic row photo with “framed” seagull photo
Figure 4-17. Metallic row photo with “framed” seagull photo
Creating the metallic frame using Photoshop Layer Styles
Figure 4-18. Creating the metallic frame using Photoshop Layer Styles

These examples provide alternatives to plain horizontal breaks, and are more for adding visual stops than focusing attention on the subject. The next few effects are used more for creating an editorial context with images.

Torn Edges

One popular effect for both photos and other graphics, such as screenshots, is a torn-edge effect. A torn edge can add a nice flourish to the image, but can also be used to add a more three-dimensional feel, as well as context, to the picture. There are numerous ways of accomplishing a torn edge, but the one I’m going to demonstrate is one of the simplest.

For this example, I’m taking a group seagull photo shot in Florida and giving it a torn edge, just below the beach line but without following the line exactly. The end result is shown in Figure 4-19.

Torn-edge effect created with Photoshop
Figure 4-19. Torn-edge effect created with Photoshop

For the effect, create a “tear” line along the sand using the Polygonal Lasso Tool, continuing around the bottom and back to select the entire bottom half of the picture. Delete the bottom part of the image.

Once the bottom part of the image is deleted, use the same Lasso tool to select along the torn edge, about 10 pixels in from the edge, and then follow the photo around the outside until the rest is selected. Invert the selection so that the edge is the only part of the image selected, as shown in Figure 4-20.

Using the Lasso Tool to “tear” a chunk off the bottom of the photo and then select the edge
Figure 4-20. Using the Lasso Tool to “tear” a chunk off the bottom of the photo and then select the edge

Select the Filter → Distort → Ripple filter and use a medium distortion size, setting the amount to 100%. You might want to experiment with these values, or even use different filters, such as the Ocean Ripple.

Once the edge has been distorted, convert the photo to a layer, use the Magic Wand to select the bottom single-color portion of the picture, and delete it. This leaves a nice irregular edge to the picture. Accessing the Layer Style, add a Drop Shadow that is 5 pixels wide, with a light source set to 90 degrees, as shown in Figure 4-21. Flatten the image to convert to a JPEG, or you can leave the bottom transparent if you want to save the photo as a PNG.

To recap the steps:

  1. Set the background color to white.

  2. Use the Polygonal Lasso Tool, or any other tool, to create an irregular shape where you want the torn edge effect to be applied.

  3. Select the edge about 10 pixels in or so.

  4. Using the Filter → Distort → Ripple effect, distort the edge the amount you wish.

  5. Convert the image to a layer, use the Magic Wand to select the bottom, white portion of the image, and delete it.

    After the Ripple distortion has been applied, the bottom part of the photo deleted, and a drop shadow added
    Figure 4-21. After the Ripple distortion has been applied, the bottom part of the photo deleted, and a drop shadow added
  6. Add a Drop Shadow Layer Style set to 90 degrees, 5 pixels in size.

  7. Flatten the image if you want to save as a JPEG.

Effects don’t have to be restricted just to the edges of a photo. You can also create a broken effect directly through a photo, covered next.

Broken Photo

Another effect that’s quite simple to create is a broken photo effect, with a jagged but clean-edged break through the photo itself. This could be used to visually enhance a picture or to make an editorial statement, such as creating a broken photo from a political rally or of an old building that was recently taken down.

This how-to uses a second seagull photo, this one of birds on the beach and birds just taking off. There’s a nice, clear area of sand that marks the boundary between walking and flying birds, which forms a perfect break point for the picture, as can be seen in Figure 4-22.

To start, draw break lines using the Polygonal Lasso tool without making both sides completely parallel, because we want the effect to look not only like a break, but one that’s pulled away a bit at one end, as shown in Figure 4-23.

A broken photo effect
Figure 4-22. A broken photo effect
Creating the break
Figure 4-23. Creating the break

Next, duplicate the layer, and in the top layer, use the Lasso tool to select the bottom part of the “broken” photo and delete it. You don’t have to be too careful selecting around the break, because once you’ve deleted the bottom part of the tool, you use the Magic Wand to select the rest of the white area from the break and delete it, too.

The next step is to add a shadow to the top piece of the photo, again using a 90-degree light source, a shadow width of 10 pixels, and a distance setting of 10 pixels. Once that’s finished, merge the two layers.

Group Effects

I don’t modify pictures just for the sake of modifying them, though I enjoy trying out new effects. To return to the analogy of plating, I add the presentation effects to the photos so that they enhance the writings in which they’re incorporated. This can be even more effective if you use a sequence of photos in the same page, each modified with a different but complementary effect.

The two seagull photos and a third are used to annotate a story on community. They’re a natural subject, because seagulls are known to be both communal and competitive, and we have pictures that show gulls grouped tightly together, walking in lockstep, and then a picture with half the birds flown away and the rest either continuing to walk or thinking about flying away.

The pictures are color matched, first, using the techniques described in Chapter 3. Next, the first picture is modified with a Drop Shadow, the second with the broken photo effect, and the last with the torn edge. The torn edge picture is last because the diagonal of the tear leaves considerable white space below, which will look odd within text. However, at the bottom of an article, it creates an “arrowed” effect, which can be a nice finishing touch.

Consistency is key and goes beyond color matching when you’re grouping photos using effects. If a light source is implied in the effect, such as the Drop Shadow, it needs to be in the same direction and intensity in all pictures—or, at a minimum, adjusted so that the position where the photo is in the page might account for light differences.

In the three grouped photos, shown in Figure 4-24, and without text, the Drop Shadow is applied to the bottom of all three pictures (set to the same light source angle and amount), and the photos are the same width as well as the same color, cast, and brightness, as mentioned earlier.

Any one of the photos can be fine by itself, but as a group they can be striking, and as annotation, very effective.

Another effect is to cut a picture into pieces, breaking the picture along natural lines—such as a horizon, or around an object—and then using each piece in sequence in the page. In fact, when you think outside the photo box and consider the concept of photo plating, there’s a world of possibilities.

Grouping photos, each matched and given unique but complementary effects
Figure 4-24. Grouping photos, each matched and given unique but complementary effects

Photo and effect grouping can also be applied to galleries, in order to create something out of the ordinary. Of course, the simplest galleries are those that are generated for us, which I’ll cover next.

There are also any number of plug-ins and tutorials, as well as applications, to create effects within the photos themselves, such as adding a motion trail to a dog running in a picture, or distorting the eyes and head of a cat so that it appears to be coming out of the page and staring at you. All you have to do is search on “photo effects,” and be prepared to spend the next several weeks exploring all the possibilities.

The only thing you’ll want to be careful of is making sure the effect doesn’t overshadow both the purpose and the page. Mad twirls and other distortions might be fun to create, but if they don’t add to the message or to the page, we’re back to the Hamster on the Color Wheel and animated unicorns that I discussed in Chapter 1.

Know why you’re applying an effect, and what you hope to accomplish with it before you start playing.

Generated Galleries and Slideshows

The easiest way to get your photos in the face of your fans is to use a tool that automatically generates a photo presentation given a group of photos. You can pick a gallery type of show—where the items are presented in thumbnails that can be clicked to expand the photo—or a slideshow, with the photos displayed either through a navigation bar or in a timed sequence.

There are applications that do nothing more than generate slideshows or galleries. However, some of the photo editors and workflow tools we use for our other work also provide these shows, though you may have to poke around to find them.

Editor and Workflow Shows

Most workflow tools provide a gallery or slideshow capability, but not all provide tools to generate a web-based gallery or show. Two that I looked at in Chapter 3, Apple’s Aperture and Adobe’s Lightroom, both support the ability to generate an external photo display, though in this regard I found Lightroom to have the simpler and more intuitive interface.

Selecting a group of photos and clicking on the Web tab in Lightroom is all you need to do to create a web photo display using all default settings, shown in Figure 4-25. Once in the web page, you can change the template, including whether the show will be HTML or Flash. You can also define some characteristics of the photo layout, as well as modify the color palette.

Aperture’s gallery option is fairly simple to use, but you have to find it. Figure 4-26 shows Aperture opened to the Web Gallery option, which is a small icon among the other tasks, as noted by the yellow arrow. Once found, though, it’s a simple interface, though not as powerful as Lightroom’s. You can select a specific theme, and once that’s picked, choose the layout of the thumbnails, including the number of columns and rows per page. To finish, change the show’s metadata, including title, subtitle, copyright, and description. You can also pick what kind of metadata to show for each photo, such as the caption, keywords, EXIF data, and so on. Note, though, that it can get a bit messy if you print everything out. Once you’re done, you can export the gallery pages to your local computer, or you can export them to Apple’s .Mac hosting system.

Defining a web display using Lightroom
Figure 4-25. Defining a web display using Lightroom
Generating a web gallery using Aperture
Figure 4-26. Generating a web gallery using Aperture

Another feature about Aperture, whether good or not, is the tie-in between all of Apple’s products, as demonstrated by the fact that you can export your gallery to .Mac. Aperture also ties into the AppleScript system within Mac OS X, which means you can add features such as a Publish to iPhone AppleScript (available at http://automator.us/aperture/iphone.html), which creates web pages fine-tuned specifically for iPhone. Of course, this begs the question of why you would want to generate a web gallery for only one device.

Returning to Lightroom, it’s not surprising that Lightroom’s web interface is so intuitive—Adobe shines when it comes to providing web gallery capabilities built into the company tools. Both Photoshop and Photoshop Elements have excellent and easy-to-use web gallery options.

In Photoshop, web galleries and slideshows can be generated via the File → Automate menu option. Among the options you’ll be given are those to create High Definition Resolution images (HDRs), batch merge, PDF presentations, and Web Photo Galleries. Clicking on the latter opens a dialog that lets you pick the type of show to generate (HTML or Flash-based templates), as well as fine-tune some of the options, such as color and show name, as shown in Figure 4-27.

None of these tools provides what Photoshop Elements 5.0 provides, though. Photoshop Elements has more ways to generate just about every type of photo show you could ever want, both for the Web and your desktop, than any other photo tool I’ve looked at. One of my favorite options allows me to create a movie of my photos, with music, to play on my HD widescreen TV attached to my computer. I can really review the photos and make that keep-or-not decision in style.

All the options are available from the Elements Organizer, under the Create menu. The options are numerous, but the one I’m interested in for this book is Photo Galleries, which opens the Photo Galleries Wizard, shown in Figure 4-28.

The Photo Galleries Wizard provides several different layouts for the thumbnails, including filmstrips along the top, bottom, and sides. Other options include the size of the thumbnails. In the bottom of the page, the Wizard provides style options for controlling the appearance of the gallery. I’m learning how to hand-bind books as a hobby, so the Hand Made Paper template was my favorite.

Photos are added in the left, and you can add them individually or select a whole folder. Once the photos are added and the template is just right, clicking the Next button takes you to the finishing steps where you can name the Gallery and define characteristics such as background music, slideshow duration, and some color and font control. (See Figure 4-29.)

You can preview the show before exporting to make sure it doesn’t need any further tweaking. Once you’re happy, you can export the file locally and share it via several options, including uploading the show with FTP to your web site.

Photoshop’s Web Photo Gallery dialog
Figure 4-27. Photoshop’s Web Photo Gallery dialog

There’s a wealth of free or at least free-to-try tools that can create photo shows, with or without effects. Some of the generated shows are HTML-based, and some are Flash.

One popular platform-independent tool is the Java-based Gallery Constructor, available in installations for Windows, Linux, and Mac OS X. I tried the Mac product.

Photoshop Elements 5.0 Photo Galleries Wizard
Figure 4-28. Photoshop Elements 5.0 Photo Galleries Wizard

Tip

Gallery Constructor can be downloaded at http://www.through-the-lens.net/cms/index.php?page=Gallery_Constructor. Installation instructions are provided for each environment.

One thing that sets Gallery Constructor apart from other gallery construction tools is support for RAW images. If you have a set of RAW images you want to quickly convert into a gallery without having to pre-process them first, this is the tool for you.

Once you open the tool for the first time, you can create a project just by accessing a specific folder. This triggers the tool to load thumbnails if any are provided for the images, as shown in Figure 4-30.

You’ll then adjust the page template in the Gallery Template section, including providing a title and the number of thumbnails in the page. The Thumbnail Workflow tab provides options for controlling the appearance of the thumbnails, and the Image Workflow controls the display of the single, enlarged photo pages. You can also preview the image, and when you do, you’re given options to change the photo’s gamma, contrast, brightness, and saturation options, as shown in Figure 4-31. You can also run a Slideshow immediately, without having to generate a hard copy of the show.

Finishing up the Photoshop Elements Web Gallery
Figure 4-29. Finishing up the Photoshop Elements Web Gallery

Once you’ve tweaked the gallery options, you’re ready to generate the show. You can generate a hard copy to your local machine and also FTP the show immediately. You’re given the option to tweak each photo in turn or accept the same settings for the entire show. The only issue you might have is memory errors, but the site provides a workaround for this. Note, though, that it’s not a fast application, especially if you’re working with RAW images.

There is another gallery generator that adds an effect to the images, and can also work cross-platform, as well as with most of the tools I’ve covered in this chapter and Chapter 3PostcardViewer.

Loading a folder of images into Gallery Constructor
Figure 4-30. Loading a folder of images into Gallery Constructor

PostcardViewer is a Flash show that also has a standalone tool, in addition to a PHP-script-based alternative you just drop into a folder full of images. I tried the PHP-based application with some images I had already loaded with my server.

To use the PHP application, you’ll need to download the viewer, unzip the postcardviewer folder, and upload it and its contents to your server. Copy or move the photos you want to include to the images subdirectory. You’ll also need to download and unzip the buildgallery.php application. Upload this file to the same postcardviewer folder. There are options you can set within the file, and the PostcardViewer site has documentation on each of these.

Tip

You can find the PostcardViewer application and instructions at http://www.airtightinteractive.com/projects/postcardviewer/.

Tweaking a photo in preparation for show generation
Figure 4-31. Tweaking a photo in preparation for show generation

In the postcardviewer folder is a file, imagedata.xml, that you need to make writable by everyone via the FTP program you use. It’s this file that provides the information the application needs. You could also edit it yourself; it’s just a listing of image names and some dimension information. Figure 4-32 shows the PostcardViewer after the show is first opened, and Figure 4-33 shows it with one of the images expanded.

There’s a world of other gallery creation tools that work in all environments, in addition to Windows, Mac, and Linux. Ultimately, though, if you’re going to be publishing a lot of photos online, you’ll probably want to use a more dynamically managed system, such as full-featured gallery software.

Photos loaded into PostcardViewer
Figure 4-32. Photos loaded into PostcardViewer

Tip

One of the best places to get a listing of photo gallery generation applications is at About.com, at http://graphicssoft.about.com/od/webgallery/Web_Photo_Gallery_Creation_and_Automation_Tools.htm.

If you have your own hosted environment, you can use any number of server-side applications to display your photos. Two of the more popular photo gallery software applications are Gallery and Coppermine, both written in PHP, and both capable of working in most systems. In addition, several content management systems, such as WordPress and Drupal, also have photo uploading and management capability built in, either for adding photos to posts or for creating an entire gallery.

Focusing in on one photo within the Viewer
Figure 4-33. Focusing in on one photo within the Viewer

The grand poobah of server-side photo software, though, is Gallery. It’s always been a powerful piece of software, but not always the easiest application to set up. Even now, with simple steps to follow, you still need to set up a database first and be able to modify directories and files. Most of the instructions are from the command line, but you can install Gallery using FTP.

At the time of this writing, there are three different versions of the Gallery application: Gallery 1, Gallery 2 (which I cover in this section), and Gallery Remote for client-side photo posting. For a brand-new installation, you’re going to want to install Gallery 2.

Tip

Download Gallery at http://gallery.menalto.com. If you’re not sure about the requirements for running Gallery, contact your hosting company and ask whether you can run Gallery on your site.

The application checks to make sure the required technology is present, but you’ll need to create the database first. Most hosting sites provide database functionality, including database creation wizards, which handle all the tech required. The MySQL installation is the default install and doesn’t require any additional modules.

What are the Gallery requirements?

  • Unix or Windows

  • A web server, such as Apache or IIS

  • PHP (version 5 required after February 2008)

  • Some image processing library (most sites have ImageMagick and/or GD installed)

  • A database, such as the aforementioned MySQL, or PostgreSQL, Oracle, or SQL Server

Gallery runs well in both Windows and Unix environments, but most hosting companies run Linux (Unix). All but the cheapest hosting sites support all the other requirements.

Warning

If your hosting company provides a site management package, there’s a good chance Gallery is provided as a push-button installation. Check with the company before installing it manually.

During the installation process, you’ll be given options as to which plug-ins to install. The list is lengthy, but many have to do with migration from Gallery 1, camera-specific options, integration with third-party tools, and so on. Go through the list carefully, and be conservative with what you install—you can activate or deactivate modules at a later time.

You can create multiple albums with Gallery, each with its own title, description, subdirectory, keywords, and other data. Each can be given its own layout and use a different predefined theme. Figure 4-34 shows part of the Theme configuration page in the Gallery Administration pages.

Gallery is one of the most configurable applications I know of, which is good and bad. Unless you’re into development, you might want to start with design themes and get into the more advanced modification facilities only when you’re familiar with the application.

You can access new themes at http://codex.gallery2.org/Gallery2:Themes. Browse through the many options, and once you’ve found the theme you like, install it via your own Gallery Site Admin pages through the Gallery → Plugins option. The installation is automatic, and once the new theme is installed you can activate it for any album. Also, once you become familiar with the tool and the templates, you can create your own design.

There’s a variety of ways to add photos to a Gallery Album. The simplest is through the web browser directly to the site. You can upload one or more photos at the same time, and add both titles and descriptions. If the template includes the option, any metadata attached to the photo also gets parsed out when the photo is uploaded.

Gallery Site Administration pages
Figure 4-34. Gallery Site Administration pages

There are several client-based applications that can also be used to upload photos, including a Java application, a webcam connection, through Google’s Picasa export file, via Windows XP functionality, and through an upload directory if photos are already uploaded to your site.

This latter option is nice if you’ve been uploading photos through a weblog or other content management tool. I used it when writing this book to add figures that I uploaded to a special directory for my tech reviewers. Once I specified the directory, it then listed each photo with a checkbox next to it. Clicking on any of the boxes uploaded the photo, as shown in Figure 4-35. You can use a symbolic link (symlink) to make it seem as if the photo is coming directly from the Gallery rather than the separate folder. This ended up being a nice way to peruse the figures from this book during the editing process.

One of the advantages of using the local server option is that it’s faster to upload photos in batch using an FTP tool. The disadvantage, though, is that you can’t give titles and descriptions for each item. You can, however, edit these for each item after they’re loaded.

Using a local server to add photos to an album
Figure 4-35. Using a local server to add photos to an album

A Bit of Code

A final way to integrate photos into your web pages is using a bit of code embedded into your web pages in such a way that photos are displayed randomly each time a person accesses the page. I’ve used this for years, both to create changeable sidebar photo displays and also to modify banners and backgrounds for my stylesheets.

Who knows who originated the first PHP-based sidebar photo randomizer. It’s been around a long time, though, and is quite popular because so many weblogs and other tools are PHP-based.

If your web pages are PHP-based, all you need do to use a randomizer is organize the photos into one directory local to the site, and save the PHP in Example 4-2 to a file located wherever you want the photo to display.

Gallery with the Ajaxian theme
Figure 4-36. Gallery with the Ajaxian theme
Example 4-2. PHP script to randomly display photos
<?php

$dir = "/home/someloc/www/images/";
$url = "http://somesite.com/images/";
$exts = array('jpg');

//collect list of images in current directory
$imgs = array( );
if($handle = opendir($dir)) {
        while(false !== ($image = readdir($handle)))
                foreach($exts as $ext)
                        if(strstr($image, '.' . $ext))
                                $imgs[] = $image;
        closedir($handle);
}

//generate a random number
srand((double)microtime( ) * 1000000);

//change the number after the % to the number of images
//you have
$ct = count($imgs);

$rn = (rand( )%$ct);

$imgname = trim($imgs[$rn]);

printf("<img src='$url%s' alt='' />", $imgname);

?>

The two items that need to be changed are the $dir and $url at the top of the script. These should point to the physical directory on the machine where the images are currently loaded and the web site address for the directory, respectively.

In addition, by default the application pulls in JPEG images only. If you want to add in PNG or GIF images, add them to the $exts array, separated by commas:

array('jpg','gif','png');

With this script embedded in the page, each time the page is loaded, a different image is loaded.

A variation on this is to incorporate this functionality into your stylesheet. I’ve used this to modify my CSS to change a banner image used in both my header and footer. To implement this in your space, create a PHP application page called photographs.php, shown in Example 4-3, and load into your template directory where the stylesheet and images are located.

Example 4-3. Modifying a stylesheet for a random image
<?php
// declare the output of the file as CSS
header('Content-type: text/css');
?>
#header {
<?php

$exts = array('jpeg');

//collect list of images in current (look) directory
$url = array( );
if($handle = opendir(dirname(_ _FILE_ _))) {
        while(false !== ($image = readdir($handle)))
                foreach($exts as $ext)
                        if(strstr($image, '.' . $ext))
                                $url[] = $image;
        closedir($handle);
}

//generate a random number
srand((double)microtime( ) * 1000000);

//change the number after the % to the number of images
//you have
$ct = count($url);

$rn = (rand( )%$ct);

$imgname = trim($url[$rn]);

printf("background-image: URL('%s');", $imgname);

?>
           background-repeat: repeat-x;
           background-position: top left;
}

#footer {
<?php

printf("background-image: URL('%s');", $imgname);
?>
           background-repeat: no-repeat;
}

The code is quite similar to that shown in Example 4-2, except it makes the assumption that the photos are in the local directory and returns a content type of CSS in the very first line of the application:

header('Content-type: text/css');

Returning the result of the application as CSS is critical in order to merge the results of this application into a stylesheet. The rest of the document in Example 4-3 is a mix of static CSS and PHP to generate CSS. To incorporate both the static and PHP-generated CSS into my stylesheet, I use the following as the first line (after documentation) in my main CSS file:

@import "photographs.php";

Now, any time the page is accessed, the background photo for both the header and footer banners are randomly drawn from a pool of photos. I’ve used this effect with my own photos, as shown with Figure 4-37, but I’ve also used public domain photos, such as the Hubble images, as well as images from NASA and NOAA. In fact, most photographs from agencies funded by the U.S. federal government are public domain.

I could go and on with photos, but it’s time now to look at other forms of raster images, and then move on to the vectors.

Banner image rotated through dynamic alteration of stylesheet
Figure 4-37. Banner image rotated through dynamic alteration of stylesheet

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required