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

Core de css con TailwindCSS

Nuevo core de css que vamos a usar para todos...

Banner Parallax (PALMAS)

En el presente post encontrarás todo lo que...

Banner de ancho total (Palmas)

En este banner se muestra una imagen, que se...

¿Cómo activar Layout builder?

Para activar la opción para agregar los campos...