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

Class Name en WordPress.

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

Máquinas de Estado en React

Las máquinas de estado son un patrón de diseño...

Banner 50/50 (PALMAS)

¡Bienvenido al componente de banner interactivo...

Contactos (Palmas)

Componentes que muestra imagen de ubicación...