Blogs de /blog/drupal-version/5 Drupal

Añadir tipos Paragrahs a contenidos en Drupal

/ Lun, 24/10/2022 - 09:20 / comments

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:

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":

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):

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

Adquirir entrada (Enlace):

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:

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

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:

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

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.

Creacion de Menus en Drupal

Site Building

/ Jue, 13/10/2022 - 09:00 / comments

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".

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>:

Contacto un enlace al formulario de contacto:

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

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:

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

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.

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

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.

Instalación de módulo Admin Toolbar en Drupal

Tutorial de instalacion del modulo Admin Toolbar en Drupal

Site Building

/ Lun, 10/10/2022 - 16:03 / comments

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:

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:

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

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

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”:

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.

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

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.

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.

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.

Eliminar cabecera y añadir un before

FrontEnd

/ Vie, 23/09/2022 - 18:13 / comments

Eliminar cabecera y añadir un before, me ha parecido interesante compartir esto, con un ejemplo práctico, vamos a ver como en el formulario de inscripción a una oferta de trabajo de una web, nos encontramos con que en la parte superior aparece una información que al cliente no le interesa, en este caso concreto un texto, pero podria aplicarse tambien en el caso de una imagen o un simbolo.

Para ello, desde el navegador inspeccionamos el texto con el botón derecho del ratón, y le añadimos el comando display:none.

Este comando hace que el texto se oculte, y además hace también que el espacio dónde estaba disminuya.

Una vez hecho ésto, volvemos a inspeccionar la zona que nos ha quedado (de la misma manera que antes, clic derecho - inspeccionar en el navegador), y le añadimos al div un padding 0.

Por último, queremos añadir una "x" más grande, ya que la actual es muy pequeña y puede pasar desapercibida, para ello, a la que tenemos actualmente, le ponemos un display none (así la eliminamos) y después añadimos la que el cliente nos requiere colocándole un before al botón.

Si os fijais en el codigo mostrado arriba, vereis que también hemos posicionado nuestro before para que quede en uno de los laterales.

De esta manera hemos conseguido ocultar el texto que no queriamos mostrar a requirimiento de cliente y cambiar el aspa de cierre que existia por una con mejor visualizacion y posicionada en su lugar natural.

Y esto ha sido el tutorial de como eliminar cabecera y añadir un before en Drupal

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

Campo de tipo referencia a termino de taxonomía en Drupal

Site Building

/ Jue, 22/09/2022 - 08:57 / comments

Campo de tipo referencia a termino de taxonomía en Drupal. A continuación, se detalla como añadir en Drupal un campo en el que las opciones de selección se autocompletan con términos de taxonomía referenciada. Primero crearemos un vocabulario llamado “Tipos de noticias” desde /admin/structure/taxonomy/add

Con el vocabulario ya creado se agregarán los términos: Científica, Cultural y Deportiva.

Posteriormente, creamos el campo “Tipo noticia” para el tipo de contenido “Artículo” desde /admin/structure/types/manage/article/fields/add-field

En la edición del campo , seleccionamos el vocabulario de taxonomía creado previamente : Tipos de noticia.

Una vez tenemos el campo “Tipo noticia” creado y configurado, podemos ir a “Administración de la visualización de formulario” desde /admin/structure/types/manage/article/form-display para aplicar el campo creado al formulario de creación del tipo de contenido “Artículo”.

Así, elegiremos el tipo de control: Lista de selección, un modo ‘select’ que nos nuestra un listado desplegable.

Si ahora añadimos un contenido de tipo Artículo desde /node/add/article vemos que se puede elegir el término de vocabulario desde el selector.

De forma que si en adelante se añade nuevos términos al vocabulario “Tipos de noticias”, aparecerían como posible selección del campo “Tipo noticia”.

Para mostrarlo, se añadirá un nuevo término “Social” al vocabulario que referencia el campo:

Si ahora editamos el nodo “Primera noticia científica” que se creó con anterioridad, o bien, creamos un nuevo contenido de tipo Artículo, se puede ver como permite seleccionar el nuevo término “Social” que hemos agregado al vocabulario “Tipos de noticia”.

Siendo un tipo de campo que se completa con términos de referencia a un vocabulario (taxonomía), las opciones que permitirá elegir este campo serán los términos que tengamos añadidos al vocabulario en cuestión.

Para finalizar, señalar que se puede modificar el orden jerárquico con el que se presentan las términos desde el listado de términos, posicionándolos en el orden con el que se prefieran mostrar, en este caso “Social” ha subido una posición

Y esto ha sido el tutorial de como crear un campo de tipo referencia a término de taxonomía en Drupal

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

Ampliar caja de contenido en Drupal

FrontEnd

/ Mié, 14/09/2022 - 19:25 / comments

Tutorial para ampliar caja de contenido en Drupal. En muchas ocasiones, en el desarrollo de portales con Drupal, nos encontramos con que queremos ampliar una caja, de tal forma que cuando se añadan diferentes opciones, el usuario lo pueda visualizar y eliminar lo quiera sin problema.

Tal como lo tenemos ahora, es imposible.

Para ello, lo primero que tendremos que hacer es inspeccionar la caja pulsando click derecho sobre ésta y añadirle a su contenedor un width 100% para que nos abarque todo el ancho.

Una vez hecho esto, ya podríamos añadir varias opciones, pero aún así, si ponemos más opciones de lo que es el ancho, aparecerían debajo (en una segunda línea) y no las veríamos.

Tendremos que ponerle a la caja un alto máximo, por ejemplo, de 84px (ya que la caja tiene una altura de 42px y queremos que por lo menos se visualicen dos líneas).

Después, tenemos que pensar en la posibilidad de que, si hubiera muchas opciones y se sobrepasan esas dos líneas, podamos hacer scroll y ver todo.

Podríamos poner la caja con un alto más grande, pero si el usuario añadiera muchas opciones la caja sería infinita y no nos interesa.

Para ello, colocamos a la caja la propiedad overflow: auto y con esto conseguimos que lo que haya a partir de 84px de altura, aparezca en scroll hacia abajo.