Drupal Español - Blog

Tutorial sobre como añadir tipos Paragrahs a contenidos en Drupal

Paragrahs es un módulo de Drupal que nos permite crear campos agrupados los cuales su podrán añadir posteriormente, por ejemplo, a contenidos mediante un campo tipo Párrafo.
Este módulo se podría obtener del repositorio de Drupal: https://www.drupal.org/project/paragraphs

Una vez instalado el módulo Paragraphs:

Image

Se creará un nuevo tipo Paragrahs denominado "Entradas", que posteriormente se añadirá como campo tipo Párrafo a un tipo de contenido denominado "Evento". 
Para ello, vamos a "Paragraphs type" dentro en el panel de administración de Drupal en admin/structure/paragraphs_type

Elegimos la opción "Add paragraphs type " y le asignamos un título: Entradas. Se activará la opción "Permitir la adición a la biblioteca":

Image

Image

 Al tipo "Entradas" le incorporaremos campos de tipo: Fecha, Referencia a término de taxonomía y Enlace , de forma que quedarán agrupados dentro del paragraphs creado. Para ello, elegimos la opción "+ Añadir un campo".

Fecha y Hora (Fecha):

Image

 Ciudad (Referencia a término de taxonomía):

Image

Image

 Adquirir entrada  (Enlace):

Image

Image

Con el tipo Paragrahs "Entradas" creado, se añadirá un campo de tipo "Párrafo" al tipo de contedido evento desde /admin/structure/types/manage/evento/fields
Se denominará "Asistir a evento", configurado con valores ilimitados:

Image

 Para este campo "Asistir a evento", se seleccionará el Paragrahs "Entradas" credado anteriormente.

Image

 Con la configuración del campo establecida, se puede añadir un contenido de tipo Evento y completar el campo Paragrahs "Asistir a evento" con la información, añadiendo tantos campos agrupados como sea necesario.
En esta ocasión, completaremos dos campos del tipo Paragraghs "Entradas" dentro del contenido "Primer Evento", haciendo referencia a dos ciudades con sus respectivas fechas y enlaces:

Image

Image

 Si visualizamos el evento vemos como en la parte inferior aparece toda la información completada para el campo "Asistir a evento":

Image

 De esta forma, se observa como se pueden agrupar tipos de campos dentro de un tipo de campo Paragrahs, y así automatizar la inserción de datos similares en un mismo contenido en Drupal.

Y esto ha sido el tutorial para añadir tipos Paragrahs a contenidos en Drupal

Si necesitas más ayuda, visita este enlace o contacta con un desarrollador.

Tutorial para la Creacion de Menus en Drupal

Nuestro CMS favorito ofrece la posibilidad de crear y configurar menús con diferentes estructuras en nuestro proyecto web, de forma que se pueden situar y visualizar en diferente regiones de la página.
Para ver su funcionalidad, se creará un menú configurando los enlaces más frecuentes de sitio. Para ello, vamos a la zona de administración de creación y edición de menús en /admin/structure/menu
Seleccionamos "Añadir menú". Se asignará el título "Sitios frecuentes".

Image

Con el menú anterior ya creado, se procederá a añadir los diferentes enlaces necesarios para construir el menú. Se creará la siguiente estructura de menú con sus correspondientes enlaces:
Sitios frecuentes
 - Inicio (<front>)
 - Login (/user/login)
 - Contacto (/Contact)
 - Artículos (/articles)
   - Primer artículo (/node/1)

Vemos como se pueden asignar jeraquías a la estructura del menú, de forma que tengamos el enlace principal como raíz, y a partir de ahí los demás enlaces que lo forman.
Así, para añadir enlaces al menú se seleciona "Añadir enlace" dentro del menú creado, elegimos una etiqueta para el título y se indica la ruta a la que llevará el enlace.
Para el elace a Inicio usaremos <front>:

Image

 Login será un enlace al formulario de acceso al sitio web:

Image

Contacto un enlace al formulario de contacto:

Image

El enlace Artículos llevará a un listado con todos los contenidos de tipo Artículo del sitio:

Image

Dentro del enlace Artículos se creará un sub-enlace al contenido "Primer artículo". Se observa que se podría escribir el título del contenido en el input autocompletable, pues al ser un contenido del sitio se detecta automáticamente sin necesidad de indicar su ruta:

Image

 De forma que si la ruta del artículo cambiara el enlace se vería inalterado y continuaría funcionando correctamente.

Image

Con el menú "Sitios frecuentes" y sus enlaces ya creados, se sitiuará en el sitio web, para ello iremos a "Diseño de bloques" en /admin/structure/block
Se situará en en la zona "Barra lateral", pare ello se selecciona "Colocar bloque" y se filtra por el nombre del menú creado "Sitios frecuentes", aceptar y guardar.

