Es posible que te hayas encontrado con la necesidad de imprimir algún contenido, dentro de un paragraphs en un sitio multi-idioma.
En mi caso me tocó hacerlo con el witget de Turitop, para un sitio en dos idiomas, así que comparto el ejemplo por si te hace falta.
La solución es implementar una preprocess function:
Para extraer la url de un campo media e imprimirlo en tu plantilla Twig, tanto si el campo está en el primer nivel del Paragraphs o dentro de un Paragraphs, que está anidado en otro.
Los ejemplos se puedes aplicara contenidos, productos o paragraphs en Drupal.
Si estás tratando de implementar algún carrusel para Drupal 10, siguiendo ejemplos que haz encontrado en internet, esto te ayudará a corregirlo.
En Drupal, además de poder trabajar con tipos de contenido a medida, cuyos campos y comportamiento, nos permiten obtener casi cualquier tipo de estructura posible; existe la opción de mostrar esos mismos contenidos, modificando su presentación o la información expuesta; con esta alternativa podremos aplicar cambios como, por ejemplo, estilos de CSS, dependiendo de los permisos de los usuarios, o descomponer nuestro proyecto en "componentes" reutilizables, que podremos modificar individualmente, sin tener que reescribir el tipo de contenido original.
Esta alternativa es conocida como View Modo o "Modo de Vista" y básicamente nos permite recolocar, presentar u ocultar los campos de cualqueir tipo de contenido o entidad dentro de un proyecto de Drupal.
Drupal viene por defecto con dos tipos de contenido Artículo y Página básica, para ver el modo de vista de cualquiera de ellos, tendremos que acceder a la pestaña de Gestionar presentación del tipo de contenido que desamos consultar, en la url "/admin/structure/types/manage/article/display".
Al acceder, por defecto, en la pestaña de un artículo verás algo parecido a la siguiente imagen, con los campos que trae una instalación nueva de Drupal.
Una de las mejores formas de trabajar, utilizando View Modes, de los contenidos en Drupal, es através de las vistas.
Por defecto, a partir de Drupal 8, econtraremos una vista llamada Frontpage, encargada de mostrar los artículos creados, sin la necesidad de modificar nada más.
Para comprobarlo, sólo tenemos que añadir algunos artículos a nuestro proyecto Drupal, completando todos sus campos y a continuación, al visitar la página frontal, haciendo clic en el logo de Drupal, veremos un listado de todos nuestros artículos.
Si exploramos la configuración de la vista Frontpage, a la que podremos acceder desde la url "/admin/structure/views/view/frontpage", podremos entender muy fácilmente, como se emplea un View Mode, dentro de una vista de Drupal.
Observando el apartado Formato, dentro de la página de configuración de la Vista Frontpage, comprobaremos que está configurada para Mostrar contenidos, con el View Mode Resumen.
Esto quiere decir, que si volvemos a la pestaña Gestionar Presentación, del tipo de contenido Artículo y buscamos el apartado Resumen, veremos que los campos activados corresponden a los que vemos en la página de inicio de Drupal, gracias a la vista Frontpage.
Para añadir o modificar un View Modo dentro de una vista en Drupal, solo tendremos que hacer clic en el enlace que se refiere al modo de vista utilizado, en el apartado Mostrar, de la pantalla de configuración de la vista.
Al hacer clic, se abre un desplegable, con todos los View Modes, disponibles para la entidad o el contenido que estemos mostrando en la misma.
En el caso de la vista Frontpage, por defecto está empleádose el View Mode Resumen, para asegurarnos de que entendemos como modificarlo, haremos clic sobre Resumen y a continuación seleccionaremos, cualquiera de las opciones disponibles, en mi caso, seleccionaré RSS y luego guardaré los cambios, antes de regresar a la página pricipal, para ver el resultado.
Ahora que ya conocemos el objetivo de utilizar los Modos de vista (View Modes), podremos ir un poco más allá; vamos a crear y activar nuestro propio modo de vista, para que modifique nuestros contenidos.
Para crear un modo de vista personalizado, iremos a la página de configuración de los modos de vista, para ello, tenemos varias opciones:
Una vez dentro de la página de configuración, haremos clic en el enlace Añadir una nueva modo de vista de Contenido, ubicado en la parte inferior de cada uno de los contenidos, bloques, paragraphs, media, etc.
Luego rellenaremos el campo con el nombre para nuestro View Mode, ej.: ModoVistaPersonalizado y a continuación, guardaremos los cambios y volveremos a la pestaña Gestionar Presentación, para activarlo, dentro de nuestro contenido.
Cuando hayamos guardado el nuevo View Mode, volveremos a la pestaña Gestionar presentación, nos desplazaremos hasta el final y a continuación, marcaremos el nuevo View Mode, que encontraremos dentro del listado.
Requisitos:
Cuando tengamos activado el modo Debug, seleccionaremos inspeccionar, desde el navegador, para ver las sugerencias generadas por Drupal, relacionadas con los posibles nombres para las plantillas de nuestros Modos de Vista.
Al igual que con cualquier otra plantilla de un nodo en Drupal, copiaremos el modelo, cambiaremos el nombre y a continuación, podremos comenzar a personalizarla.
Si estás acostumbrado a trabajar con Boostrap, es posible, que algunas ocasiones, tengas que ajustar el tamaño de las imágenes, para que se adapten al contenedor dentro de una tarjeta .card, de bootstrap.
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>
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.
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.
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>
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 %}
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 %}
Hoy hemos decidido que estamos dispuestos a seguir aprendiendo Drupal, porque nos apasiona obtener nuevos conocimientos, que solucionarán posibles retos en nuestro futuro próximo, o porque nos encanta ampliar nuestras posibilidades, tanto a nivel laboral como personal. Ya que la puesta en marcha de proyectos web, podrían representar el inicio hacia una carrera prometedora.
Ahora que ya tenemos claro Cómo crear un módulo en Drupal 9, en esta ocasión nos vamos a concentrar, en la creación de una plantilla personalizada, con el objetivo de tomar el control sobre la presentación de los datos relacionados con el mismo. Para lograr nuestro propósito, tendremos que implementar uno de los "hooks" o funciones prefabricadas de Drupal que nos permitirán lograr toda clase de objetivos, en este caso será function hook_theme, la que se encargará registrar las implementaciones de un tema o "theme", dentro de nuestro tema o módulo personalizado.
En este capítulo vamos a crear un módulo personalizado, al que añadiremos un controlador, que nos imprimirá en pantalla una página y posteriormente, también añadiremos mediante la function hook_theme en el archivo ( MIMODULO.module ) los datos y configuraciones que nos permitirán pasar por parámetros el título y otros contenidos que mostraremos en ella.
Finalmente, añadiremos el archivo routing ( MIMODULO.routing.yml ), para poder acceder a esta página una vez haya sido activado nuestro módulo personalizado. Este ejemplo te permitirá conocer la manera en que podrás implementar plantillas personalizadas en tus módulos.
- Cómo crear un módulo en Drupal 9
Lo primero que deberías saber es cómo crear un módulo personalizado. Esencialmente para este ejemplo, lo que necesitarás será una carpeta con el nombre de tu módulo y dentro el archivo con el nombre del módulo y la extensión, eje.: "mimodulo.info.yml"
En el archivo MIMODULO.module es donde podremos implementar los hooks o funciones de php en Drupal, en este ejemplo utilizaremos la function hook_theme, que se encarga de registrar las implementaciones del tema dentro de un módulo o tema personalizado, esto quiere decir, que las implementaciones declaradas por este hook o función especifican cómo un arreglo o array de renderización particular debe ser renderizada como HTML.
Los párametros que utilizaremos en este ejercicio, estarán dentro de un array que nos devolverá la función y son, el nombre de la función y dentro de de ella, las variables que pasaremos posteriormente al controlador, para crear la página que imprimiremos una vez activado el módulo.
Dentro de las variables, a su vez, tendremos un array de items, donde colocaremos todos las noticias que queremos presentar en la página una vez renderizada y el título de la página que será del tipo String.
<?php
/**
* Implement hook_theme().
*/
function listado_noticias_theme($existing, $type, $theme, $path) {
return [
'listado_noticias' => [
'variables' => ['items' => [], 'title' => '' ]
]
];
}
El Controlador o Controller es quien nos permitirá crear la página que se mostrará, una vez activado nuestro módulo, al renderizar los datos que hemos definido previamente en nuestra function hook_theme.
Para que pueda generarse nuestra página, vamos a añadir a nuestra clase controlador, un método al que llamaremos "page()", y dentro tendremos dos arrays, uno que contendrá el listado de noticias que vamos a recorrer usando nuestra function hook_theme, y otro con los datos que obtendremos al conectar con la información recibida desde la function hook_theme.
Una vez creada nuestra clase controller con el nombre ListadoNoticiasController.php, dentro tendremos la siguiente estructura de código.
<?php
namespace Drupal\listado_noticias\Controller;
use Drupal\Core\Controller\ControllerBase;
class ListadoNoticiasController extends ControllerBase {
public function page(){
$items = [
['title' => 'Noticia 1'],
['title' => 'Noticia 2'],
['title' => 'Noticia 3'],
['title' => 'Noticia 4'],
];
return [
'#theme' => 'listado_noticias',
'#items' => $items,
'#title' => 'Listado de noticias'
];
}
}
El primer array, es un array de objetos, ya que cada noticia podrá tener tantos elementos como queramos especificar, para este ejemplo, sólo añadiremos el título, pero puedes añadir tantos como necesites, siempre tomando en cuenta la estructura ( "clave" => "valor" ), ya que los objetos, en realidad también son arrays.
$items = [ ['title' => 'Noticia 1'], ['title' => 'Noticia 2'], ['title' => 'Noticia 3'], ['title' => 'Noticia 4'], ];
El segundo array, que tendremos dentro de nuestro método "page()", es el que nos devolverá nuestro método al llamarlo, contendrá los parámetros necesarios para renderizar los datos recibidos desde la function hook_theme, y que harán posible la impresión en pantalla, de nuestros contenidos en formato de una página, al activar el módulo.
En el primer parámetro del array, estamos llamando a nuestra función tema, que configuramos usando la function hook_theme, el segundo parámetro son los items, que hemos definido como una de las variables que pasamos y el último, será el título de la página, que también definimos mediante la función.
Esto hará posible, que posteriormente podamos recorrer el primer array de items y mostrarlos en la plantilla correspondiente, que todavía no hemos creado.
return [ '#theme' => 'listado_noticias', '#items' => $items, '#title' => 'Listado de noticias' ];
Una vez terminada la configuración de los datos que vamos a presentar en nuestra página, al invocar el método "page()", necesitaremos un modo de acceso, mediante url, para que podamos acceder a esta página y ver sus datos.
En esta tarea nos ayudará el archivo listado_noticias.routing.yml , dentro de este archivo vamos a definir la url hacia nuestra página, el namespace para que drupal pueda encontrar en nuestro controlador el método que mostrará los datos y finalmente los permisos asociados a nuestro contenido, que serán los permisos por defecto, para que cualquier usuario que entre a la web, pueda verlo sin problemas.
Es muy importante respetar los espacios al escribir los datos dentro del archivo rounting, se recomienda evitar la tecla tab para hacerlo y en su lugar, es mejor la barra espaciadora del teclado, contando con dos espacios a cada nueva línea que vayamos añadiendo.
listado_noticias.listado:
path: '/listado-noticias'
defaults:
_controller: '\Drupal\listado_noticias\Controller\ListadoNoticiasController::page'
requirements:
_permission: 'access content'
La última fase de este desarrollo, antes de activar el módulo, será la creación de nuestra plantilla, para dar formato a la presentación de los datos, una vez activado nuestro módulo.
Para los nombres de las plantilla, se debe utilizar el guión medio "-", en lugar del guión bajo "_", y el nombre que debemos utilizar será el mismo de nuestra función tema, que hemos declarado en el function hook_theme.
Por lo tanto, el nombre que tendremos que utilizar en este ejemplo será "listado-noticias.html.twig", además, colocaremos nuestras plantillas dentro de una carpeta llamada templates, siguiendo con la estructura habitual de drupal para todos sus módulos.
Ahora que ya tenemos la plantilla creada, sólo resta imprimir los valores usando las dobles llaves, ej.: {{ title }} y en el caso de las noticias, crearemos un "ciclo for", para poder recorrer el array de items y acceder a todos sus datos relacionados.
<h3>{{ title }}</h3>
<ul>
{% for noticia in items %}
<li>{{ noticia.title }}</li>
{% endfor %}
</ul>
Ya podemos activar nuestro módulo y luego al acceder a la url que hemos definido dentro del archivo listado_noticias.routing.yml, veremos nuestra página con todos los datos que habíamos configurado.
Si piensas dedicarte a la maquetación web, es necesario que conozcas y entiendas bien, lo que en CSS se denomina como Media Queries.
Las media queries (en español "consultas de medios") son útiles cuando deseas modificar tu página web o aplicación en función del tipo de dispositivo (como una impresora o una pantalla) o de características y parámetros específicos (como la resolución de la pantalla o el ancho del viewport del navegador).
Se utilizan para:
@media e @import de CSS.<link>, <source> y otros elementos HTML.Si quieres conocer más a fondo, acerca del uso e implementación de las Media queries, puedes consultar la Página de Mozilla Developers
En Drupal, como ya sabrás, siempre encontraremos varias maneras de implementar soluciones a nuestros problemas. En esta ocasion, explicaré las opciones más comunes para aplicar Media queries, en tus proyectos.
Si no tienes demasiado experiencia utilizando Drupal, la mejor forma de comenzar a experimentar sería mediante la interfaz de usuario. Para trabajar con CSS y Javascript, podrás hacerlo al instalar el módulo llamado Asset Injector, que te permitirá crear hojas de estilos personalizables, sin la necesidad de salir de la interfaz de usuario.
Para aprende a instalar y trabajar con Asset Injector Haz clic aquí
Quiénes tienen algo más de experiencia en maquetación, podrán aplicar sus estilos, a través de las hojas de estilo CSS dentro del subtheme o tema personalizado, que hayan configurado para su proyecto de Drupal.
Si quieres aprender, acerca de la creación y configuración de tus temas personalizados para Drupal, te dejo un par de enlaces, donde encontrarás documentación y videos, explicándote todos los pasos necesarios:
Cómo crear un tema personalizado con Bootstrap 3 En Drupal 9
Trabajando con Subteme Bootstrap Barrio, Plantillas, Paragraphs y Permisos
Añadir CSS Personalizado en tu Sutheme Drupal 8/9
Ahora que ya conoces un poco más, acerca del uso e implementación de los Media queries, aquí te dejo un ejemplo completo de un archivo con las diferentes variaciones, para que puedas crear tus estilos personalizados a cada dispositvo. Sólo tendrás que ir añadiendo tu código, aplicado a la clase o Id del elemento, en las líneas que están marcadas como /* CSS */.
/*
##Device = Desktops (Escritorio)
##Screen = 1281px pantallas de escritorio de alta resolución
*/
@media (min-width: 1281px) {
/* CSS */
}
/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {
/* CSS */
}
/*
##Device = Tablets, Ipads (portrait/Vertical)
##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
/* CSS */
}
/*
##Device = Tablets, Ipads (landscape/horizontal)
##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
/* CSS */
}
/*
##Device = Baja resolución Tablets, Mobiles (Landscape/horizontal)
##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
/* CSS */
}
/*
##Device = La mayoría de los Smartphones Móviles (Portrait/Vertical)
##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 480px) {
/* CSS */
}
El lenguaje Twig es una evolución, adaptada a todo público, que facilita su aplicación, a pesar de que no tengas muchos conocimientos sobre programación php.
Twig es amigable tanto para el diseñador como para el desarrollador al adherirse a los principios de PHP y agregar funcionalidad útil para entornos de creación de plantillas.
Las características clave son...
Rápido: Twig compila plantillas en código PHP optimizado simple. La sobrecarga en comparación con el código PHP normal se redujo al mínimo.
Seguro: Twig tiene un modo de caja de arena para evaluar el código de plantilla que no es de confianza. Esto permite que Twig se use como lenguaje de plantilla para aplicaciones en las que los usuarios pueden modificar el diseño de la plantilla.
Flexible: Twig funciona con un lexer y un analizador flexibles. Esto permite al desarrollador definir sus propias etiquetas y filtros personalizados y crear su propio DSL.
Twig es utilizado por muchos proyectos de código abierto como Symfony, Drupal8, eZPublish, phpBB, Matomo, OroCRM; y muchos marcos lo admiten, así como Slim, Yii, Laravel y Codeigniter, solo por nombrar algunos.
Te dejo los enlaces, para que puedas comenzar a utilizar Twig, en tus plantillas de Drupal, tanto de contenidos, como de las vistas
Puedes encontrará más información sobre Twig, en su Página Oficial. HAC CLIC AQUÍ
A lo largo de los años, Drupal ha ganado la inmerecida fama de que es un CMS muy complejo y difícil de aprender, pero en realidad, todo dependerá de tu capacidad para experimentar con nuevas herramientas y tu actitud de superar cualquier reto que se te presente; verás que no resulta tan complicado, si dedicas el tiempo necesario y tienes la suficiente paciencia contigo.
Si todavía no lo conoces, te animo a que empieces desde hoy mismo con este curso gratis de Drupal 9 paso a paso en español y en un par de semanas te llevarás la grata sorpresa de lo mucho que puedes lograr si pones verdadero empeño.
Una vez hayas terminado de configurar todo lo anterior y te sientas con todas las ganas para comenzar, el próximo paso sería hacer tu primera copia de seguridad; de esta forma, te asegurarás de que puedes recuperar la última versión estable de tu desarrollo si hubiera cualquier tipo de fallo durante el proceso.
Así que, para crear esta primera copia de nuestra base de datos estable, nos iremos a la ventana del módulo Backup and migrate usando la siguiente ruta en el navegador o mediante los botones del menú superior "/admin/config/development/backup_migrate" y crearemos la primera copia estable.
Tan pronto como veamos el mensaje de confirmación de que se ha realizado la copia correctamente, nos toca continuar con el proceso de creación del tipo de contenido y posteriormente su colocación en un módulo personalizado, para que podamos reutilizarlo en cualquier otro proyecto o que nos sirva de base para contenidos más complejos.
Empezaremos con el proceso de crear nuestro tipo de contenido, añadiéndole los campos correspondientes, funcionalidades y estructura. Es importante que tengas muy claro si tu contenido tendrá dependencias de otros contenidos como vocabularios, referencias a otros contenidos o formularios, etc. La idea es que tu tipo de contenido, tal y como lo definas esté disponible para cualquier otra web de Drupal 8 o 9 o que te sirva como punto de partida para desarrollar otros contenidos más complejos partiendo de una base predefinida.
En este ejercicio, vamos a crear un tipo de contenido llamado "Servicio", al que añadiremos dos campos ( Imagen servicio y Descripción del servicio ), de esta forma podrás apreciar mejor todos los elementos relacionados según el tipo de campo que prefieras emplear.
Básicamente, vamos a crear una carpeta con el nombre de nuestro módulo, y la colocaremos dentro de la carpeta "modules/custom", para mantener mejor ordenado el desarrollo de nuestra web. Te recomiendo que utilices el mismo nombre que tendrá tu tipo de contenido y luego añadiremos el archivo "TUMODULO.info.yml", que es necesario para que Drupal lo reconozca como módulo, acompañado de dos carpetas adicionales "config" + "install", donde tendremos que colocar todos los demás archivos relacionados con la definición de nuestro contenido.
Aquí es donde viene la novedad y verdadera ventaja, de utilizar este método para la creación de tus contenidos en un módulo personalizado, en lugar de tener que programar todo desde cero, disminuyendo así considerablemente la generación de errores e investigación de posibles fallos de estructura y ejecución, como en versiones anteriores de Drupal.
La idea consiste en utilizar la exportación de configuración, incluida en la interfaz de usuario a partir de Drupal 8, para no tener que memorizar un montón de líneas de código, tabulaciones específicas y otras características obligatorias. Haciendo que tus desarrollos puedan ponerse en marcha en el menor tiempo posible.
Como en cualquier desarrollo, la clave está en los detalles. Debes prestar mucha atención de no saltarte ningún paso del procedimiento, durante la creación y todo saldrá según lo que esperas.
1.- El tipo de contenido: El primer archivo que debes añadir a tu módulo, siempre dentro de la carpeta "config/install" es el que define tu tipo de contenido, por ejemplo, el desplegable te mostrará todos los elementos disponibles, si tu contenido a exportar es un nodo, debes elegir "Tipo de contenido" o "Content Type", pero también podrías exportar cualquier otro elemento, por lo tanto, podrás usar "Tipo de parrafo" o "Paragraphs Type", "Bloque personalizado" o "Custom Block", etc.
El proceso siempre debería ser igual, primero creas el archivo con el nombre sugerido en la parte inferior de la ventana de exportación y lo guardas en la dentro de la carpeta "config/install" de tu módulo personalizado.
A continuación, como sugerencia, en la primera línea de cada archivo, pega el nombre sugerido como comentario, o sea, poniéndole una almohadilla delante, de esta forma ayudarás a Drupal a identificar el archivo y a ti de guía para confirmar si haz cambiado el nombre del archivo por error.
Por último, copia todo el código que está justo debajo del UUID en la interfaz y pégalo en cada uno de tus archivos, dejando algo de espacio a partir del comentario que haz pegado al principio.
2.- Todos los contenidos tienen obligatoriamente tres archivos fundamentales:
El resto de archivos que formarán tu módulo, serán los campos que vienen por defecto o que han sido creados por ti, como taxonomías, patrones de url, campos referenciados a otros contenidos, etc.
3.- Cada campo tiene dos archivos uno que define sus propiedades específicas, empieza por "field.field", ejemplo "field.field.node.servicio.field_descripcion_del_servicio.yml" y otro que define la manera en que serán guardados los datos, empieza por "field.storage", ejemeplo "field.storage.node.field_descripcion_del_servicio.yml"
Por lo tanto al crear el archivo para cada campo asegúrate de hacerlo con sus correspondencias, antes de pasar a los archivos del siguiente campo, así tendrás más control si quieres modificar los nombres que crea Drupal a los campos por defecto y evitas errores por falta de algún archivo equivalente.
4.- No olvides añadir dependencias. Siempre que vayas a crear contenidos siguiendo este método, añade al menos una dependencia en el archivo info.yml de tu módulo, eso facilitará que te acostumbres mejor a la estructura de creación de este archivo.