Clicky

Habilitar código iframe en campos personalizados de Joomla

logo Joomla con iframe

Migración de vídeo de Joomla K2 a artículos de contenido utilizando Extra fields de Joomla

Lo que se propone con una migración de un sitio web de un ecosistema a otro es mejorar la legibilidad del código, afianzar la seguridad, habilitar nuevos artefactos de diseño y usabilidad, todo ello manteniendo en la medida de lo posible las URLs que los buscadores conservan en sus algoritmos de búsqueda.

Conseguir todo ello no es fácil máxime si lo que pretendemos es actualizar, y a la vez compaginar, ese ecosistema (en este caso Joomla) con la última versión del lenguaje de programación PHP que es el motor con el que se manejan la mayoría de los Sistemas de Gestión de Contenidos (CMS) para "fabricar" un sitio web.

Lo que pretendemos con esta seríe de artículos es deshacernos por completo de una Extensión de Joomla llamada K2 que lleva años sin actualizarse y que no es compatible con las últimas versiones de la serie 4 de Joomla y tiene serios problemas para trabajar correctamente con las últimas versiones de PHP de la serie 8.

K2 es, o era, una popular y poderosa extensión de contenido para Joomla con características similares a CCK (kit de construcción de contenido), que permite una mejor gestión de contenidos específicos de nuestro sitio y una forma más sencilla para mostrar los datos con sentido. Cada elemento de K2 se puede ampliar con campos extra (en aquel entonces Joomla todavía no tenía implementados capos extra, algo que empezó con la versión 3.7 de Joomla).

En el sitio que pretendemos migrar estamos utilizando una plantilla que utiliza un campo extra de K2 para la inclusión de un código <iframe> que incrusta, por ejemplo, vídeos de Youtube o Facebook en la cabecera de nuestras páginas. Este <iframe> lo facilitan las mismas redes sociales para facilitar el trabajo.

