barra azul

cabecera reducida 1 sin fondo

BLOG - Joomla!

Hilo de Ariadna

Crear una Galería de imágenes con SEBLOD para Joomla - Segunda parte

Este artículo responde a la pregunta realizada por un miembro de nuestra comunidad en ese sentido, pero en realidad trata sobre cómo utilizar un plugin de terceros en nuestros formularios de SEBLOD para el campo "subir archivo".

La solución expuesta puede ser utilizada para integrar otros plugins con otros tipos de archivo de medios. Construir una cadena con el código para un iframe, usar un plugin o visualizadores en línea para el tipo de archivo que incluyamos en nuestros formularios.

En este caso incorporaremos un reproductor de archivos de audio en un formulario SEBLOD, para que se pueda escuchar la música que suban nuestros usuarios.

 

Antecedentes

Un miembro de nuestra comunidad planteaba que quería incluir un campo para subir canciones y que en la visualización se mostrase como un reproductor de música. Yo le contesté que no se podía hacer directamente con SEBLOD, ya que no dispone de un campo “subir audio con reproductor”. La siguiente consulta fue “¿no se puede utilizar una extensión?”… y ahí mi respuesta, más cautelosa por no haberlo intentado antes, fue que para responder a esa pregunta tendría que dedicarle un tiempo que en ese momento no tenía.
Al fín he podido disponer de tiempo para buscar respuesta a esta interesante pregunta, y voy a compartir con vosotros los resultados.

El problema

Lo que queremos es que en un formulario tenga uno o “n” campos para subir ficheros de audio y que en visualización de contenido se muestre un reproductor de audio que nos permita escucharlo.
El problema es que SEBLOD no dispone de un campo que haga eso, pero en el JED hay muchos reproductores. ¿Se podría integrar alguno?...
Cualquier problema, por complejo que sea, se puede descomponer en problemas sencillos que lo hace más manejable y ese es el primer paso.

Lo que necesitamos, para resolver el problema concreto, y minimizándolo, es lo siguiente:

  1. Un campo en el formulario de creación o edición que nos permita subir un fichero de audio.
  2. Que en visualización de contenido se muestre un reproductor que permita escuchar la música.

La primera parte ya la tenemos. Hay un campo de tipo “subir archivos” que nos sirve perfectamente.
La segunda parte se podría, en teoría, cumplir con un plugin de reproductor de audio que funcione en los artículos de Joomla. Y eso es porque SEBLOD utiliza el mismo componente que los artículos estándar de Joomla y puede utilizar sus plugins.

No necesitamos componentes ni módulos. No queremos una aplicación, nuestra App es la aplicación. Tan sólo necesitamos un plugin que utilice como disparador una sintaxis determinada, mostrar en visualización de contenido un campo con dicha cadena y dejar que el plugin muestre el reproductor en el lugar de ese campo.


El principal problema de los plugin es que hay que asegurarse que no entren en conflicto con otros que ya tengamos instalados, y su gran ventaja es que podemos elegir el que vayamos a utilizar.

¿Y que requiere el plugin elegido  para mostrar nuestro reproductor?...

Según la documentación requiere la siguiente sintaxis:

[audio src="/ruta_archivo/nombre_archivo.mp3"]

Por tanto, si podemos crear un campo que se muestre en visualización de contenido y componga esta sintaxis con la ruta correcta del archivo debería funcionar.

 

 

Lo que necesitamos en el formulario

 

Para hacer lo que pretendemos necesitaremos al menos dos campos por cada archivo de audio que vayamos a incluir en el formulario:

  1. Un campo para subir y almacenar el fichero de audio.
  2. Un campo que componga la cadena que requiere el plugin en la visualización de contenido.

 

El campo subir archivo

Crearemos un campo, llamémosle “AUDIO” de tipo "subir archivo" al que aplicaremos una configuración de “extensiones legales=audio” o una lista personalizada de extensiones audio permitidas y/o denegadas, y configurar el resto de opciones al gusto.

