drowl_media-8.x-2.0-rc0/modules/drowl_media_types/templates/media--drowl-media-types--slide.html.twig
modules/drowl_media_types/templates/media--drowl-media-types--slide.html.twig
{#
/**
* @file
* Theme override to display a media item.
*
* Available variables:
* - name: Name of the media.
* - content: Media content.
*
* @see template_preprocess_media()
*
* @ingroup themeable
*/
#}
{# Overridable Configuration #}
{% set button_fallback_color = 'dark' %}
{% set limited_media_width_container_class = 'container-lg' %}
{% set limited_overlay_width_container_class = 'container-lg' %}
{% set media_wrapper_utility_classes = [] %}
{% set overlay_wrapper_utility_classes = ['p-4'] %}
{% set overlay_bg_layer_utility_classes = [] %}
{% set overlay_position_wrapper_utility_classes = [] %}
{% set overlay_box_utility_classes = [
'p-3',
'lh-sm',
'shadow-sm',
'rounded-2'
] %}
{# Prepare technical variables #}
{% set has_image = content.field_media_image.0 %}
{% set has_video = content.field_media_video.0 %}
{% set is_animated = media.field_image_animation.0 %}
{# Dont crop the image => switches to a scale responsive image preset and sets a formatter class #}
{% set no_crop = media.field_image_scale_only.value|default(false) %}
{# Limit contents to grid-container? #}
{% set overlay_page_width_limit = true %}
{% set media_page_width_limit = media.field_image_page_width.value|default(true) %}
{# Stretch overlay to 100% width & height #}
{% set full_size_overlay = media.field_overlay_sizing.value == 'full-size' %}
{% set full_size_overlay_md = media.field_overlay_sizing_md.value == 'full-size' %}
{% set full_size_overlay_lg = media.field_overlay_sizing_lg.value == 'full-size' %}
{% set overlay_color_scheme = media.field_overlay_display.value %}
{# Define Drupal Attributes #}
{% set overlay_wrapper_attributes = create_attribute() %}
{% set overlay_bg_layer_attributes = create_attribute() %}
{% set overlay_box_attributes = create_attribute() %}
{% set overlay_position_wrapper_attributes = create_attribute() %}
{# Prepare (Bootstrap flex classes for the overlay position) #}
{% macro get_flex_classes_from_position_names(value) %}
{% set position = value|split('-') %}
{% set position = position|map(item => item|replace({
'top': 'start',
'bottom': 'end',
'middle': 'center',
'left': 'start',
'right': 'end'
})) %}
{{- position[0] ~ '-' ~ position[1] -}}
{% endmacro %}
{% set overlay_position_sm = 'start center' %}
{% set overlay_position_md = '' %}
{% set overlay_position_lg = '' %}
{% if media.field_overlay_position.value %}
{% set overlay_position_sm = _self.get_flex_classes_from_position_names(media.field_overlay_position.value)|replace({' ': ''})|split('-') %}
{% endif %}
{% if media.field_overlay_position_md.value %}
{% set overlay_position_md = _self.get_flex_classes_from_position_names(media.field_overlay_position_md.value)|replace({' ': ''})|split('-') %}
{% endif %}
{% if media.field_overlay_position_lg.value %}
{% set overlay_position_lg = _self.get_flex_classes_from_position_names(media.field_overlay_position_lg.value)|replace({' ': ''})|split('-') %}
{% endif %}
{# Prepare media wrapper attributes #}
{% set media_wrapper_attributes = create_attribute() %}
{% set media_wrapper_id = 'media-wrapper--' ~ random() %}
{# Prepare link & button #}
{% set target_url = content.field_overlay_link_button.0['#url'] %}
{% set target_url_is_external = content.field_overlay_link_button.0['#options'].external %}
{% set link_label = content.field_overlay_link_button.0['#title'] %}
{#
Remove padding+l+r if 'limit media width to page-width'-option
is set (prevent double padding)
#}
{% if media_page_width_limit %}
{% set overlay_wrapper_attributes = overlay_wrapper_attributes.addClass(['ps-0', 'pe-0']) %}
{% endif %}
{% block media_slide %}
{% set media_image %}
{% block media_image %}
{# Switch responsive image preset if scale only #}
{% if has_image %}
{% if no_crop and (content.field_media_image.0['#item'].entity.uri.value) %}
{#
If "no_crop" is enabled, we have to overwrite the field formatter
to use "*_scale" responsive_image_style's. Otherwise we'd need
two more view modes for the media entity just for that.
#}
{% if view_mode == 'viewport_width' %}
{{ drupal_field('field_media_image', 'media', media.id(), {type: 'responsive_image', settings: {responsive_image_style: 'viewport_width_scale'}})|field_value }}
{% else %}
{{ drupal_field('field_media_image', 'media', media.id(), {type: 'responsive_image', settings: {responsive_image_style: 'page_width_scale'}})|field_value }}
{% endif %}
{% else %}
{# In other cases we can just render the field configured in the view mode: #}
{{ content.field_media_image }}
{% endif %}
{% endif %}
{% endblock media_image %}
{% endset %}
{% set media_video %}
{% block media_video %}
{{ content.field_media_video|field_value }}
{% endblock media_video %}
{% endset %}
{% set media_wrapper %}
{% set button_color = media.field_overlay_button_color.value|default(button_fallback_color) %}
{% block media_wrapper %}
{%
set media_wrapper_classes = [
'media-slide__media',
is_animated ? 'media-slide__media--animated',
has_video ? 'media-slide__media--video' : 'media-slide__media--image',
media_page_width_limit ? limited_media_width_container_class
]|merge(media_wrapper_utility_classes)
%}
{% if is_animated %}
{% set media_wrapper_attributes = media_wrapper_attributes.setAttribute('data-media-animation', media.field_image_animation.value|clean_class) %}
{% endif %}
<div{{ media_wrapper_attributes.addClass(media_wrapper_classes).setAttribute('id', media_wrapper_id) }}>
{% if is_animated %}
{#
Add animation wrapper to prevent overflowing animated media elements (image/video).
Furthermore set a fixed aspect ratio on this wrapper if the no_crop option is set.
#}
<div
class="animation-wrapper{% if no_crop %} animation-wrapper--fixed-ratio{% endif %}"
{% if no_crop and not has_video %} style="aspect-ratio: {{ content.field_media_image.0['#item'].width }}/{{ content.field_media_image.0['#item'].height }}"{% endif %}
>
{% endif %}
{# If a video is available, the image is just used as background image (see media-slide__video-background-image) #}
{% if has_video %}
{{ media_video }}
{% else %}
{{ media_image }}
{% endif %}
{% if is_animated %}
</div>
{% endif %}
{% block overlay_link %}
{# Overlay link (if no text overlay is set AND it's not an video, link the whole image) #}
{% if (target_url is not empty and (overlay_rendered is not real_content) and (not has_video)) %}
{% if target_url_is_external == true %}
{% set link_attributes = { 'class':['media-slide__overlay-link'], 'title': 'See Details'|t, 'target': '_blank' } %}
{% else %}
{% set link_attributes = { 'class':['media-slide__overlay-link'], 'title': 'See Details'|t } %}
{% endif %}
{{
link(
link_label,
target_url,
link_attributes
)
}}
{% endif %}
{% endblock overlay_link %}
</div>
{% endblock media_wrapper %}
{% endset %}
{% set overlay %}
{%
set overlay_wrapper_classes = [
'media-slide__overlay-wrapper',
full_size_overlay ? 'media-slide__overlay-wrapper--sm-full-size',
full_size_overlay_md ? 'media-slide__overlay-wrapper--md-full-size',
full_size_overlay_lg ? 'media-slide__overlay-wrapper--lg-full-size',
'text-bg-' ~ media.field_overlay_display.value|clean_class,
overlay_position_sm[0] == 'disabled' ? 'd-none',
(overlay_position_md[0] and overlay_position_md[0] == 'disabled') ? 'd-md-none',
(overlay_position_md[0] and overlay_position_md[0] != 'disabled') ? 'd-md-block',
(overlay_position_lg[0] and overlay_position_lg[0] == 'disabled') ? 'd-lg-none',
(overlay_position_lg[0] and overlay_position_lg[0] != 'disabled') ? 'd-lg-block',
]|merge(overlay_wrapper_utility_classes)
%}
{% block overlay_wrapper %}
<div{{overlay_wrapper_attributes.addClass(overlay_wrapper_classes)}}>
{% block overlay_position_wrapper %}
{#
Possible Overlay-Position Values:
- SM: disabled, all positions, but never 'unset'
- MD: unset (=> inherit from SM), disabled, positions
- LG: unset (=> inherit from SM/MD), disabled, positions
#}
{# Important: The 'disabled' classes / logic need to match the one from overlay_bg_layer_classes! #}
{%
set overlay_position_wrapper_classes = [
'media-slide__position-wrapper',
overlay_position_sm[0] != 'disabled' ? 'align-items-' ~ overlay_position_sm[0],
overlay_position_sm[0] != 'disabled' ? 'justify-content-' ~ overlay_position_sm[1],
(overlay_position_md[0] and overlay_position_md[0] != 'disabled') ? 'align-items-md-' ~ overlay_position_md[0],
(overlay_position_md[0] and overlay_position_md[0] != 'disabled' and overlay_position_md[1]) ? 'justify-content-md-' ~ overlay_position_md[1],
(overlay_position_lg[0] and overlay_position_lg[0] != 'disabled') ? 'align-items-lg-' ~ overlay_position_lg[0],
(overlay_position_lg[0] and overlay_position_lg[0] != 'disabled' and overlay_position_lg[1]) ? 'justify-content-lg-' ~ overlay_position_lg[1],
overlay_page_width_limit ? limited_overlay_width_container_class,
]|merge(overlay_position_wrapper_utility_classes)
%}
<div{{ overlay_position_wrapper_attributes.addClass(overlay_position_wrapper_classes) }}>
{% block overlay_box %}
{%
set overlay_box_classes = [
'media-slide__overlay-box',
full_size_overlay ? 'media-slide__overlay-box--sm-full-size' : 'media-slide__overlay-box--sm-box-size',
full_size_overlay_md ? 'media-slide__overlay-box--md-full-size' : 'media-slide__overlay-box--md-box-size',
full_size_overlay_lg ? 'media-slide__overlay-box--lg-full-size' : 'media-slide__overlay-box--lg-box-size',
'text-bg-' ~ media.field_overlay_display.value|clean_class,
no_crop ? 'collapse',
no_crop ? 'show'
]|merge(overlay_box_utility_classes)
%}
<div{{ overlay_box_attributes.setAttribute('id', 'overlay-box-' ~ media.id()).addClass(overlay_box_classes) }}>
{% include "@drowl_media_types/inc/__unpublished_label.html.twig" %}
{% if no_crop %}
{#
Considering the no_crop-option is used for images, which contents should be fully
visible (images with text, ...), we allow to close the overlay.
#}
{% block media_overlay_box_close_button %}
<button class="media-slide__overlay-box__close m-0 btn btn-sm {{ 'btn-outline-' ~ button_color }}" aria-label="{{ 'Close overlay'|t }}" type="button" data-bs-toggle="collapse" data-bs-target="#{{ 'overlay-box-' ~ media.id() }}" aria-expanded="true" aria-controls="{{ 'overlay-box-' ~ media.id() }}">
<i class="ico ico-remove" aria-hidden="true"></i>
</button>
{% endblock %}
{% endif %}
{% block overlay_title %}
{# Show warning if the overlay color settings result in an overlay which hides the media entirely. #}
{% if user.hasPermission('administer nodes') and 'transparent' not in media.field_overlay_display.value and 'glass' not in media.field_overlay_display.value and (full_size_overlay or full_size_overlay_md or full_size_overlay_lg) %}
{%
include 'radix:alert' with {
type: 'warning',
icon_classes: ['ico', drowl_theme_icons.warning],
heading: 'Attention'|t,
dismissible: true,
alert_utility_classes: ['mb-4'],
content: 'This Hero/Slide is configured to use a full sized overlay, but also has a solid (none transparent) background color. This means the background image/video will never be visible.'|t
}
%}
{% endif %}
{% if(content.field_title.0) %}
<div class="media-slide__title mt-0 lh-sm {% if(content.field_subtitle.0) %} has-subline{% endif %}">
{{ content.field_title }}
</div>
{% endif %}
{% endblock overlay_title %}
{% block overlay_subtitle %}
{% if(content.field_subtitle.0) %}
<div class="media-slide__subline subline{% if 'dark' in media.field_overlay_display.value %} subline--light{% else %} subline--dark{% endif %}">
{{ content.field_subtitle|field_value }}
</div>
{% endif %}
{% endblock overlay_subtitle %}
{% block overlay_caption %}
{% if(content.field_caption.0) %}
<div class="media-slide__text fs-md lh-sm">
{{ content.field_caption|field_value }}
</div>
{% endif %}
{% endblock overlay_caption %}
{% block overlay_button_outer %}
{% if target_url is not empty %}
{% set button_classes = [
'btn',
button_style != 'hollow' and button_color ? ('btn-' ~ button_color)|clean_class,
button_style == 'hollow' and button_color ? ('btn-outline-' ~ button_color)|clean_class,
(not button_color) and button_style == 'hollow' ? 'btn-outline-dark',
'mt-3'
] %}
{% block overlay_button %}
{% if target_url_is_external == true %}
{% set button_link_attributes = { 'class':button_classes, 'target': '_blank' } %}
{% else %}
{% set button_link_attributes = { 'class':button_classes } %}
{% endif %}
{% if link_label == target_url.toString %}
{# Drupal's link field set the url as label if no custom label is set by the user - override this behavior #}
{% set link_label = 'read on'|t %}
{% endif %}
{{-
link(
link_label,
target_url,
button_link_attributes
)
-}}
{% endblock overlay_button %}
{% endif %}
{% endblock overlay_button_outer %}
</div>
{% endblock overlay_box %}
</div>
{% endblock %}
</div>
{% endblock overlay_wrapper %}
{#
To prevent z-index problems we need to seperate the coloring overlay from the overlay_wrapper.
This is basically requried if the media wrapper needs to be over the overlay wrapper (if the media slide has a foreground video).
#}
{# Important: The 'disabled' classes / logic need to match the one from overlay_position_wrapper_classes! #}
{%
set overlay_bg_layer_classes = [
'media-slide__overlay-bg-layer',
full_size_overlay ? 'media-slide__overlay-bg-layer--sm-full-size',
full_size_overlay_md ? 'media-slide__overlay-bg-layer--md-full-size',
full_size_overlay_lg ? 'media-slide__overlay-bg-layer--lg-full-size',
'text-bg-' ~ media.field_overlay_display.value|clean_class,
overlay_position_sm[0] == 'disabled' ? 'd-none',
(overlay_position_md[0] and overlay_position_md[0] == 'disabled') ? 'd-md-none',
(overlay_position_md[0] and overlay_position_md[0] != 'disabled') ? 'd-md-block',
(overlay_position_lg[0] and overlay_position_lg[0] == 'disabled') ? 'd-lg-none',
(overlay_position_lg[0] and overlay_position_lg[0] != 'disabled') ? 'd-lg-block',
]|merge(overlay_bg_layer_utility_classes)
%}
{% block overlay_bg_layer %}
<div {{ overlay_bg_layer_attributes.addClass(overlay_bg_layer_classes) }}></div>
{% endblock %}
{% endset %}
{% set overlay_rendered = overlay|render %}
{# ====================================================== #}
{# ======================= Output ======================= #}
{# ====================================================== #}
{%
set slide_classes = [
'media-slide',
has_video ? 'media-slide--video',
no_crop ? 'media-slide--media-size-original',
has_image and media.field_image_page_width.value == 1 ? 'media-slide--img-grid-container',
has_image and has_video and media.field_image_page_width.value == 1 ? 'media-slide--video-on-background',
'text-bg-' ~ media.field_overlay_display.value|clean_class,
]
%}
{% block slide_wrapper %}
{#
Remove padding+l+r if 'limit media width to page-width'-option
is set (prevent double padding)
#}
{% if media_page_width_limit %}
{% set overlay_wrapper_attributes = overlay_wrapper_attributes.addClass(['ps-0', 'pe-0']) %}
{% endif %}
{% if content %}
<div{{ attributes.addClass(slide_classes) }}>
{{ title_suffix.contextual_links }}
{% if has_video and has_image %}
{# Print video background image if video & image present #}
<div class="media-slide__video-background-image">
{{ media_image }}
</div>
{% endif %}
{% if overlay_rendered is real_content %}
{# Image or Video with overlay #}
{{ overlay_rendered|raw }}
{# Print image #}
{% block media_wrapper_with_overlay %}
{{ media_wrapper }}
{% endblock media_wrapper_with_overlay %}
{% else %}
{# Image or Video without overlay #}
{% block media_wrapper_without_overlay %}
{{ media_wrapper }}
{% endblock media_wrapper_without_overlay %}
{% endif %}
</div>
{% endif %}
{% endblock slide_wrapper %}
{% endblock media_slide %}
