¿Sabías que, para poder personalizar la forma en que muestra las etiquetas el componente de etiquetas (com_tags) nativo de Joomla, se hacen a través de los “JLayout”?. ¡No! Pues este truco creo que te va a servir y mucho.

Primeramente tenemos que aclarar que es todo esto de JLayout. “Es un sistema genial, detrás del simple concepto de trozos de código reutilizables que permiten crear HTML a partir de objetos/arrays de datos.”

Estoy seguro que les pasó lo mismo que a mi, en cuanto leí este concepto... nos quedamos botados. Para ello, Roberto Segura escribió un artículo en el mes de noviembre del 2013 al respecto, donde nos explica detalladamente qué hay detrás de este sistema, y hasta la forma en que podemos usarlo. Es importante la lectura completamente de este artículo para entender este truco.

A pesar que el artículo explica todo lo necesario para adentrarse en este sistema, por lo menos a mi, me quedaron dudas de como llevarlo a cabo. Gracias a la amabilidad de @phproberto (como se le conoce en la redes) el cual tuvo la gentileza de explicarme la parte que no encajaba.

Por ello he decidido traerle a ustedes un pequeño ejemplo, en forma de truco, para que de esta forma no caigan en la misma duda, y puedan llevarse de primera mano, la implementación extraordinaria de este sistema.

Primer Paso

Como primer paso, iremos al menú de componentes, y accederemos al componente de etiquetas.

Acceder al componente de Etiquetas. Clic en la imagen para ampliarla.

Dentro, creamos 5 etiquetas a modo de ejemplo. Una vez creadas se mostraran de esta forma:

Etiquetas de ejemplo creadas en el componente. Clic en la imagen para ampliar.

Segundo Paso

Luego de tener las etiquetas que vamos a usar, el siguiente paso es introducirlas en el artículo. Para ello creamos o editamos un artículo, y en el campo “Etiquetas” las seleccionamos.

Etiquetas asignadas al artículo. Clic para ampliar la imagen.

Si vamos al frontend del sitio, y visualizamos el artículo recién creado o editado veremos algo como esto:

Estilo por defecto de las etiquetas en el frontend. Clic para ampliar la imagen.

Como pueden apreciar, tenemos nuestras etiquetas visibles y con un estilo por defecto. Por lo que la pregunta es ahora ¿cómo cambiar este estilo?.

Si buscamos la línea que se encarga de esto en el archivo default.php que esta en \tu_sitio\components\com_content\views\article\tmpl , vemos lo siguiente:

Código que muestra las etiquetas en el archivo default.php. Clic para ampliar la imagen.

Como la mejor forma de explicar esto, es explicar como si se tratara de personas que no conozcan nada sobre código, pues diré entonces que estas 5 líneas lo que hacen es cargar el sistema de JLayout, y mostrar un layout (diseño, estructura) correspondientes a las etiquetas.

Con esto la siguiente pregunta a formular es la siguiente: ¿Si las líneas anteriores no tienen nada que ver (al menos directamente) con el estilo que se muestra de las etiquetas, entonces en dónde están las que sí tienen que ver con esto?

Si vamos a la siguiente carpeta \tu_sitio\layouts\joomla encontraremos todos los layout que podremos usar. En nuestro caso, el que nos interesa es el relacionado con las etiquetas. Este archivo se llama tags.php y esta en \tu_sitio\layouts\joomla\content.

Si abrimos el archivo veremos esto:

Código del archivo tags.php. Clic para ampliar la imagen.

Como ven, o si no lo ven :) , estamos en presencia del archivo que se encarga del estilo o de la forma en que se muestran las etiquetas en el frontend. Por ejemplo, en la imagen anterior les marco la parte en donde se ponen dos clases que son las encargada de que las etiqeutas tenga este estilo obalado. Estas clases, por supuesto, vienen del framework bootstrap y en la documentación de él la puedes encontrar . ¡BINGO!

Una vez dado con nuestro archivo buscado, pues nuestro siguiente paso es modificarlo de la forma correcta.

Tercer Paso

¿Cual ustedes creen que sea la forma correcta de modificar este archivo?. El que contesto, “Directamente en él”, pues tiene 0 puntos en su respuesta :D . Por supuesto, la forma correcta de hacer modificaciones en Joomla, está bajo una palabra que muchos conocerán, OVERRIDE.

Por lo que nuestra siguiente pregunta en cola es: ¿Como hacer un override a este archivo, si los override sólo se le hacen a los componentes y módulos?

Es verdad, hasta Joomla 3.2 era así, pero como ustedes saben Joomla tiene más de un truco bajo la manga. Por tanto, a su lista de posibles override súmele los layout.

Si ha leído detenidamente, el artículo que le recomendé al principio de @phproberto, pues se dará cuenta que se le puede hacer un override a la forma en que se muestran las etiquetas en cualquier parte del sitio, o específicamente a la forma en que se muestran las etiquetas en el com_content.

En nuestro caso usaremos la segunda. Para esto, añadimos las siguientes carpetas: \tu_sitio\templates\tu_plantilla\html\layouts\com_content\joomla\content. Una vez creado todo este directorio, pues lo siguientes es copiar el archivo tags.php para la carpeta content creada en el directorio anterior. Y con esto, ya tenemos nuestro pequeño truco realizado.

Para comprobar que todo funcionó, agregaré la palabra “Prueba” al lado del nombre de cada etiqueta, de esta forma:

Modificación en el archivo tags.php. Clic para ampliar la imagen.

Guardamos y actualizamos el artículo en el frontend, y obtendremos el resultado esperado:

Salida personalizada de las etiquetas. Clic para ampliar la imagen.

Ya que conocemos la forma de personalizar las etiquetas, pues solo queda de parte tuya, añadir el diseño o la estructura personalizada. Tal vez el colega y colaborador en la magazine, Luciano Martínez, nos deleite con una personalización de las etiquetas en el próximo artículo del “Override del Mes” ya que el es el que esta llevando esta sección en la revista, de esta forma lo tendremos todo. ¿Qué dicen, lo animamos?

Comparte tu truco

Como ven, es un artículo “pequeño”, pero estoy seguro que algunos se han sorprendido con este pequeño cambio. Nos gustaría sorprendernos también con los tuyos, ya que estoy seguro que tienes alguno "bajo la manga". Comparte con la comunidad algún "truco" de tu preferencia sin importar lo pequeño o sencillo que parezca y conviértete en un autor más de nuestra revista, la revista de la comunidad. El truco será compartido bajo tu nombre, y verán que no es tan difícil participar en esta revista de todos.

Para enviarlo, pueden usar dos vías. La primera, enviando un correo a la siguiente dirección de correo electrónico: Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo.. La segunda, es usando los comentarios del artículo. En este caso, el comentario no será publicado con el truco enviado, pero si con un breve texto de que has participado y has aportado tu truco. Luego, solo es esperar a la próxima edición, donde se expondrá tu truco, y seras un autor más de esta revista de la comunidad Joomla.

Eso sí, traten de enviar lo más detalladamente posible el truco. Y si pueden adjuntar capturas de imagenes, pues es mucho mejor.

No pierdan la oportunidad de convertirse en un autor de tú revista y unirte a la familia de la magazine.