People placeholder images

Related styles

Description

A placeholder image is available for when you are missing a photo of a person, for example in a contact listing, and need to use a generic image to avoid having a blank space.

Options

The image is available in three aspect ratios:

Square

no photo available

person.png

8 x 10 portrait

no photo available

person_8x10.png

6 x 8 portrait

no photo available

person_6x8.png

How to code

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

<img src="//style.anu.edu.au/_anu/4/images/placeholders/person.png" alt="no photo available" class="w100px" />

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

John Smith
Research Fellow
john.smith@anu.edu.au

John Smith
Research Fellow
john.smith@anu.edu.au

Small photo & details in two wide divs

John Smith
Research Fellow
john.smith@anu.edu.au

John Smith
Research Fellow
john.smith@anu.edu.au

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:

<div class="w100px left marginright marginleft">
  <a href="#">
    <img src="//style.anu.edu.au/_anu/4/images/placeholders/person_8x10.png" alt="" class="w100px left marginright" />
    <p class="left caption-3line">John Smith</p>
  </a>
</div>

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

no photo available

John Smith

Research Fellow
john.smith@anu.edu.au

Research interests

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet aliquet sem. Donec pulvinar orci neque, ut dapibus odio suscipit in. Donec feugiat, mauris in aliquam adipiscing, mi erat mollis orci, vitae suscipit lacus ante vel odio. Quisque ac tellus justo. Nulla facilisi. Nullam quis lacus diam.

Updated:  30 May 2014/ Responsible Officer:  Director Marketing/ Page Contact:  Webstyle