Media

Images used throughout the Design Language should adhere to the following types of imagery; black and white pet imagery, article photography pack shots and user or pet avatars. Pet of pack imagery should not be used if the animal or pack is not legible.

Responsive Image

The HTML <picture> element serves as a container for zero or more <source> elements and one <img> element to provide versions of an image for different display device scenarios. The browser will consider each of the child <source> elements and select one corresponding to the best match found. If no matches are found among the <source> elements, the file specified by the <img> element's src attribute is selected. The selected image is then presented in the space occupied by the <img> element. To select the optimal image, the user agent examines each source's srcset, media, and type attributes to select a compatible image that best matches the current layout of the page, the characteristics of the display device, and so forth. Common use cases for this are to provide a HiDPI (Retina) version of an image when using a high-DPI display, and to offer fallback image formats when a modern format is not supported by an older browser. Picture Element by Mozilla Contributors is licensed under CC-BY-SA 2.5.

A Dachshund jumping
html
            <picture>
   <source srcset="/assets/images/responsive-backgrounds/Dachshund-2000px.jpg" media="(min-width: 1500px)">
   <source srcset="/assets/images/responsive-backgrounds/Dachshund-1500px.jpg" media="(min-width: 600px)">
   <img src="/assets/images/responsive-backgrounds/Dachshund-500px.jpg" alt="A Dachshund jumping">
</picture>
        

Responsive Image Hidden Below 600px

This example hides the image as resolutions lower than 600px by replacing it with a 1x1px transparent gif.

Hidden image
html
            <picture>
   <source srcset="/assets/images/responsive-backgrounds/Dachshund-2000px.jpg" media="(min-width: 1500px)">
   <source srcset="/assets/images/responsive-backgrounds/Dachshund-1500px.jpg" media="(min-width: 600px)">
   <img src="https://d3moonnr9fkxfg.cloudfront.net/1x1.gif?v=8-5-12" alt="Hidden image">
</picture>
        
Hidden image
html
            <picture>
   <source srcset="https://d3moonnr9fkxfg.cloudfront.net/1x1.gif?v=8-5-12" media="(min-width: 1500px)">
   <source srcset="/assets/images/responsive-backgrounds/Dachshund-1500px.jpg" media="(min-width: 600px)">
   <img srcset="/assets/images/responsive-backgrounds/Dachshund-2000px.jpg" alt="Hidden image">
</picture>
        

Background image

A basic background image using a figure element for improved semantics. The image is centerally poitioned, doesn't allow cropping and doesn't repeat.

Text about image
html
            <figure class="rc-bg-image" style="background-image: url(' /assets/images/img-b-w.png ')">
	<figcaption class="rc-screen-reader-text">Text about image</figcaption>
</figure>
        
A Dachshund jumping
html
            <div class="rc-bg-responsive-image__wrapper">
  <picture class="rc-bg-responsive-image" role="presentation">
   <source srcset="/assets/images/responsive-backgrounds/Dachshund-2000px.jpg" media="(min-width: 1500px)">
   <source srcset="/assets/images/responsive-backgrounds/Dachshund-1500px.jpg" media="(min-width: 600px)">
   <img src="/assets/images/responsive-backgrounds/Dachshund-500px.jpg" alt="A Dachshund jumping">
  </picture>
</div>
        
A Dachshund jumping
html
            <div class="rc-bg-responsive-image__wrapper">
  <picture class="rc-bg-responsive-image--cover" role="presentation">
   <source srcset="/assets/images/responsive-backgrounds/Dachshund-2000px.jpg" media="(min-width: 1500px)">
   <source srcset="/assets/images/responsive-backgrounds/Dachshund-1500px.jpg" media="(min-width: 600px)">
   <img src="/assets/images/responsive-backgrounds/Dachshund-500px.jpg" alt="A Dachshund jumping">
  </picture>
</div>
        

Background image position

You can define position of background image: top, bottom, left, right with .rc-bg-responsive-image--[direction]. Default position is center.

