Add a background to take the place of an image if none

This commit is contained in:
benjamin melançon 2019-09-22 19:23:35 -04:00
parent 45ab938c9b
commit 7576c2457a
2 changed files with 80 additions and 0 deletions

View file

@ -37,3 +37,8 @@
.content.no-featured-image { .content.no-featured-image {
margin-top: 6rem; margin-top: 6rem;
} }
.background-replacement-for-no-image {
height: 12rem;
background-color: cadetblue;
}

View file

@ -0,0 +1,75 @@
{#
/**
* @file
* Display Suite 2 column stacked template.
*
* Available variables:
* - outer_wrapper: outer wrapper element
* - header_wrapper: wrapper element around header region
* - left_wrapper: wrapper element around left region
* - right_wrapper: wrapper element around right region
* - footer_wrapper: wrapper element around footer region
* - attributes: layout attributes
* - header_attributes: attributes for header region
* - left_attributes: attributes for left region
* - right_attributes: attributes for right region
* - footer_attributes: attributes for footer region
* - header: content of header region
* - left: content of left region
* - right: content of right region
* - footer: content of footer region
*/
#}
{% set attributes = attributes.addClass('columns is-multiline') %}
{%
set header_classes = [
'column',
'is-12'
]
%}
{% set header_attributes = header_attributes.addClass(header_classes) %}
{%
set left_classes = [
'column',
'is-3'
]
%}
{% set left_attributes = left_attributes.addClass(left_classes) %}
{%
set right_classes = [
'column',
'is-9'
]
%}
{% set right_attributes = right_attributes.addClass(right_classes) %}
{%
set footer_classes = [
'column',
'is-12'
]
%}
{% set footer_attributes = footer_attributes.addClass(footer_classes) %}
<{{ outer_wrapper }}{{ attributes.addClass('ds-2col-stacked', 'clearfix') }}>
{{ title_suffix.contextual_links }}
<{{ header_wrapper }}{{ header_attributes.addClass('group-header') }}>
{% if header.field_image|render is empty %}
<div class="background-replacement-for-no-image"></div>
{% endif %}
{{ header }}
</{{ header_wrapper }}>
<{{ left_wrapper }}{{ left_attributes.addClass('group-left') }}>
{{ left }}
</{{ left_wrapper }}>
<{{ right_wrapper }}{{ right_attributes.addClass('group-right') }}>
{{ right }}
</{{ right_wrapper }}>
<{{ footer_wrapper }}{{ footer_attributes.addClass('group-footer') }}>
{{ footer }}
</{{ footer_wrapper }}>
</{{ outer_wrapper }}>