{#
/**
 * Image
 *
 * An image is a two-dimensional slice of paradise.
 *
 * @var string $img_src The URL of the image.
 * @var string $img_alt The alt text for the image.
 * @var string $img_link_url Optional URL if this image should be wrapped in a link.
 * @var bool $blurred If true, the bottom portion of the image will be blurred. This requires that the image width is 100% of its container, and that the container has `position: relative` or similar.
 * @var Drupal\Core\Template\Attribute $attributes Attributes (class, style etc.) for the image.
 * @var Drupal\Core\Template\Attribute $link_attributes Attributes (class, target, etc.) for the link.
 */
#}
{# Image #}
{% set img_alt = img_alt|default('Accessibility text goes here and is required') %}

{# Attributes #}
{% set link_attributes = union_attributes(link_attributes|default([])) %}
{% set attributes = union_attributes(attributes|default([])) %}
{% set attributes = attributes.addClass('cu-image').setAttribute('src', img_src).setAttribute('alt', img_alt) %}

{# Output #}
{% if img_link_url %}
  <a href="{{ img_link_url }}" {{ link_attributes.addClass('cu-image__link') }}>
    <img {{ attributes }} />
  </a>
{% else %}
  <img {{ attributes }} />
{% endif %}

{% if blurred %}
<div class="cu-image--blurred" style="--cu-bg-image: url({{ img_src }})"></div>
{% endif %}