A Dachshund jumping
html
            <div class="rc-bg-responsive-image__wrapper">
  <picture class="rc-bg-responsive-image--cover rc-bg-responsive-image--top" role="presentation">
   <source srcset="/assets/images/responsive-backgrounds/Dachshund-2000px.jpg" media="(min-width: 1500px)">
   <source srcset="/assets/images/responsive-backgrounds/Dachshund-1500px.jpg" media="(min-width: 600px)">
   <img src="/assets/images/responsive-backgrounds/Dachshund-500px.jpg" alt="A Dachshund jumping">
  </picture>
</div>
        
A Dachshund jumping
html
            <div class="rc-bg-responsive-image__wrapper">
  <picture class="rc-bg-responsive-image--cover rc-bg-responsive-image--bottom" role="presentation">
   <source srcset="/assets/images/responsive-backgrounds/Dachshund-2000px.jpg" media="(min-width: 1500px)">
   <source srcset="/assets/images/responsive-backgrounds/Dachshund-1500px.jpg" media="(min-width: 600px)">
   <img src="/assets/images/responsive-backgrounds/Dachshund-500px.jpg" alt="A Dachshund jumping">
  </picture>
</div>
        
html
            <div class="rc-bg-responsive-image__wrapper">
  <picture class="rc-bg-responsive-image--cover rc-bg-responsive-image--left" role="presentation">
   <source srcset="/assets/prototype-resources/talk-to-us--lg.jpg" media="(min-width: 1500px)">
   <source srcset="/assets/prototype-resources/talk-to-us--lg.jpg" media="(min-width: 600px)">
   <img src="/assets/prototype-resources/talk-to-us--lg.jpg" alt="">
  </picture>
</div>
        
html
            <div class="rc-bg-responsive-image__wrapper">
  <picture class="rc-bg-responsive-image--cover rc-bg-responsive-image--right" role="presentation">
   <source srcset="/assets/prototype-resources/talk-to-us--lg.jpg" media="(min-width: 1500px)">
   <source srcset="/assets/prototype-resources/talk-to-us--lg.jpg" media="(min-width: 600px)">
   <img src="/assets/prototype-resources/talk-to-us--lg.jpg" alt="">
  </picture>
</div>
        

Background image - fill

The same as above but with the 'fill' modifier that allows cropping to ensure the whole parent container is filled.

Text about image
html
            <figure class="rc-bg-image rc-fill" style="background-image: url(' /assets/images/img-b-w.png ')">
	<figcaption class="rc-screen-reader-text">Text about image</figcaption>
</figure>
        

Background image - fixed ratio

Allows to set fixed ratio size to container. Two versions available - 16:9, 4:3.

Text about image
html
            <figure class="rc-bg-image rc-fixed-ratio" style="background-image: url(' /assets/images/dashchund.jpg ')">
	<figcaption class="rc-screen-reader-text">Text about image</figcaption>
</figure>
        
Text about image
html
            <figure class="rc-bg-image rc-fixed-ratio rc-fixed-ratio--4-3" style="background-image: url(' /assets/images/schnauzer.jpg ')">
	<figcaption class="rc-screen-reader-text">Text about image</figcaption>
</figure>
        

Background video

HTML 5 video element used as a background. Please ensure you include a poster image file for when the video is not avalible or the file format is not supported. There is also an extended version that blocks the video source from being loaded, checking the viewport size, then loading the best suited video source.

html
            <div class="rc-bg-video__wrapper">
    <video poster="https://i.vimeocdn.com/video/672704482_100x75.webp" id="" playsinline autoplay muted loop class="">
        <!-- WCAG general accessibility recommendation is that media such as background video play through only once. Loop turned on for the purposes of illustration; if removed, the end of the video will fade in the same way created by pressing the "Pause" button  -->
      <source src="https://player.vimeo.com/external/247449130.sd.mp4?s=f85cb0d936e1febc64a48f3a7c50608ff7b708eb&profile_id=165" type="video/mp4">
      <source src="https://player.vimeo.com/external/247449130.sd.mp4?s=f85cb0d936e1febc64a48f3a7c50608ff7b708eb&profile_id=165" type="video/webm">
    </video>
  </div>
        