Cómo explicábamos en nuestro anterior artículo "Migración manual de items K2 a artículos predeterminados de Joomla! 4" primero tenemos que migrar los artículos (o Items) de K2 a los artículos predeterminados de Joomla, trabajando en la base de datos a través de PhpMyAdmin (es decir migrar las tablas #_k2_items a #_content, donde el # es el prefijo de nuestra tabla).

En aquella ocasión creamos en la tabla #_content un nuevo campo (no confundir con el campo extra del que hablamos en la portada, este otro campo se refiere al de la tabla de la base de datos) llamado "video" donde migramos el campo extra de #_k2_items también llamado "video" a los artículos de contenido de Joomla. El problema es que en aquella ocasión no conseguimos vincular este nuevo campo con una llamada en lenguaje PHP para que se integrase en el contenido del artículo normal de Joomla.

Después de mucho buscar soluciones, encontramos que se podían utilizar los campos extra o personalizados de Joomla (Joomla Extra Fields o Custom Fields) . Vamos a explicar paso a paso los pasos que hemos seguido.

Utilizar un campo extra de Joomla para publicar código HTML sin filtrar

1. Permitir texto sin filtrado en la Configuración Global de Joomla

En la Configuración Global de Joomla tenemos la opción de permitir o prohibir a los usuarios, desde el Super Administrador al usuario normal, que en el texto del sitio utilice diversos filtros para añadir un grado de seguridad a las publicaciones. Estos son: Lista prohibida predeterminada, Lista prohibida personalizada, Lista permitida, Sin HTML, Sin filtrado. Vamos a Configuración Global → pestaña Filtros de Texto

filtros de texto en Joomla

Dado que normalmente los artículos son publicados por los Super Administradores o Administradores, en nuestro caso en los Filtros de Texto, como vemos en la imagen de arriba, vamos a consignar a estos dos grupos de usuarios para que no se filtre el texto (Sin filtrado).

2. Preparar el editor WYSIWYG

Tanto si utilizas el editor TinyMCE predeterminado de Joomla como otro editor como JCE Editor debemos ajustar algunas configuraciones para que nos permitan utilizar el código <iframe>

En el caso de TinyMCE tenemos que ir a Sistema → Plugins → Editor - TinyMCE

configuración TinyMCE

De la sección "Elementos prohibidos" eliminaremos iframe y en la sección "Elementos válidos" colocaremos iframe[*]

En el caso de JCE iremos a Componentes → Adminstración JCE → Perfiles → Default → pestaña Editor Parameters

A la izquierda en Limpiar y Salida → Limpiar HTML elegir NO

JCE limpiar salida

Luego en esa misma pantalla en Avanzado, comprobamos que en "Atributos Prohibidos" y "Elementos Prohibidos" no esté iframe y en "Elementos Extendidos" añadiremos iframe

JCE avanzado

3. Habilitar Campos personalizados para artículos de Joomla

Para que podamos trabajar con esta configuración debemos habilitar los Campos personalizados en los artículos de Joomla. Para ello nos vamos a Contenido → Artículos y en los botones superiores elegiremos Opciones (con un icono de engranaje). En la pestaña "Integración" vamos a "Campos personalizados" y en el apartado "Habilitar campos personalizados" ponemos SI .

artículos, campos personalizados

4. Crear un nuevo Campo Extra o Personalizado

Con lo que hemos hecho hasta ahora hemos preparado el camino para, primero que nuestro editor no nos limpie el código HTML y segundo permita elementos iframe en nuestros artículos. Ya estamos preparados por tanto para crear un nuevo campo personalizado para por ejemplo embeber o incrustar los vídeos de Youtube en la cabecera de nuestros artículos.

Primero crearemos, aunque es opcional, un nuevo Grupo de campos. Para ello el el Menú de la derecha de Joomla abriremos la sección "Contenido" y pincharemos en "Grupos de Campos" → Nuevo.

nuevo grupo de campo

Daremos un nombre y una descripción y pincharemos en "Guardar y Cerrar"

grupos de campos vídeo

Ahora vamos a crear un nuevo Campo personalizado. Para ello nos vamos otra vez a la sección "Contenido" y pincharemos en "Campos" y el botón "Nuevo" (la pantalla es parecida a la de más arriba). Una vez en el nuevo campo dejaremos las opciones como se ve en esta imagen:

nuevo campo personalizado

En la pestaña "General", en la sección "Tipo *" elegiremos "Editor (editor)". Veremos que al pasar de la opción predeterminada de "Text" a "Editor" nos cambia la última opción "Filtro" de esta pantalla donde luego elegiremos Bruto (raw en inglés). Esta última opción es la más importante para que el editor no nos limpie el código iframe.

Después en la pestaña "Opciones" de esta misma página podemos elegir dónde queremos que aparezca nuestro campo personalizado. Para ello vamos a la sección "Visualización automática" y elegiremos la posición entre "Después del título", "Antes de mostrar contenido", "Después de mostrar contenido" y "No mostrar automáticamente"

posición del campo

5. Publicar un artículo

Con los pasos anteriores ya estamos en disposición de crear un nuevo artículo con un campo personalizado a nuestra medida. Para ello vamos a "Contenido" → "Artículos" y pinchamos en nuevo. Trabajaremos como es habitual al escribir un artículo: escribiendo el texto, añadiendo imágenes, eligiendo categoría, etc.

Pero ahora veremos una nueva pestaña en nuestro editor, "Video", que aparece tras los pasos seguidos anteriormente con los Campos personalizados:

Donde vemos que nos aparece un editor WYSIWYG, en este caso el que tengo predeterminado que es JCE. Para que nuestro código <iframe> del vídeo facilitado en este caso por Youtube, y aparezca sin problemas el vídeo en el contenido del artículo debemos cambiar el editor a la visualización "code", dónde pegaremos nuestro código:

artículo nuevo, campo video

Si ahora cambiamos el editor al modo normal "Editor" nos aparece ya el vídeo que queremos incrustar:

artículo nuevo, campo video modo editor

Procedemos a publicar nuestro artículo como hacemos habitualmente y este sería el resultado:

artículo nuevo publicado

Migración de vídeos de Joomla K2 a Campos extra de Joomla

En el caso de que necesitemos migrar una gran cantidad de vídeos desde el componente K2 de Joomla a los campos personalizados recién creados debemos hacer algunas consultas SQL a la base de datos.

Para que no se produzcan errores en las consultas SQL, primero debemos hacer un pequeño cambio en nuestra configuración MySQL en el archivo /etc/my.cnf o /etc/my.cnf.d/mariadb-server.cnf dependiendo de vuestro servidor. Añadiremos al archivo dentro de la sección [mysqld] la siguiente línea:

[mysqld]
sql_mode = ""

y reiniciaremos el servidor mysql, normalmente accediendo mediante SSH y ejecutando (no olvidar después de acabar las consultas SQL volver a dejar el archivo como estaba y reiniciar de nuevo el servicio):

systemctl restart mariadb.service

Los Campos personalizados de Joomla se guardan en una tabla llamada #_fields_values, por lo que debemos copiar en ella el contenido del campo "video" que creamos como explicábamos en nuestro anterior artículo "Migración manual de items K2 a artículos predeterminados de Joomla! 4". Ejecutaremos la siguiente consulta SQL a través de PhpMyAdmin:

INSERT INTO `basededatos`.`#_fields_values` (`item_id`, `value`)
SELECT `id`, `video`
FROM `basededatos`.`#_content`

Dónde sustituiremos "basededatos" por el nombre de nuestra base de datos y "#" por nuestro prefijo de tabla.

La tabla #_fields_values tiene un campo llamado "field_id" donde guarda el ID (identificador del campo personalizado que hemos creado en el paso 4 anterior), por lo que los campos que hemos importado no tendrán ningún ID y no se asociarán con nuestro campo personalizado. Para solucionar esto debemos ejecutar la siguiente consulta SQL:

UPDATE #_fields_values
SET field_id = '4';

Dónde como antes "#" es el prefijo de la tabla, y "4" sería nuestro identificador. Para averiguar este número sólo hay que ir a los Campos de Joomla y ver qué número tiene asignado:

identificador del campo

Con esto ya tenemos migrados nuestros vídeos de K2 a los artículos de Joomla.

Solucionando posibles problemas

En ocasiones puede que después de realizar las anteriores operaciones en la base de datos los artículos de Joomla sean visibles en la base de datos y en el frontend pero no visibles en el backend, para esto debemos realizar las siguientes consultas SQL en nuestra base de datos:

INSERT INTO #_workflow_associations
(item_id, stage_id, extension)
SELECT id as item_id, '1', 'com_content.article' FROM #_content;

Y

update #_content
set state = 1 - state;

Sustituyendo "#" por el prefijo de las tablas de nuestra base de datos.

De cualquier manera cada sitio web es un mundo, por lo que si queréis una implementación personalizada podéis dejar un comentario en la publicación de Facebook sobre este artículo y veremos que podemos hacer.

Jesus_Caceres