Volver

Banner Parallax (PALMAS)

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

{#
/**
* @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 {
  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;
    }
  }
}

 

Avatar

Autor

Elan Francisco P. Asprilla
Desarrollador Frontend

Artículos relacionados

¿Cómo mostrar los paragraph en drupal?

Antes de leer este contenido, deberías haber...

Tipo de componente Artículos (Tipo de Noticia, Tipo de Proyectos)

En este artículo encontrarás los campos para el...

Contactos (Palmas)

Componentes que muestra imagen de ubicación...

Class Name en WordPress.

Con el fin de darle orden y tener más facilidad...