html
            <div class="rc-bg-video__wrapper">
    <video poster="https://i.vimeocdn.com/video/672704482.webp?mw=1700&mh=956" id="" playsinline autoplay muted loop class="rc-bg-video-responsive" preload="none">
      <!-- WCAG general accessibility recommendation is that media such as background video play through only once. Loop turned on for the purposes of illustration; if removed, the end of the video will fade in the same way created by pressing the "Pause" button  -->
      <source data-video-size="small" data-src="https://player.vimeo.com/external/247449130.sd.mp4?s=f85cb0d936e1febc64a48f3a7c50608ff7b708eb&profile_id=165" type="video/mp4">
      <source data-video-size="small" data-src="https://player.vimeo.com/external/247449130.sd.mp4?s=f85cb0d936e1febc64a48f3a7c50608ff7b708eb&profile_id=165" type="video/webm">

      <source data-video-size="medium" data-src="https://player.vimeo.com/external/247449130.hd.mp4?s=fdba15e16be6ad9f3aafd19f5c1833bd5ab73bcc&profile_id=174" type="video/mp4">
      <source data-video-size="medium" data-src="https://player.vimeo.com/external/247449130.hd.mp4?s=fdba15e16be6ad9f3aafd19f5c1833bd5ab73bcc&profile_id=174" type="video/webm">

      <source data-video-size="large" data-src="https://player.vimeo.com/external/247449130.hd.mp4?s=fdba15e16be6ad9f3aafd19f5c1833bd5ab73bcc&profile_id=175" type="video/mp4">
      <source data-video-size="large" data-src="https://player.vimeo.com/external/247449130.hd.mp4?s=fdba15e16be6ad9f3aafd19f5c1833bd5ab73bcc&profile_id=175" type="video/webm">
    </video>
  </div>
        

Single Parallax image

Images can be added with a container and given data attributes to change their speed and other various settings. For more information visit here.

html
            <div class="rc-parallax-wrapper">
    <img src="/assets/images/img-b-w.png" data-rellax-percentage="0.5" data-rellax-speed="-2" width="500" height="385" />
</div>
        
Kitten and puppy playing with ball
html
            <div class="rc-parallax-wrapper">
    <picture data-rellax-percentage="0.5" data-rellax-speed="-2">
       <source srcset="/assets/images/img-b-w.png" media="(min-width: 600px)">
       <source srcset="/assets/images/img-b-w.png" media="(min-width: 800px)">
       <img src="/assets/images/img-b-w.png" alt="Kitten and puppy playing with ball">
    </picture>
</div>
        

Interactive image

Attributes needed for this component:

  • data-js-top sets the position in % from the top
  • data-js-right sets the position in % from the right
  • data-js-bottom sets the position in % from the bottom
  • data-js-left sets the position in % from the left

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Text about image
html
            <figure class="rc-bg-image rc-fixed-ratio rc-fixed-ratio--16-9" style="background-image: url(' /assets/images/Content-Block_boxer-puppy_cutout_800px.png' )">
  <div class="rc-interactive-image">
    <div id="plus-tooltip" class="rc-tooltip">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <button class="rc-btn rc-btn--action rc-icon rc-plus--xs rc-brand3 rc-interactive-button rc-interactive-image__button" aria-label="Plus" data-tooltip="plus-tooltip" data-tooltip-placement="left" data-js-icon-button="" data-js-top="9%" data-js-right="" data-js-bottom="" data-js-left="30%">
      <span class="rc-screen-reader-text">Click interaction</span>
    </button>
    <div id="sustainable-tooltip" class="rc-tooltip">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <button class="rc-btn rc-btn--action rc-icon rc-sustainable--xs rc-brand3 rc-interactive-button rc-interactive-image__button" aria-label="Sustainable" data-tooltip="sustainable-tooltip" data-tooltip-placement="right" data-js-icon-button="" data-js-top="51%" data-js-right="34%" data-js-bottom="" data-js-left="">
      <span class="rc-screen-reader-text">Click interaction</span>
    </button>
    <div id="food-tooltip" class="rc-tooltip">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <button class="rc-btn rc-btn--action rc-icon rc-food--xs rc-brand3 rc-interactive-button rc-interactive-image__button" aria-label="Food" data-tooltip="food-tooltip" data-tooltip-placement="bottom" data-js-icon-button="" data-js-top="" data-js-right="" data-js-bottom="6%" data-js-left="23%">
      <span class="rc-screen-reader-text">Click interaction</span>
    </button>
  </div>
  <figcaption class="rc-screen-reader-text">Text about image</figcaption>