Este campo debe estar tanto en los formularios de creación y edición del frontal y backend, como en el de "Contenido". No puede estar oculto ni tener restricciones, debe mostrarse.

En visualización de contenido se mostrará de modo normal, con el nombre del archivo (o el título si hemos activado modo avanzado) y un enlace que permite descargar el archivo.

Si nuestra intención es que no se pueda descargar, y sólo se pueda reproducir podemos solucionarlo con un poquito de CSS:

pointer-events: none;
cursor: default;

Puedes utilizar una clase o crear una nueva. Con esas dos líneas no habrá enlace ni cambiará el cursor al pasarlo por encima.

 

El campo que compone la cadena de texto para el plugin

Aquí está el truco y la magia...

Vamos a utilizar un campo de tipo "texto libre".

Este tipo de campo es especial. No se almacena y para que tenga un valor hay que configurar un valor por defecto. Se suele utilizar para mostrar el mismo valor, en el formulario en que se incluya, para todos los artículos (Texto de ayuda o con función de etiqueta en formulario con las etiquetas ocultas, por ejemplo).

Podriamos utilizar un campo de tipo texto normal, pero es más fino usar un campo que no se almacena en la base de datos. De optar por uno de texto normal, hay que incluirlo en los formularios de creación/edición y que almacene un valor para que cuando se visualice el contenido se muestre (sin valor no se muestra), ocultarlo para que no quede raro... Mejor usemos el de texto libre.

Este campo de tipo "texto libre" sólo tiene que estar en el formulario de "Contenido", no en los de creación/edición.

Necesita un valor por defecto. Vale cualquier cosa, da exactamente igual. La cadena que uses como valor por defecto permitirá que se muestre el campo, pero ahora verás por que su valor no.

Vamos a configurar la tipográfia de este campo.

La tipografía permite cambiar el valor que un campo muestre de muchas maneras diferentes, incluido el que la cadena mostrada no tenga nada que ver con el valor que se mostraría sin usar la tipografía. O dicho claramente, con la tipografía puedo mostrar lo que me de la gana en lugar de lo esperado.

Escogemos una tipografía de tipo "Html" y la configuramos haciendo click en el "+".

configurar html

Suponiendo que el campo de audio tenga el Nombre "xy_audio",  el código html en construcción debe ser [audio src="/$cck->getValue('xy_audio')"]

texto libre html

El valor del atributo Value de xy_audio es la ruta del fichero, que envolvemos con la cadena de texto que rodea a la variable $cck->getValue('xy_audio')

Y el resultado será la cadena que dispara el plugin.

Sin corchete

sin corchete

Con corchete:

con corchete

 

 

¡Y ya está!.

Si te funcionaba en un campo de texto con esa cadena introducida a mano, tiene que funcionarte en el campo “REPRODUCTOR”.

 

 

Aquí tienes el video paso a paso:

 

 

 

Mil disculpas por las "idas y venidas " en mi voz. No es un problema del audio, tenía la garganta bastante mal...

 

Si te ha gustado puedes comentarlo a continuación, y si tienes dudas o quieres realizar alguna consulta siéntete libre de hacerlo en el foro.

Mi perfil de Google Plus

 

Escribir un comentario

Sé respetuoso con tod@s. Tenemos derecho a expresar nuestras opiniones y los demás pueden opinar igual o de forma contraria, siempre con el respeto que nos gusta que nos dispensen.
Tu comentario debe estar relaccionado con el tema. Si deseas comentar algo distinto puedes ponerte en contacto con nosotros a través de la opción de "Contactar" del menú principal. Muchas gracias.

Puedes conectarte utilizado tu cuenta en:

       


Si te gusta, puedes compartirlo en:

Compartir en FacebookCompartir en Google PlusCompartir en TwitterCompartir en LinkedIn