En el presente post encontrarás todo lo que necesitas para crear un banner parallax en el CMS de Drupal
Campos Personalizados
Banner Parallax
banner_parallax
(Block)
Body
body
Texto/Texto (con formato, largo, con resumen)
Documento
field_document
Referencia/Multimedia/Documento
Imagen
field_image
Referencia/Multimedia/Imagen
Link
field_link
General/Enlace
Archivos Usados
1.
block--inline-block--banner-parallax.html.twig
Twig
templates/blocks/
Block
block--inline-block--banner-parallax.html.twig
Twig
templates/blocks/
Block
{#
/**
* @file
* Theme override to display a block.
*
* Available variables:
* - plugin_id: The ID of the block implementation.
* - label: The configured label of the block if visible.
* - configuration: A list of the block's configuration values.
* - label: The configured label for the block.
* - label_display: The display settings for the label.
* - provider: The module or other provider that provided this block plugin.
* - Block plugin specific settings will also be stored here.
* - in_preview: Whether the plugin is being rendered in preview mode.
* - content: The content of this block.
* - attributes: array of HTML attributes populated by modules, intended to
* be added to the main container tag of this template.
* - id: A valid HTML ID and guaranteed unique.
* - title_attributes: Same as attributes, except applied to the main title
* tag that appears in the template.
* - title_prefix: Additional output populated by modules, intended to be
* displayed in front of the main title tag that appears in the template.
* - title_suffix: Additional output populated by modules, intended to be
* displayed after the main title tag that appears in the template.
*
* @see template_preprocess_block()
*/
#}
{% set class_block = 'banner-parallax' %}
{%
set classes = [
'block',
'block-' ~ configuration.provider|clean_class,
'block-' ~ plugin_id|clean_class,
'section-padding co-white',
class_block,
]
%}
{% block content %}
{% set body = content.body[0] %}
{% set image_url = file_url(content.field_image[0]['#media'].field_media_image.entity.uri.value) %}
{% set image_alt = content.field_image[0]['#media'].field_media_image.alt %}
{% set link_text = content.field_link[0]['#title'] %}
{% set link_url = content.field_link[0]['#url'] %}
<section {{ attributes.addClass(classes) }} style="background-image: url({{image_url}});">
<div class="{{class_block}}__content transition-parallax-content">
<div class="container">
{{ title_prefix }}
{% if label %}
<header class="{{class_block}}__title text-center mb-5">
<h2{{ title_attributes }}>{{ label }}</h2>
</header>
{% endif %}
{{ title_suffix }}
{% if body %}
<div class="{{class_block}}__body mb-5">
{{body}}
</div>
{% endif %}
{% if link_url %}
<div class="{{class_block}}__cta text-center d-flex justify-content-center">
<a href="{{link_url}}" class="button-primary" target="{{'pdf' in link_url|render|trim ? '_blank' : '_self'}}">
{{ link_text }}
</a>
</div>
{% endif %}
</div>
</div>
</section>
{% endblock %}
2.
_banner-parallax.scss
SCSS
frontend/scss/theme/components/
Styles
_banner-parallax.scss
SCSS
frontend/scss/theme/components/
Styles
.banner-parallax {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: space(4) 0;
&__content {
padding: 0 space(.5);
@include from(m){
padding: 0;
}
}
&__body {
& > * {
margin-bottom: space(1);
text-align: center;
}
}
}