Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save megclaypool/1658780333e0d607adb509b80270480d to your computer and use it in GitHub Desktop.
Save megclaypool/1658780333e0d607adb509b80270480d to your computer and use it in GitHub Desktop.

The basic plan:

{% set imagePath = 'public://images/default.jpg' %}
{% set responsiveimagestyle = {
    '#theme': 'responsive_image',
    '#responsive_image_style_id': 'my_responsive_image_style_id',
    '#uri': imagePath,
    '#alt': 'my alt text',
    '#attributes': { class: 'img-responsive', alt: 'my alt text' },
} %}

{{ responsiveimagestyle }}

Note: You need to get the URL for your image from the media entity

Example in use:

{% set responsiveImage = {
  '#theme': 'responsive_image',
  '#responsive_image_style_id': '16_9_half_width',
  '#uri': node.field_image
`.entity.field_media_image.entity.uri.value,`
  '#alt': node.field_image.entity.field_media_image.alt,
  '#attributes': {
    class: 'card__image',
    alt:  node.field_image.entity.field_media_image.alt,
    itemprop: 'url contentUrl',
    loading: 'lazy'
  }
} %}
{{ responsiveImage }}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment