Selección de imágenes de la biblioteca de medios de WP

En mi primer y ultimo tema WP, Minority, desarrollé tres widgets, uno de los cuales era un slider con imágenes. Las imágenes las incluía mediante un campo texto en el cual copiaba la ubicación del fichero que aparece en la biblioteca de medios. Sin embargo, este sistema, obviamente, no es el idóneo, así que me decidí a mejorarlo.

Añadiendo un botón de selección de archivo

En todo plugin o widget, en el back-end, en el panel de administración, generamos un formulario tipo HTML. Sin embargo, si empleamos un campo input type=”file”, éste nos redirecciona a nuestro propio ordenador, lo que no nos ayuda, ya que nosotros queremos seleccionar un archivo del servidor.

Entonces, me puse a buscar por la red algo que funcionara directamente con la biblioteca de medios de WordPress, hasta que encontré este artículo de Mike Jolley, Using the WordPress 3.5 Media Uploader within plugins. A partir de ahí, ya sabéis, cargarse de paciencia y mi método preferido: prueba / error.

Mike Jolley nos ofrece el código siguiente:

Obviamente, para su uso, precisamos de alguna manera para incluir la biblioteca de scripts de la biblioteca de medios. Eso lo hacemos con wp_enqueue_media().

Sólo faltaba, en el formulario, cómo llamar al script. En el mismo artículo hace referencia a otro artículo anterior suyo, en el que nos ofrece el siguiente código:

 

Si revisamos mi anterior artículo Nuestro primer widget WordPress, veremos que, en este caso que ahora nos atañe, en la parte del formulario, public function form( $instance ), tenemos los siguientes bloques de código:

Entonces, para empezar, pondremos la función wp_enqueue_media() justo a continuación de la declaración de la función form().

En un primer momento, pensé en insertar, justo a continuación, y entre las etiquetas <script> y </script>, el código aportado por Mike Jolley. Luego, en la línea que realiza el penúltimo comentario, incluimos lo siguiente:

Finalmente, el bloque de código HTML lo modificamos así:

Este código me funcionaba para una única imagen. Pero mi widget tiene 5 imágenes.

 

Añadiendo 5 botones de selección de archivo

Para no repetir 5 veces el mismo código, pensé que podía hacer una pequeña treta. El botón que activaba el código disponía un valor igual a la clase del campo que había que actualizar (como podéis ver en el código anterior). Sin embargo, jQuery no puede saber el valor de dicho botón, por lo que tenía que buscar una solución alternativa.

Bien, una forma que cada script de jQuery sepa dónde tiene que introducir un valor, es especificándolo en la escritura del mismo. Así pues, lo mejor es un bucle que nos genera tanto el código HTML como los scripts.

Bien, en principio funciona, hasta que lo probamos reiteradamente y comprobamos que, cuando vas seleccionando diferentes archivos con cada uno de los botones, siempre se modifica el primer campo que se cambió.

Todo un día de búsqueda incesante por la red, hasta que por fin, en un foro de WordPress, encontré la solución. Había que eliminar las siguientes líneas:

Por lo que he podido entender, lo que sucede es que, si ya había sido abierto el uploader, lo que hacía era re-abrirlo cada vez, con los mismos parámetros que la primera.

 

Inclusión de imágenes gráficas

Una vez que ya te funcionan todos los botones, y los datos correctos son introducidos en los campos oportunos, podríamos ir más allá, de tal manera que, desde el panel de administración veamos la(s) imagen(es) seleccionada(s) para nuestro widget.

En cuanto a la presentación en HTML es muy sencillo:

Cuando cambiemos la imagen establecida, la estableceremos en su caja, después de modificar el campo de texto:

Así, obtenemos un resultado en el formulario del widget en el back-end, de lo más adecuado.

widget_mejorado

Debo reconocer que me encuentro enormemente satisfecho con el resultado, pues obtenemos un acabado de calidad en el back-end, un elemento al que no siempre se le ofrece la dedicación e importancia que tiene.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *