Image management, naming and attribute selectors

I had written about using an attribute substring selector to bind a style to an element using its alt text.

<a href="#">
<img src="promo-main-css.png" alt="Designing With CSS Cover" />
<img src="promo-disc.png" alt="Designing With CSS Disc" />
<h3>Designing with CSS</h3>
</a>

div.promo-main img[alt*="Cover"] {
z-index : 2;
position: absolute;
top : 0;
left : 0; }

div.promo-main img[alt*="Disc"] {
z-index : 1;
position: absolute;
top : 70px;
left : 85px; }

This selector allows you to select an element where (in this case) the words “Cover” and “Disc” appear somewhere in the alt text string.

Craig said.

You could rename the cover images to end with “-cover.png” and use the same clever selector trick on the src attribute. img[src*="cover"]

Wait. Did he just suggest using an attribute selector to target an image based on its file name? Why have I never done that? This approach can be extended to help me solve everyday problems.

JPG vs PNG

The problem: My designs always include a mixture of JPGs and alpha-transparent PNG content images, inline rather than CSS background images. I often add padding, background-color and border to spruce up inline images. I want to apply these properties to JPGs but not to PNGs. I also want to avoid unnecessary class attributes in my HTML.

The answer: Use an attribute selector to target an image file type. In this example I can style images whose source ends with .jpg

<img src="promo-main-css.jpg" alt="" />

img[src$=".jpg"] {
/* Styles */ }

Styling external images

The problem: Sometimes you need to size images from external sites like Flickr, perhaps limiting them to a maximum width.

The answer: Select images where their source starts with http://farm3.static.flickr.com.

<img src="http://farm3.static.flickr.com/2547/4112232300_3215c9c5a0_b.jpg" alt="" />

img[src^="http://farm3.static.flickr.com"] {
/* Styles */ }

Or includes flickr.com somewhere in the source string.

img[src*="flickr.com"] {
/* Styles */ }

Various image styles

The problem: In practice, when images are served from a CMS or uploaded by a client, their remembering file naming conventions or adding class attributes to maintain styles can often be tricky. For example, let’s say that large content images should be styled with 10px padding but thumbnail images only 5px.

The answer: Upload images to different folders and use an attribute selector to target an image based on its directory. In this example I can style only images stored inside a folder named thumbnails.

<img src="thumbnails/promo-main-css.png" alt="" />

img[src*="thumbnails"] {
/* Styles */ }

Filing images into various directories not only makes good sense for long-term management, you can also use those directories for styling groups or collections of images using attribute selectors.

Slap head

I slap my head. Craig’s comment may just have changed the way I name images, store images and style images forever.