</figure>
        
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Text about image
html
            <figure class="rc-bg-image rc-fixed-ratio rc-fixed-ratio--4-3" style="background-image: url(' /assets/images/russian-blue-cat.jpg' )">
  <div class="rc-interactive-image">
    <div id="groomer-tooltip" class="rc-tooltip">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <button class="rc-btn rc-btn--action rc-icon rc-groomer--xs rc-brand3 rc-interactive-button rc-interactive-image__button" aria-label="Groomer" data-tooltip="groomer-tooltip" data-tooltip-placement="left" data-js-icon-button="" data-js-top="18%" data-js-right="" data-js-bottom="" data-js-left="52%">
      <span class="rc-screen-reader-text">Click interaction</span>
    </button>
    <div id="vet-tooltip" class="rc-tooltip">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <button class="rc-btn rc-btn--action rc-icon rc-vet--xs rc-brand3 rc-interactive-button rc-interactive-image__button" aria-label="Vet" data-tooltip="vet-tooltip" data-tooltip-placement="right" data-js-icon-button="" data-js-top="63%" data-js-right="30%" data-js-bottom="" data-js-left="">
      <span class="rc-screen-reader-text">Click interaction</span>
    </button>
    <div id="nutritional-tooltip" class="rc-tooltip">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <button class="rc-btn rc-btn--action rc-icon rc-nutritional--xs rc-brand3 rc-interactive-button rc-interactive-image__button" aria-label="Nutritional" data-tooltip="nutritional-tooltip" data-tooltip-placement="top" data-js-icon-button="" data-js-top="" data-js-right="" data-js-bottom="11%" data-js-left="17%">
      <span class="rc-screen-reader-text">Click interaction</span>
    </button>
  </div>
  <figcaption class="rc-screen-reader-text">Text about image</figcaption>
</figure>
        

Black and White

Black and white pet imagery should only be used in areas of significance where a brand message it to be promoted such as a promotion or carousel panel. Black and white imagery should be used sparingly so as not to dilute the power of the image.

Always include descriptive alternative text for screen readers
html
            <img class="img-border"  src="/assets/images/img-b-w.png" alt="Always include descriptive alternative text for screen readers" />

        

Article Imagery

Article imagery should be used for introducing and highlighting the content of an article. Article imagery should be relevant to the article and should adhere to the Royal Canin Anthropomorphism views where animals should be respected for what they are and not portrayed with any human characteristics.

Always include descriptive alternative text for screen readers
html
            <img class="img-border"  src="/assets/images/img-article-full.png" alt="Always include descriptive alternative text for screen readers" />

        

Pack Shots

Pack shots should always be displayed with a white background which sits on a grey container. Packshots will begin as portrait layout on mobile 2 column layout and should not be smaller than 140pt in width, ensuring the main pack writing is legible.

Always include descriptive alternative text for screen readers
html
            <img class="img-border"  src="/assets/images/img-pack.png" alt="Always include descriptive alternative text for screen readers" />

        

Round Image - Extra small

