Usando los modos de vista y plantillas para maquetar el conenido en Drupal

Organiza y coloca los campos visualmente de tu contenido usando plantillas custom y modos de vista en Drupal

Hoy estoy mejorando la parte visual de los posts en ficha completa y no quiero matarme a escribir estilos a lo loco!. Quiero mejorar la vista de la misma forma que la página principal, usar css y js lo mínimo posible para usar modos de vista y templates.

Este post es una extensión/continuidad al anterior que había publicado sobre el frontpage por lo que si controlas mucho aún los conceptos de template y modo de vista, mírate antes ese post!

Te resumiré un poco los pasos para crear un nuevo modo de vista en el contenido, recolocar sus campos y aplicar alguna maquetación con clases y poco css:

1. Accede a la edición de la visualización de tu contenido y añade un nuevo modo de vista para "Contenido completo". Lo podrías usar directamente con el "Default" pero mejor tener uno para cada ocasión!

2. Recoloca tus campos a tu gusto!. En mi caso, ves que me he cargado la imagen porque no tiene mucha relevancia y que he cambio la visualización del campo etiquetas para que se vea igual que en el frontpage 

   

3. Simplemente al guardar, ya veo la ficha de los post mucho mejor y más parecida al front page. Pero la zona de la información del usuario y las etiquetas no me convence mucho. Vamos a crear una plantilla custom y toquetear ahí un poco
   1. La plantilla tiene el nombre "node--article--full.html.twig" porque depende de tipo de contenido artículo y estamos en la vista contenido completo
   2. Aquí os dejo una parte de la plantilla para que veáis algunos de los cambios que he aplicado

   3. {# Añadidas algunas clases para aumentar los espacios entre componentes #}
      {%
        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,
          'mt-4', 
          'mb-5',
        ]
      %}
      {{ attach_library('bootstrap5/node') }}
      
      <article{{ attributes.addClass(classes) }}>
      
        {# Recolocamos los compoenetes y añadimos un poco de sombras#}
        {% if display_submitted %}
          <div class="shadow-sm p-3 mb-2 bg-body rounded">
            {% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}
            {{ metadata }}
          </div>
        {% endif %}
      
        <div{{ content_attributes.addClass(['node__content']) }}>
      
          <div class="shadow p-3 mb-5 bg-body rounded">
            {{ content.field_tags }}
          </div>
      
          {{ content.body }}
        </div>
      
      </article> 

4. Listo!