Responsive scaling

Displaying images correctly per device

Overview

In order to be display images correctly on different devices, we need to ensure we have responsive scaling on our images.

In the Media Library you can upload and manage versions of the same image so that they can be displayed appropriately on different devices - to support performance and art direction.

Example
WCMS use

Image hierarchy

In the media library you can upload images into an image hierarchy.

An image with valid options will be set up as follows:

-  Image (image item, 480x480)
-  30-image (image item, 1200x400)
-  64-image (image item, 1500x400)
-  90-image (image item, 2700x600)

Any image can have child images attached to it. Child images are always expected in the above order.

Child images are only used for the following renderings and page template areas:

Rendering

  • Carousel > LinkedImage_image
  • Slideshow > LinkedImage_image
  • Overlay image > LinkItem_image

Page template areas

  • HCC_NewsArticle > NewsArticle_HeroImage
  • Your_Hampshire_Hero
  • Venue_Template_Hero   

 

MVC.net use
Code

<picture class="scale-images"> 
 <!-- always set --> 
 <source srcset="Image" media="(max-width: 30em)"/>
 <!-- if set --> 
 <source srcset="30-image" media="(max-width: 64em)"/> 
 <!-- if set --> 
 <source srcset="64-image" media="(max-width: 90em)"/>
 <!-- if set --> 
<source srcset="90-image" media="(min-width: 90em)"/> 
 <!-- always set --> 
 <img src="Image" alt="Image alt text" /> 
 </picture>
Version and status
  • 1
  • current version
  • Concept
  • Alpha
  • Beta
  • Release