Pet's name
html
            <figure class="rc-img--round rc-img--round--xs" style="background-image: url(' https://placeholdit.imgix.net/~text?txtsize=75&txt=800%C3%97625&w=800&h=625 ')">
	<figcaption class="rc-screen-reader-text">Pet's name</figcaption>
</figure>
        

Round Image - Small

Pet's name
html
            <figure class="rc-img--round rc-img--round--sm" style="background-image: url(' https://placeholdit.imgix.net/~text?txtsize=75&txt=800%C3%97625&w=800&h=625 ')">
	<figcaption class="rc-screen-reader-text">Pet's name</figcaption>
</figure>
        

Round Image - Medium

Pet's name
html
            <figure class="rc-img--round rc-img--round--md" style="background-image: url(' https://placeholdit.imgix.net/~text?txtsize=75&txt=800%C3%97625&w=800&h=625 ')">
	<figcaption class="rc-screen-reader-text">Pet's name</figcaption>
</figure>
        

Round Image - Large

Pet's name
html
            <figure class="rc-img--round rc-img--round--lg" style="background-image: url(' https://placeholdit.imgix.net/~text?txtsize=75&txt=800%C3%97625&w=800&h=625 ')">
	<figcaption class="rc-screen-reader-text">Pet's name</figcaption>
</figure>
        

Issues

If you are having problems implementing this code, please submit an issue on our Github page.

Github Octocat

Feedback

If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

Slack logo

Changelog

  • 15th October 2018 [ui_assets/elements/media.yml]
    Add documentation for bg image posotion.
  • 2nd October 2018 [ui_assets/elements/media.yml]
    Add fixed ratio background example. Update class names.
  • 2nd October 2018 [ui_assets/elements/media.yml]
    Update classes in examples
  • 2nd October 2018 [ui_assets/elements/media.yml]
    Update image interactive and media page with new classes and examples
  • 13th September 2018 [ui_assets/elements/media.yml]
    Spelling/ grammar
  • 25th July 2018 [ui_assets/elements/media.yml]
    prefix bg-video-responsive
  • 25th July 2018 [ui_assets/elements/media.yml]
    prefix styled-link
  • 12th July 2018 [ui_assets/elements/media.yml]
    Prefixed classes throughout the portal with rc-.
  • 11th May 2018 [ui_assets/elements/media.yml]
    migrate all components from images page
  • 10th April 2018 [ui_assets/elements/media.yml]
    Fixed media page
  • 28th March 2018 [ui_assets/elements/media.yml]
    Media page grouping of media types and responsive versions. Added content block grouping. Improved look of builder page.
  • 27th March 2018 [ui_assets/elements/media.yml]
    Improved media examples.
  • 27th March 2018 [ui_assets/elements/media.yml]
    Added parallax for picture element example.
  • 27th March 2018 [ui_assets/elements/media.yml]
    Update the responsive video description in the portal.
  • 27th March 2018 [ui_assets/elements/media.yml]
    Updated example block name. Removed width restriction to give better usage example.
  • 27th March 2018 [ui_assets/elements/media.yml]
    Added responsive videos markup.
  • 23rd March 2018 [ui_assets/elements/media.yml]
    Removed one two layout options from content block. Added new picture element background image example.
  • 8th March 2018 [ui_assets/elements/media.yml]
    Ordered elements alpabetically
  • 19th February 2018 [ui_assets/elements/media.yml]
    Refactored to use new yaml library.
  • 4th February 2018 [ui_assets/elements/media.yml]
    Added link class to unstyled links
  • 18th January 2018 [ui_assets/elements/media.yml]
    Make media wrappers static to stop the content overflowing.
  • 19th December 2017 [ui_assets/elements/media.yml]
    Finished sentence in parallax media element documentation.
  • 19th December 2017 [ui_assets/elements/media.yml]
    Added template for builder page. Added configuration for content block builder page. Added new media types. Added import for cdn html beautify.
  • 14th December 2017 [ui_assets/elements/media.yml]
    Added media element page. Added paragraph filter to section intro text. Added alt tag to image examples. Added initial content block example.