Picture

Our implementation of the responsive <picture> element.

Content Picture Component

Used where the image will only ever be as wide as the main content width (meaning .row__inner ).

= ui_component('picture/content', properties: { alt: "Foo", src: "https://media.lonelyplanet.com/a/g/hi/t/2efbfec4e203d6e47bb609bd9f016f82-adventure-travel.jpg" })

Hero Picture Component

Used where the image needs to be able to go the full width of the screen, such as the Hero Banner for example.

= ui_component('picture/hero', properties: { alt: "Foo", class: "hero-banner__image", src: "https://media.lonelyplanet.com/a/g/hi/t/2efbfec4e203d6e47bb609bd9f016f82-adventure-travel.jpg" })

Base Picture Component

This will output the base picture element that the above pre-existing (and opinionated) components themselves use. Only use this if you've determined that you do actually need to use the picture element for what you're trying to achieve and when one of the above don't suffice.

sizes defines the sizes that will be used by the picture element. For more information on how these work, refer to the ImageResizer gem .

breakpoints defines the breakpoints beyond which to update the image url, along with the new sizes as mentioned above.

NOTE: While this base component does provide fallbacks, it's recommended that you specify all the properties for your specific use case.

Foo
= ui_component('picture', properties: {as_below} )
{
  alt: "Foo",
  src: "https://media.lonelyplanet.com/a/g/hi/t/2efbfec4e203d6e47bb609bd9f016f82-adventure-travel.jpg",
  retina: true,
  size: {
    resize: {
      width: 288.0
    }
  },
  breakpoints: [
    {
      resize: {
        width: 1197.0
      }
    },
    {
      resize: {
        width: 894.0
      }
    },
    {
      resize: {
        width: 591.0
      }
    }
  ]
}