Volver

Banner Internas(Hidroctecno)

Banner para las páginas secundarias, el cual tiene un título, un parágrafo y una imagen.

  1. Creamos en el cms los campos personalizados
  2. Llenamos la información correspondiente a los mismos en la página en la cual deben estar asociados.
  3. creamos el componente php en este caso banner-internal.php: Aquí vamos a definir primero la clase name la cual le asignamos el nombre principal del campo personalizado “banner-internal” luego con esta clase asignamos la clase principal del componente. Obtenemos los datos del campo principal con la función get_field(), si existen datos creamos la sección del componente, recorremos los datos del campo y con la función get_sub_field() obtenemos los datos de título, párrafo e imagen. Estos son renderizados usando las etiquetas que corresponden para cada caso.

 

1. Imagen de Fondo:Esta es la imagen que se utiliza como fondo del banner. Puede ser una fotografía, ilustración o gráfico relevante que complemente el propósito del banner y agregue un elemento visual atractivo.

2. Título:El título es un texto breve y hace referencia en este caso al nombre de la página en cuestión

3. Párrafo: El párrafo proporciona información adicional o detalles sobre el propósito del banner. Puede ser un texto descriptivo que complemente el título y puede estar o no en el componente.

Nota: el componente debe estar asociado al template de la página en cuestión.

Campos Personalizados

Internal banner

internal-banner

Layout/Group

Image

internal-banner__image

Content/Image

Title

internal-banner__title

Basic/Text

Paragraph

internal-banner__paragraph

Basic/Text Area

Archivos Usados

1.

banner-internal

PHP

wp-content/themes/depura_theme/components/banner-internal.php

Component

<?php
/*
Internal banner banner-internal
Group
---------------------------------------
    Title   banner-internal__title
    text
    -----------------------------------
    Paragraph   banner-internal__paragraph
    TextArea
    -----------------------------------
 */
$class_name = 'banner-internal';
$internal_banner = get_field($class_name);
if ($internal_banner) : ?>
    <section class="<?php echo $class_name; ?> p-0 co-white fade-in">
        <?php
        while (have_rows($class_name)) : the_row();
            $image = get_sub_field($class_name . '__image');
            $title = get_sub_field($class_name . '__title');
            $paragraph = get_sub_field($class_name . '__paragraph');
            ?>
            <figure class="<?php echo $class_name ?>__imagen m-0">
                <img class="m-0 w-100" src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']) ?>">
            </figure>
            <div class="<?php echo $class_name ?>__decorated m-0 position-absolute w-100 h-100 top-0">
                <div class="<?php echo $class_name ?>-content p-0 m-0">
                    <?php if ($title) : ?>
                        <h2 class="<?php echo $class_name ?>-content__title mb-4">
                            <?php echo $title; ?>
                        </h2>
                    <?php endif;
                    if ($paragraph) : ?>
                        <p class="<?php echo $class_name ?>-content__paragraph m-0">
                            <?php echo $paragraph; ?>
                        </p>
                    <?php endif ?>
                </div>
            </div>
        <?php endwhile; ?>
    </section>
<?php endif; ?>

 

2.

_banner-internal

SCSS

wp-content/themes/depura_theme/frontend/scss/theme/components/_banner-internal.scss

Block

.banner-internal {
position: relative;
&__imagen {
@includefluid-aspect(1617, “img”);
@includefrom(s) {
@includefluid-aspect(168, “img”);
}
@includefrom(m) {
@includefluid-aspect(165, “img”);
}
}
&__decorated {
background: linear-gradient(rgba(0, 7, 45, 0.4), rgba(0, 7, 45, 0.4));
}
&-content {
left: 5%;
max-width: rem(600px);
position: absolute;
z-index: 1;
@includecenter(‘vertical’);
&__title,
&__paragraph {
text-wrap: balance;
}
}
}

Anexos

Avatar

Autor

Elan Francisco P. Asprilla
Desarrollador Frontend

Artículos relacionados

Galería de Documentos (Palmas)

Este componente nos permite mostrar un conjunto...

Habilitar el campo de Archivo en los Webform Drupal

Para habilitar la funcionalidad de carga de...

Componente Values (Dts-solar)

Este componente representa una sección de...

¿Cómo añadir los principales tipos de campos en Drupal?

A continuación, veremos cómo mostrar los campos...