Volver

Banner 50/50 (PALMAS)

¡Bienvenido al componente de banner interactivo de nuestro sitio web de desarrollo de software con Drupal! Este versátil banner te permite destacar información importante con estilo y personalización.

Características Principales:

  1. Diseño Dividido:
    • El banner se divide en dos secciones equitativas: una para texto y otra para imagen.
    • Esta disposición equilibrada asegura una presentación armoniosa de la información.
  2. Flexibilidad en la disposición:
    • ¡La creatividad es clave! Puedes invertir fácilmente la disposición del banner según tus necesidades.
    • ¿Quieres que la imagen esté a la izquierda y el texto a la derecha? ¡No hay problema! ¿O tal vez al revés? También es posible.
  3. Personalización del Color de Fondo:
    • No hay necesidad de quedarse con un color aburrido. Puedes elegir el color de fondo que mejor se adapte a tu marca o diseño.
    • Desde tonos vibrantes hasta tonos sutiles, las posibilidades son infinitas.

Campos Personalizados

Banner 50/50

banner_50_50

(Block)

Body

body

Texto/Texto (con formato, largo, con resumen)

Foto a la derecha

field_is_right_photo

General/Booleano

Imagen

field_image

Referencia/Multimedia/Imagen

Link

field_link

General/Enlace

Link Adicional

field_additional_link

General/Enlace

Variación de color

field_color_variation

Texto/Lista (de texto)

Archivos Usados

1.

block--banner-50-50.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-50' %}

{%
  set classes = [
    'block',
    'block-' ~ configuration.provider|clean_class,
    'block-' ~ plugin_id|clean_class,
    class_block,
  ]
%}

{% set is_right_photo = "1" in content.field_is_right_photo[0] %}
{% 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'] %}
{% set additional_link = content.field_additional_link[0]['#url'] %}
{% set additional_link_text = content.field_additional_link[0]['#title'] %}
{% set color_variation = content.field_color_variation['#items'].value %}


{% if color_variation %}
  {% set class_variation = class_block ~ "--bg-" ~ color_variation %}
  {% if color_variation != 'white' and color_variation != 'alabaster' and color_variation != 'yellow' and color_variation != 'clean' %}
    {% set class_variation = class_variation ~ " co-white" %}
  {% endif %}
{% endif %}

<section {{ attributes.addClass(classes, class_variation) }}>
  <div class="{{class_block}}__wrapper {% if color_variation == 'white' or color_variation == 'alabaster' %} container section-padding{% endif %}">
    <div class="row g-0">
      <div class="col-md-6{% if is_right_photo %} order-md-2{% endif %}">
        {% if color_variation == 'white' or color_variation == 'alabaster'%}
          {% set class_variation_image = " corner-m" %}
        {% endif %}
        <div class="{{class_block}}__image h-100">
          <img class="w-100 h-100{{class_variation_image}}" src="{{ image_url }}" alt="{{ image_alt }}" class="w-100">
        </div>
      </div>
      <div class="col-md-6{% if is_right_photo %} order-md-1{% endif %}">
        <div class="{{class_block}}__content h-100 d-flex align-items-center">
          <div class="{{class_block}}__content-inner transition-scroll">
            {{ title_prefix }}
            {% if label %}
              <h2 class="{{class_block}}__title mb-4" {{ title_attributes }}>
                {{ label }}
              </h2>
            {% endif %}
            {{ title_suffix }}
            {% block content %}
              <div class="{{class_block}}__content-body mb-5">
                {{ body }}
              </div>
              <div class="{{class_block}}__content-links d-flex flex-wrap">
                {% if link_url %}
                  <div class="{{class_block}}__link me-3 mb-3">
                    <a class="button-primary" href="{{ link_url }}" target="{{'pdf' in link_url|render|trim ? '_blank' : '_self'}}">{{ link_text }}
                    </a>
                  </div>
                {% endif %}
                {% if additional_link %}
                  <div class="{{class_block}}__link">
                    <a class="button-primary--vr" href="{{ additional_link }}"
                      target="{{'pdf' in additional_link|render|trim ? '_blank' : '_self'}}">
                      {{ additional_link_text }}
                    </a>
                  </div>
                {% endif %}
              </div>
            {% endblock %}
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

 

2.

_banner-50.scss

SCSS

frontend/scss/theme/components/

Styles

.banner-50 {
  &__image {
    img{
      object-fit: cover;
    }
  }
  &__content {
    padding: space(2) space(1);

    @include from(s){
      padding: space(2);
    }

    @include from(l){
      padding: space(2)!important;
      padding-left: space(3) !important;
    }
  }
}

 

Avatar

Autor

Elan Francisco P. Asprilla
Desarrollador Frontend

Artículos relacionados

Bloque básico (Sanitex)

Un bloque básico contiene un título y un...

Cómo crear un filtro Ajax Word Press

Con el siguiente instructivo veremos cómo crear...

¿Cómo cambiar las imágenes de un producto Hesense?

Para cambiar las imágenes de productos en...