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()] %}