How to code

If possible in your system, link directly to the images hosted centrally using code such as:

Replace person.png with person_6x8.png or person_8x10.png to use one of the other aspect ratios.

Image size

In HTML 5, image dimensions should not be specified with width and height attributes. Instead, image width classes are available to constrain the image widths to 100px, 120px, 150px or 200px. It is recommended that your people photos are no smaller than 100px wide as they will otherwise be difficult to see clearly.

Accessibility tip

Remember to use an alt attribute such as 'no photo available' for accessibility. However, if the placeholder image links to information about the person and the image is in the same link, use a blank alt attribute: alt="". If they are in separate links, use the person's name for the alt attribute.

Example layouts

Small photo & details in a doublewide div

Small photo & details in two wide divs

Small photos in a grid

To get small photos with captions to line up in a grid, you might have to use a caption-3line (or caption-2line for shorter/smaller captions) class on the text. For example:

This will set the height of the text to approximately three lines (or two lines for caption-2line) and will ensure that all images line up, regardless of the length of the caption. For proper alignment, you'll need to consistenty use either caption-2line or caption-3line on all captions rather than mix and match these classes.

Note that a caption longer than about two/three lines will be cut off, and a caption shorter than two/three lines will have space below it.

Make sure you check that your text fits in the number of lines you have allowed. It's best to be conservative and allow more space, as some users zoom text.

Large photo in a narrow div