Add support for media reference fields

I was not able to get #6 to work entirely for paragraphs (works great for page headers where there is a single target selector), and really wanted the responsive background image to be applied to the outer paragraph div itself, rather than the media item.

Here's what works for me...

I followed the steps in #6 but I did not alter the media.html.twig file. Instead, I use the Twig template for the paragraph, where I am already setting some other, unrelated classes. In that Twig template, I added:

{# get paragraph background image media entity ID and set as class #}
{% if content.field_component_background_image|render %}
  {% set item = content.field_component_background_image['#items'][0] %}
  {% set bgimage_classes = ["bg-container-" ~ item.entity.id] %}
{% endif %}

{# Sets Paragraph type, view mode, and ID as classes #}
{%
set classes = [
'paragraph',
'paragraph--type--' ~ paragraph.bundle|clean_class,
view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
'paragraph--id--' ~ paragraph.id.value,
]
%}

{# Merges paragraph background image media entity ID with classes. #}
{% set bgimage_field = content.field_component_background_image|render %}
{% if bgimage_field %}
  {% set classes = classes|merge(bgimage_classes) %}
{% endif %}

{# Prints div with classes and contents of field_copy #}
<div{{ attributes.addClass(classes) }}>

{# YOUR CONTENT HERE #}
{% if content.field_copy|render %}
  {{ content.field_copy }}
{% endif %}

</div>

@alex.verhoeven - you almost have it. All you need to do is add an open and close parentheses after id. So you code should be

{% set bgimage_classes = ["bg-container-" ~ item.entity.id()] %}

Thanks to sourabhsisodia_ → multivalue media reference fields are working with this module. For the media field 'Display', select the Formatter 'Rendered Entity'. And then the Formatter of 'Background Image' or 'Responsive Background Image' can be selected for the rendered entity under the 'Display' for the media type of image (Structure->Media Types->Image->Manage Display).

For more information see issue Multivalue field not working for Media items →