Blog

Image management, naming and attribute selectors

  • Words: Andy Clarke

Writing this week about eating accessibility humble pie and using CSS attribute substring selectors, a comment by clever Craig Cook sent my imagination reeling.

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.


Contact us

x

Let’s design something fabulous together

Call 01745 851848, tweet or email us.

Answer these questions if you’d prefer to send us a little information about your project before you call.

Our projects start at £5,000 plus VAT with an average project costing between £10,000 and £20,000 plus VAT.

We’ll keep your information private and we won’t share it with anyone else.

Studio address

OpTIC, Ffordd William Morgan,
St. Asaph Business Park,
St. Asaph, Denbighshire, North Wales, LL17 0JD

(Here’s a map showing how to find our studio.)

Registered office

Eversleigh, Lon Capel, Gwaenysgor, Flintshire, North Wales, LL18 6EJ