condicional

Corregir Drupal ~10.0 and TWIG ~3.0 Unexpected token name of value if (end of statement block expected)

webmaster — Mon, 15 May 2023 09:05:54 +0000

Corregir Drupal ~10.0 and TWIG ~3.0 Unexpected token name of value if (end of statement block expected)

Descripción

Si estás tratando de implementar algún carrusel para Drupal 10, siguiendo ejemplos que haz encontrado en internet, esto te ayudará a corregirlo.

webmaster Lun, 15/05/2023 - 11:05

Instrucciones

Si el código que intentas implementar, es parecido a este:

    {# We repeat the loop for the carousel items. #}
    <div class="carousel-inner" role="list">
      {% for key, item in items if key|first != '#' %}
        <div class="featured-image__slide-{{ key + 1 }} item{% if loop.first %} active{% endif %}" role="listitem">{{ item.content }}</div>
      {% endfor %}
    </div>

La solución, es sacar la parte del if, fuera de la declaración inicial del for...

 {# We repeat the loop for the carousel items. #} 
   <div class="carousel-inner" role="list"> 
    {% for key, item in items if key|first != '#' %}
     {% if key|first != '#' %} 
      <div class="featured-image__slide-{{ key + 1 }} item{% if loop.first %} active{% endif %}" role="listitem">{{ item.content }}</div>
     {% endif %}
    {% endfor %} 
   </div>

Paginador

Categoría

Portada

Landing Page Drupal | Plantillas Twig (Parte 2) - Bootstrap y Flexbox

webmaster — Fri, 24 Mar 2023 08:59:37 +0000

Landing Page Drupal | Plantillas Twig (Parte 2) - Bootstrap y Flexbox

Debido a que estamos trabajando con Bootstrap 5, para la creación de nuestra Landing Page personalizable en Drupal 8/9/10, hoy utilizaremos las clases de Bootstrap 5 compatibles con Flexbox; de esta manera, nuestro diseño quedará adaptado a múltiples dispositivos (Responsive), sin la necesidad de manipular nuestra hoja de estilos.

Si analizamos el comportamiento que esperamos obtener para la visualización de nuestra Landing Page, al acceder desde un ordenador, veremos que en la parte central, los elementos deberían presentarse dentro de tres columnas, las dos primeras para la imagen e información del producto, y la última, a todo el ancho del contenido, donde se muestra el formulario para la realización de los pedidos.

Al acceder a la Página Oficial de Bootstrap, en el apartado de Utilidades, dedicado a FLEX HAZ CLIC AQUI, podremos explorar el listado de clases y sus comportamientos, para facilitarnos la aplicación de casi todas las opciones necesarias en nuestros diseños resposivos, sin demasiados cambios en las hojas de estilos css.

Si ya conocías Bootstrap, sabrás que, añadiendo una o varias clases dentro de cualquier contenedor o etiqueta html, obtendrás el mismo resultado que si aplicaras varias líneas de código css; esto implica un ahorro considerable dentro de las tareas de diseño, además de ofrecer una amplia documentación y varios ejemplos, que podrás encontrar, tanto dentro de la página oficial, como el muchas otras disponibles en internet.

Ahora que ya sabemos cómo documentarnos, sobre el uso de las clases de Bootstrap y Flexbox, volvamos a explorar el archivo node--landingpage--full.html.twig, responsable de mostrar nuestra plantilla.

Recuerda, que hemos creado esta plantilla, gracias a que activamos el modo Debug o Depurador de Drupal, explicado en capítulos anteriores del curso.

Si prestamos atención en el código que forma, la parte superior de la plantilla, donde hemos añadido ya la imagen de cabera y el texto que aparece justo debajo de ella, encontraremos algunas de las clases de Bootstrap y Flexbox que acabamos de comentar.

{% if content.field_cabecera_landing|render is not empty %}
<div class="d-flex container-fluid" lc-helper="background" style="height:50vh;background:url({{ file_url(content.field_cabecera_landing[0]['#media'].field_media_image.entity.uri.value) }})  center / cover no-repeat;">
  {% endif %}
</div>
<div class="container p-5 bg-light" style="margin-top:-100px">
  <div class="row">
    <div class="col-md-4 text-center align-self-center">
      <div class="lc-block border-end border-2 ">
        <div editable="rich">
          <p class="display-4 text-secondary">WHY?</p>
        </div>
      </div><!-- /lc-block -->
    </div><!-- /col -->
    <div class="col-md-8">
      <div class="lc-block ">
        <div editable="rich">
          <p class="display-4">{{ label.0 }}</p>
        </div>
      </div><!-- /lc-block -->
    </div><!-- /col -->
  </div>

Explicación

d-flex: Es la primera de las clases que deberíamos añadir en nuestra etiqueta HTML, para poder emplear la combinación de Flex y Boostrap; añadirla es el equivalente a escribir la propiedad display: flex, dentro de nuestra hoja de estilos.

container / container-fluid: tiene la misma funcionalidad que ya conoces de Boostrap, y que en este caso, añadirá la propiedad padding, configurada por defecto para Drupal, cuando utilizamos el tema basado en Boostrap.

p-5: Esta clase es la encargada de modificar la propiedad padding, tienes varios valores disponibles, además de la opción de utilizarla, especificando si quieres aplicar un padding-top pt-5, o padding buttom pb-5, por ejemplo.

align-self-center: esta clase, como su nombre lo indica, se encargará de centrar los elementos, dentro del contenedor.

col-md-4: esta es una de las clases que ya deberías conocer, por versiones anteriores de bootstrap, encargada de adaptar el tamaño de la columna, en los dispositivos de tamaño medio (Tablets, Ipads, etc.)

Si quieres profundizar más sobre las clases disponibles y su implementación, te recomiendo visitar la página oficial de Boostrap. HAZ CLIC AQUI.

Añadiendo cambios en la plantilla

Es el momento de continuar con el resto de cambios necesarios, para seguir ajustando nuestra Landing Page, hasta conseguir que se parezca a nuestra propuesta de diseño.

En esta ocasión, vamos a sustituir en nuestra plantilla, todo el espacio que ocupa el texto central, para dejarle paso, a dos nuevas filas, donde añadiremos los campos correspondientes, encargados de mostrar las imágenes e información de los productos, además del formulario para los peidos.

He añadido un para de clases adicionales, sólo para que sea más fácil de entender, donde colocaremos cada uno de los elementos.

El resultado final, con el nuevo cambio, debería ser parecido al siguiente código:

  <div class="row contenido-central">
     <div class="col-md-12">
       <div class="row info-productos">
            LOS PRODUCTOS AQUI
       </div>
       <div class="row formulario-pedidos">
            EL FORMULARIO AQUI
       </div>
     </div>
  </div>
</div>

Ahora ya tenemos claro, cuál debería ser la estructrura para conseguir el resultado esperado en mi Landing Page, el problema con el que nos encontramos, es que nuestra plantilla sólo tienes dos campos, con los que podamos jugar, field_cabecera_landing y field_contenidos_landing, ya que hemos optado, por el uso de paragraphs, para facilitar la personalización de sus contenidos.

Si volvemos a la parte del código donde imprimimos nuestra imagen, podremos concluir, que lo que necesitamos para obtener el resto de valores de nuestra página, es añadir la variable que imprime el campo global de los paragraphs y a continuación, añadir las plantillas correspondientes, para cada uno de los elementos contenidos dentro de éste.

Lo primero que deberíamos hacer será remover la parte del código donde estarán las imágenes, información y el formulario, para añadir dentro sólo el campo global de los paragraphs.

Por ahora, nuestra plantilla principal, node--landingpage--full.html.twig, debería quedar con el suguiente resultado:

  <div class="row contenido-central">
     <div class="col-md-12 p-5">
        {{ content.field_contenidos_landing }}
     </div>
  </div>
</div>

Una vez añadido el código anterior, si visitamos nuestra Landing Page, deberíamos ver en pantalla, algo parecido a la siguiente imagen:

Si todo ha ido correctamente, y ves en pantalla un resultado parecido al anterior, es el momento de inspeccionar los elementos y crear las plantillas correspondientes a cada paragraphs, para cotinuar con el resto de modificaciones.

Plantilla principal para la landing page

El código final de la plantilla general para la landing (node--landingpage--full.html.twig), que incluye además, el campo de selección para el color, gracias al módulo Color Field, será :

{{ attach_library('bootstrap_barrio/node') }}

{%
  set classes = [
    'node',
    'node--type-' ~ node.bundle|clean_class,
    node.isPromoted() ? 'node--promoted',
    node.isSticky() ? 'node--sticky',
    not node.isPublished() ? 'node--unpublished',
    view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
    'clearfix',
  ]
%}
<article{{ attributes.addClass(classes) }}>
  <header>
    {{ title_prefix }}
    {% if label and not page %}
      <h2{{ title_attributes.addClass('node__title') }}>
        <a href="{{ url }}" rel="bookmark">{{ label }}</a>
      </h2>
    {% endif %}
    {{ title_suffix }}
    {% if display_submitted %}
      <div class="node__meta">
        {{ author_picture }}
        {% block submitted %}
          <em{{ author_attributes }}>
            {% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}
          </em>
        {% endblock %}
        {{ metadata }}
      </div>
    {% endif %}
  </header>
  <div{{ content_attributes.addClass('node__content', 'clearfix') }}>

    {% if content.field_cabecera_landing|render is not empty %}
    <div class="d-flex container-fluid" lc-helper="background" style="height:50vh;background:url({{ file_url(content.field_cabecera_landing[0]['#media'].field_media_image.entity.uri.value) }})  center / cover no-repeat;">
      {% endif %}
    </div>
    <div class="container p-lg-5" style="margin-top:-100px;
                                         background-color: {{ content.field_color_fondo_landing.0 }}"
     >
      <div class="row">
        <div class="col-md-4 text-center align-self-center">
          <div class="lc-block border-end border-2 ">
            <div editable="rich">
              <p class="display-4 text-secondary">WHY?</p>
            </div>
          </div><!-- /lc-block -->
        </div><!-- /col -->
        <div class="col-md-8">
          <div class="lc-block ">
            <div editable="rich">
              <p class="display-4">{{ label.0 }}</p>
            </div>
          </div><!-- /lc-block -->
        </div><!-- /col -->
      </div>
      <div class="row contenido-central">
         <div class="col-md-12 p-md-5">
            {{ content.field_contenidos_landing }}
         </div>
      </div>
    </div>

  </div>
</article>

Plantilla para la imagen y el texto del producto

El código correspondiente a la parte superior, donde mostramos la imagen del producto, acompañada de un título y un párrafo, (paragraph--bloque-imagen-y-textos.html.twig) será:

{%
  set classes = [
    'paragraph',
    'd-lg-flex',
    'paragraph--type--' ~ paragraph.bundle|clean_class,
    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
    not paragraph.isPublished() ? 'paragraph--unpublished'
  ]
%}
<style>
  @media (min-width: 992px) {
    .field--name-field-imagen-producto {
      width: 550px;
    }
  }
</style>
{% block paragraph %}
  <div{{ attributes.addClass(classes) }}>
    {% block content %}
      <div class="row no-gutters d-flex">
        <div class="imagen-producto d-sm-column">
          {{ content.field_imagen_producto }}
        </div>
      </div>
      <div class="row no-gutters d-flex">
        <div class="texto-producto d-sm-column">
          <h2>{{ content.field_texto_superior.0 }}</h2>
          <p>{{ content.field_textos_producto.0 }}</p>
        </div>
      </div>
    {% endblock %}
  </div>
{% endblock paragraph %}

Plantilla para el Bloque formulario

Para la plantilla, encargada de modificar el aspecto gráfico correspondiente al formulario, que además incluye la etiqueta html <hr />, con algunos estilos en línea, (paragraph--bloque-formulario.html.twig), será:

{%
  set classes = [
    'paragraph',
    'd-flex flex-column',
    'paragraph--type--' ~ paragraph.bundle|clean_class,
    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
    not paragraph.isPublished() ? 'paragraph--unpublished'
  ]
%}
{% block paragraph %}
  <div{{ attributes.addClass(classes) }}>
    {% block content %}
      <hr style="height: 5px; background-color: #333333;margin-top: 40px; margin-bottom: 40px"/>
      <div class="titular text-align-center flex-row"><h2>{{ content.field_titulo_formulario }}</h2></div>
      <div class="formulario">
        {{ content.field_formulario_bloque }}
      </div>
    {% endblock %}
  </div>
{% endblock paragraph %}

webmaster Vie, 24/03/2023 - 09:59

Contenidos de Prueba | Generados con el módulo Devel

webmaster — Sun, 19 Mar 2023 08:10:21 +0000

Contenidos de Prueba | Generados con el módulo Devel

Cuando estamos empezando con el desarrollo o implementación de cualquier proyecto, en la mayoría de los casos nos resultará necesario la creación de contenidos con los que podamos realizar pruebas de todo tipo.

Para realizar esta tarea, en Drupal contamos con el módulo Devel Generate, integrado dentro de las dependencias del módulo Devel. Por lo que, una vez instalado y activado en nuestro Drupal, sólo tendremos que dirigirnos a la url "/admin/config/development/generate/content", y allí veremos el listado de todos los tipos de contenidos que tengamos creados en nuestro proyecto.

CÓMO INSTALAR Y CONFIGURAR EL MÓDULO:

Paso 1 Descargar el módulo:

Lo primero que tendrás que hacer es descargarlo, para ello, a partir de Drupal 8 se recomienda que utilices el gestor de paquetes Composer, ya que te facilitará tanto la instalación como futuras actualizaciones del tus proyectos. No obstante también podrías descargarlo desde la Página oficial del módulo y una vez descargado, tendrás que colocarlo en la carpeta "modules" o "modules/contrib", dependiendo de tu instalación y asegurarte de descargar todas sus dependencias o el módulo no funcionará, esta es una de las ventajas con las que cuentas al hacer la instalación usando Composer.

Paso 2 Activación del módulo :

Para activar el módulo Devel, al igual que todos los demás módulos contribuidos de Drupal, tendrás la posibilidad de hacerlo, mediante el uso de la herramienta Drush, con el comando "drush en devel -y", que sirve para activar cualquier módulos y todas sus dependencias, o desde la interfaz de Drupal.

Además de poder generar automáticamente nuestros contenidos, podremos configurar algunas opciones adicionales como, especificar su fecha de publicación, comentarios relacionados, títulos para los contenidos con un límite de caracteres específico, el idioma o incluso los usuarios que los crearon, esta última opción nos facilitará el testeo de los permisos de usuario.

Para generar nuestro contenidos, sólo tendremos que marcar las opciones con las que deseamos trabajar, es recomendable intentarlo la primera vez como poco contenido para estar seguros de obtener lo que pensábamos o si hará falta modificar algún campo.

Si no estás conforme con el contenido generado o simplemente quieres volver a generar contenidos otra vez, puedes seleccionar la opción de eliminar todos los contenidos previamente creados antes de ejecutarlo.

Una vez que hayamos revisado todos los campos que nos interesan, haremos clic en el botón que aparece en la parte inferior de la pantalla y comenzará el proceso inmediatamente.

Cuando se haya realizado el proceso de generación de nuestros contenidos, veremos un mensaje de confirmación en la parte superior de la pantalla, con la cantidad y el tipo de contenido que decidimos utilizar.

Para comprobarlo, sólo tendremos que dirigirnos al listado de contenidos en la url "/admin/content" y veremos el listado de contenidos generados por el módulo con las configuraciones adicionales, si es que hemos seleccionado alguna.

webmaster Dom, 19/03/2023 - 09:10

Comprueba el valor de un campo SELECT en un TWIG

webmaster — Wed, 01 Mar 2023 08:03:50 +0000

Comprueba el valor de un campo SELECT en un TWIG

Descripción

Este campo evalúa entre los valores "izquierda" o "derecha" de un SELECT y ejecuta un código según su valor

webmaster Mié, 01/03/2023 - 09:03

Instrucciones

Crea un campo del tipo select con los valores que quieres evaluar para ejecutar tu código
Comprueba el valor de la selección y ejecuta tu código a partir de ese resultado.

{% if content.field_posicion_para_textos.0|render == "izquierda" %}

       // Imprime algo en esta parte

{% else %}

     // Imprime otra cosa

{% endif %}

Paginador

Categoría

Portada

hook_preprocess_node()

webmaster — Tue, 28 Feb 2023 19:59:45 +0000

hook_preprocess_node()

Descripción

La Preprocess Function sirve para modificar los comportamientos por defecto de Drupal, en este caso vamos a acceder al formulario por defecto y lo haremos disponible para colocarlo dentro de un nodo y posteriormente dentro de un paragarphs, así podremos imprimirlo en cualquier lugar y posición dentro de la web.

Si quieres aprender más sobre las preprocess functions

webmaster Mar, 28/02/2023 - 20:59

Instrucciones

Creamos un contenido con los campos que acompañarán al formulario Ej.: detalles_contacto
En nuestro archivo SUBTEMA.theme (que forma parte de los archivos de todos los temas y subtemas), copiaremos el código que está debajo y cambiaremos los nombres por los de nuestro contenido.
Instalar el módulo Paragraphs y crear el Contenedor para nuestro "Contenido + Formulario". Ej.: bloque_formulario.
Activamos el modo debug o depurador, para averiguar la sugerencia de la plantilla correspondiente al paragraphs.
Creamos la plantilla y añadiremos dentro la variable que imprimirá nuestro "Contenido + Formulario"
Creamos la plantilla para nuestro nodo "detalles_contacto" y ponemos la variables que imprimirán sus contenidos + Formulario

/** * Implements hook_preprocess_node() for node.html.twig. */

function SUBTEMA_preprocess_node(array &$variables) {

  if(isset($variables['node'])){
    $node = $variables['node'];
    if(($node->getType() == 'detalles_contacto')) {
      $message = \Drupal::entityTypeManager()
        ->getStorage('contact_message')
        ->create(array(
          'contact_form' => 'feedback', //ID(NOMBRE MAQUINA) del formulario
        ));
      $form = \Drupal::service('entity.form_builder')->getForm($message);
      $variables['feedback_form'] = $form;
    }
  }

}

Paginador

Categoría

Portada