Image

Image

Image

Si visualizamos el sitio web se observa como el menú con los enlaces configurados se ha posicionado en la barra lateral:

Image

De esta forma, se pueden configurar menús personalizados en Drupal y situarlos en la zona del proyecto web que sea necesario.

Y esto ha sido el tutorial para la creacion de menus en Drupal

Si necesitas más ayuda, visita este enlace o contacta con un desarrollador.

Hoy vamos a ver este Tutorial de instalacion del modulo Admin Toolbar en Drupal

Drupal nos proporciona una barra de administración  predeterminada para acceder a sus funcionalidades desde el panel de administración:

Image

Sin embargo, existe la posibilidad de mejorar esta barra de administración por defecto mediante la instalación del módulo llamado “Admin Toolbar”, que dará la opción de trasformar esta barra administrativa en un tipo de menú desplegable. De manera que se ofrece así un acceso más rápido y sencillo a las zonas de administración del sitio web en Drupal.
Para la instalación del módulo “Admin Toolbar”, o de módulos en general, se podría realizar o bien desde la interfaz en la opción de “Ampliar” de la barra de administración, o mediante drush descargando el proyecto admin_toolbar vía composer.

Para su instalación vía composer y drush, iremos al repositorio de Drupal donde se encuentre alojado el proyecto admin_toolbar: https://www.drupal.org/project/admin_toolbar
Una vez localizado, se lanzará el comando, el cual añadirá el módulo al sitio web:

Image

Después, instalaremos el módulo con el siguiente comando:

Image

Finalmente se vacía caché, quedando así el módulo instalado en el sitio web:

Image

Otra opción para la instalación de módulos, en esta ocasión “Admin Toolbar”, podría ser desde la interfaz del panel de administración de nuestro proyecto. Para ello, desde el repositorio de Drupal se descarga el fichero del módulo.

Posteriormente, elegiremos la opción “Ampliar” en /admin/modules y seleccionaremos “Add new module”:

Image

Se observa que se puede añadir el fichero admin_toolbar-3.0.3.tar.gz  / admin_toolbar-3.0.3.zip  o indicar la url del proyecto en Drupal.

Image

En esta ocasión se elegirá la descarga del fichero admin_toolbar-3.0.3.tar.gz

Image

Image

Después, lo añadimos para su instalación desde el panel de administración en /admin/modules

Se seleccionará “Admin Toolbar” y “Admin Toolbar Extra Tools” e instalar.

Image

Cuando finaliza la instalación, si se utiliza la barra de tareas del panel de administración, observamos que ahora aparecen los menú de forma desplegable para una acceso más sencillo y rápido a cada zona de la administración en Drupal.

Image

Y esto ha sido el tutorial de instalacion del modulo Admin Toolbar en Drupal

Si necesitas más ayuda, visita este enlace o contacta con un desarrollador.

Para iniciar este tutorial de filtrado de idioma en vistas de Drupal, antes de comenzar a traducir un sitio web en Drupal tendríamos que añadir el idioma en admin/config/regional/language/add , en esta ocasión hemos agregado idioma inglés.

Image

Image

Con el idioma ya añadido, se pueden activar los campos del tipo de contenido que se necesite traducir como traducibles desde /admin/config/regional/content-language

Se activarán como traducibles los campos “título” y “body” del tipo de contenido “Artículo”:

Image

Image

Una vez tenemos traducidos los contenidos, como en este caso dos contenidos de tipo Artículo traducidos a inglés:

Image

Seguidamente procedemos a crear una vista para ver la aplicación del filtrado por idioma en Drupal. Con este tipo de filtrado en vistas principalmente lo que logramos es que no se muestren los contenidos duplicados en la visualización de la vista, detectando el sitio web que idioma mostrar en cada caso según el idioma seleccionado en la interfaz.

De manera que creamos la vista a la que posteriormente añadiremos el filtro de idioma desde la siguiente ruta /admin/structure/views/add , se agregará un nombre requerido a la vista y más abajo se puede añadir el nombre interno de sistema para la vista que se está creando:

Image

Como opciones de la vista se puede seleccionar mostrar Contenido de tipo Artículo ordenado por los más recientes primero:

Image

Para la visualización de la vista, se ha creado una página con ruta /articles-list donde se mostrará el listado de artículos en forma de tabla:

Image

Con la vista ya creada si accedemos directamente a la ruta para su visualización <nombre-proyecto>/articles-list se puede observar que muestra los contenidos en ambos idiomas, independientemente del idioma seleccionado para la interfaz de la web.

Image

Así, primero en la opción “Idioma de visualización” se añadirá Idioma Texto de la interfaz seleccionado para la página:

Image

Image

