We have a need to use the Responsive Image module. The key is that we want to be able to use the image (field_image) field with Responsive Image styles as a background and put the node's title on top of them.
How can we achieve this?
We have tried the following but this only fetches the original photo in a twig template. In other words, when i use Chrome Dev tools to see if it fetched the other images as part of the Responsive Image style settings, it does not fetch them.
<div class="wrapper">
<div class="wrapper__image" style="background-image: url('{{file_url(content.field_image.0['#item'].entity.uri.value)}}>
</div>
<div class="wrapper__content"> {# title goes here #} </div>
</div>
Currently we are using the out of the box Responsive Image twig template
{% if output_image_tag %}
{{ img_element }}
{% else %}
<picture>
{% if sources %}
{#
Internet Explorer 9 doesn't recognise source elements that are wrapped in
picture tags. See http://scottjehl.github.io/picturefill/#ie9
#}
<!--[if IE 9]><video style="display: none;"><![endif]-->
{% for source_attributes in sources %}
<source{{ source_attributes }}/>
{% endfor %}
<!--[if IE 9]></video><![endif]-->
{% endif %}
{# The controlling image, with the fallback image in srcset. #}
{{ img_element }}
</picture>
{% endif %}
position: absolute
image & title. I don't believe thepicture
element of thesrcset
is supported in CSS or anything of the like.file_url(content.field_image.0['#item'].entity.uri.value) | image_style('responsive_style')
. Installing the module "Twig Tweak" makes this filter available. I wonder if Drupal would replace the image as long as that filter was applied??