¡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:
- 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.
- 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.
- 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
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.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;
}
}
}