Si se vuelve a visualizar la vista con el cambio <nombre-proyecto>/articles-list observamos que ya no se muestran contenidos en los dos idiomas, sólo en el seleccionado, en este caso español. Sin embargo, los contenidos aparecen repetidos:

Image

Para evitar la repetición de los contenidos bastaría con añadir un criterio de filtrado por idioma para la vista:

Image

Image

Image

Con el criterio de filtrado ya aplicado si vamos a la visualización de la vista <nombre-proyecto>/articles-list ya no se muestran los artículos duplicados.

Image

Y esta es el modo de hacer un filtrado de idioma en vistas de Drupal.

Si necesitas más ayuda, visita este enlace o contacta con un desarrollador.

Instalar y configurar slick carousel Si alguna vez habeis tenido que desarrollar una web, seguro que os han pedido algun slider con fotos y/o videos. Para mi gusto, la mejor opción para ello es usar slick carousel, puesto que me permite integrarlo con views y configurarlo a mi gusto.

Aunque pudiera parecer complicado, instalarlo y configurarlo es realmente sencillo, veamos como.

1.Instalar y Configurar Slick
Instalar los módulos:

• Slick: https://www.drupal.org/project/slick

Nota: cuando se instala el módulo Slick, se instala también Slick UI.

• Slick View: https://www.drupal.org/project/slick_views

Una vez instalados ir a Ampliar > List> Slick UI > configurar

Image

Ahora hay que crear un conjunto de opciones de Slick

Image

A modo de ejemplo se va a llamar: Store_Slick

Image

En el menú lateral izquierdo ir a la opción Configuración

Image

Seleccionar las siguientes opciones y guardar.

• Accesibility
• Arrows
• Dots
• Infinity
• Swipe
• Touch move
• Use CSS
• Use CSS Transforms
• jQuery easing: Linear
• Wait for animate

2.Añadir el nuevo conjunto de opciones a una vista
Dentro de la vista creada ir al apartado FORMATO > Formato.

En esta ventana se selecciona el estilo que va a tener o como se va a ver la información de la vista, y es aquí donde debe aparecer la opción Slick Carousel (si se han instalado correctamente los módulos).

Image

Lo siguiente que se tiene que hacer es configurar las opciones de estilo. Para ello:

• Seleccionar la casilla Vanilla Slick.
• En Optionset main, justo debajo de la anterior, seleccionar Store_Slick (ó como se haya llamado al conjunto de opciones de Slick anteriormente).
• En Skin main, a la derecha de la anterior, seleccionar Classic
• Y por último, elegir el número (X) de elementos que por defecto se van a mostrar en el, independientemente del número total que el carrusel muestre. Para seguir con el ejemplo,  van a ser tres elementos los que se verán por defecto
  • Grid large 3
  • Grid medium 3
  • Grid small 3

El resultado será el siguiente:

Image

Y esto ha sido Instalar y configurar slick carousel, recordad que tenéis este y otros manuales de ayuda en el blog y si aun así no halláis respuesta a vuestro problema, podéis publicar vuestras preguntas en el tablón, donde la comunidad os ayudará a resolverlas.

Mostrar datos externos (API) mediante vistas de Drupal, tenemos la necesidad de mostrar datos procedentes de la respuesta de una API en nuestro Drupal. Para ello utilizaremos las vistas de Drupal mostrando estos datos como si pertenecieran al propio Drupal con las ventajas de utilizar vistas. Para ello crearemos una “tabla” ficticia con sus respectivos campos dónde pasaremos los datos procedentes de la respuesta de la API.

El primer paso es crear esta “tabla” ficticia con los campos dónde mostraremos los datos. Mediante el hook views data defininos lo que sería nuestra tabla y posteriormente los campos.

Image

Una vez definidos estos datos tenemos que crearnos nuestro plugin para mostrar estos datos en la vista. Para ello nos crearemos nuestro query plugin inyectando el contenedor de nuestra clase para consumir los datos de la API.

Image

Una vez que tengamos definido el Query plugin, podemos pasarle nuestros datos a los campos a través de la función execute. Realizamos la llamada a la API y almacenamos la respuesta. Ahora vamos añadiendo cada fila de datos devuelta por la API a la vista.

Image

Una vez hecho todo esto proceso, cuando vamos a crear una vista mediante la administración. En el selector para seleccionar que queremos mostrar, vemos nuestra “tabla”.

Image

Una vez en la vista, podemos seleccionar el tipo tabla para visualizar los datos mostrando campos. Al añadir campos, veremos todos los campos definidos previamente.

Image

Y esto ha sido Mostrar datos externos (API) mediante vistas de Drupal, recordad que tenéis este y otros manuales de ayuda en el blog y si aun así no halláis respuesta a vuestro problema, podéis publicar vuestras preguntas en el tablón, donde la comunidad os ayudará a resolverlas.