Painting the Web

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.

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.

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.