Carlos Longarela: Evita problemas con los nombres de archivo en las imágenes #MaratonWP #10AniversarioAyudaWP

Aquí tienes el primer artículo del #MaratonWP que estaremos realizando durante todo el día de hoy para celebrar el 10º aniversario de Ayuda WordPress. Sigue atento que cada hora habrá sorpresas, con regalos y más trucos WordPress, y no te pierdas el hashtag de Twitter #10AniversarioAyudaWP.


Frecuentemente me encuentro en webs de clientes problemas con los nombres de archivo de las imágenes subidas, que a veces funcionan bien, pero en el momento de una optimización o restauración de una copia de seguridad o cambio de tema, empiezan a fallar, aún estando los archivos en el hosting.

Nombres de archivo con ñ, símbolos especiales como el del euro, acentos, etc., nos dan este tipo de problemas a posteriori.

Después de corregir dichos archivos, que pueden ser muchos miles, en el archivo functions.php de su tema o mejor aún, en un plugin de funciones personalizadas, pongo este pequeño código para que esto no vuelva a suceder.

<?php
/**
 * Cambia el nombre del archivo a una versión segura y sanitizada.
 *
 * @param string $filename     Nombre del archivo una vez pasados los primeros filtros de WP.
 * @param string $filename_raw Nombre del archivo "en crudo" al subirse.
 *
 * @return string
 *
 * @since 1.2.0
 */
function cl_nombre_archivo( $filename, $filename_raw ) {
	$info           = pathinfo( $filename_raw );
	$nombre_archivo = $info['filename'];

	if ( ! empty( $info['extension'] ) ) {
		$ext = $info['extension'];
	} else {
		$ext = '';
	}

	$nombre_archivo = remove_accents( $nombre_archivo );
	$nombre_archivo = str_replace( '_', '-', $nombre_archivo );
	$nombre_archivo = str_replace( '%20', '-', $nombre_archivo );
	$nombre_archivo = sanitize_title( $nombre_archivo );
	$nombre_archivo = $nombre_archivo . '.' . $ext;

	return $nombre_archivo;
}
add_filter( 'sanitize_file_name', 'cl_nombre_archivo', 10, 2 );

/**
 * Añade al ALT de las imágenes el título de la foto.
 *
 * @param int    $meta_id    Id del metadato.
 * @param int    $post_id    Id del post.
 * @param string $meta_key   Clave del metadato.
 * @param mixed  $meta_value Valor del metadato.
 *
 * @return void
 *
 * @since 1.2.0
 */
function cl_alt_after_post_meta( $meta_id, $post_id, $meta_key, $meta_value ) {
	if ( '_wp_attachment_metadata' === $meta_key ) {
		$titulo = get_the_title( $post_id ); // Obtenemos el título del archivo.

		// Actualizamos el Texto del ALT.
		update_post_meta( $post_id, '_wp_attachment_image_alt', $titulo );
	}
}
add_action( 'added_post_meta', 'cl_alt_after_post_meta', 10, 4 );

Lo que hace la función cl_nombre_archivo es actuar cada vez que subimos un archivo al administrador de medios, eliminando espacios en blancos, acentos, caracteres especiales, etc., dejando un nombre de archivo adecuado para nuestro WordPress y totalmente seguro.

Si por ejemplo usamos la imagen “Lentes Artísticas Intercambiables Neptune.jpg” al subirlo, el nombre de archivo se renombra a “lentes-artisticas-intercambiables-neptune.jpg” evitando los espacios, todo en minúsculas y sin problemas por el acento.

Si además utilizamos la segunda función cl_alt_after_post_meta nos rellenará el texto ALT de la imagen (que debemos cubrir siempre) con el nombre del archivo.

Esto nos permite usar archivos como el que se muestra en la imagen, que se llame “Caminos de Hierro en Logroño.jpg”, que al subirlo a WordPress quede renombrado como “caminos-de-hierro-en-logrono.jpg” y que automáticamente quede puesto “Caminos de Hierro en Logroño” en la casilla del texto alternativo (Alt text).

Este código que creé para mi trabajo diario en DNG Photo Magazine y me ahorra unos preciosos segundos cada día, ahora lo suelo poner en las webs de todos mis clientes.

Carlos Longarela

Carlos Longarela, aficionado a la fotografía y programando desde finales del pasado milenio, vivo en Lugo y trabajo como programador WordPress freelance, con especial interés en la estandarización de código y optimización de cada parte implicada en el sitio web, desde el servidor web, base de datos, DNS’s, CDN’s, caché de diferentes niveles, hasta cada una de las funciones utilizadas en el código, archivos finales, imágenes, javascript, CSS.

Un milisegundo que ahorremos en la carga de una web, es un milisegundo que le regalaremos a nuestros clientes. Que el tiempo es oro, no es sólo un refrán…

Una buena web es un trabajo continuo que nunca finaliza.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(4 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

6 comentarios en “Carlos Longarela: Evita problemas con los nombres de archivo en las imágenes #MaratonWP #10AniversarioAyudaWP”

  1. Gracias por el código Carlos.
    Tan solo una pequeña pega que no se si tendrá solución fácil. Me refiero a que, cuando el nombre de la imagen es una pregunta, sucede los siguiente:
    1) Nombre final de la imagen: lo hace bien. Quita tanto el primer signo de interrogación como el segundo.
    2) Título: no quita el primer signo de interrogación.
    3) Texto alternativo: no quita el primer signo de interrogación

  2. Hola Carlos,
    En primer lugar darte las gracias por compartir este información pero he tenido que desactivarlo por dos motivos que voy a intentar explicarte a continuación pues en los comentarios no se pueden subir imágenes.

    1) Cuando pego en código en el fichero functions.php de el tema hijo de Genesis que utilizo que es «News Pro Theme» revierte los cambios del fichero y salle el siguiente mensaje;
    «Los cambios en tu código PHP se han revertido debido a un error en la línea 173 del archivo wp-content/themes/news-pro/functions.php. Por favor, arréglalo y trata de guardar de nuevo.
    syntax error, unexpected ‘<'"

    2) La línea 173 es la primera del código que he pegado y su contenido es "173 | <?php". Cuando elimino esta línea, sí que guarda la edición. Para probar los cambio, voy a una entrada y añado un nuevo medio a la galería "Cómo tener éxito en internet.jpg" y efectivamente cambia el nombre del fichero por "como-tener-exito-en-internet.jpg" pero en los apartados de Título, Leyenda y Texto alternativo coloca "Business Intelligence" y cuando pulso en "Insertar en la entrada, el resultado es el siguiente:
    [caption id="attachment_35909" align="aligncenter" width="1000"] Business Intelligence[/caption]

    Como puedes comprobar rellena la etiqueta «Alt» con «Business Intelligence». Quedo a la espera de tu respuesta ya que no soy programador lo único que pasa es que al llevar tiempo ya trabajando con WorPress pues algo de código si puedo tocar 🙂 🙂 🙂

    Un cordial saludo,

    Toni Herrera

    1. 1) Crea un plugin de funciones en lugar de usar el functions.php del tema que usas: https://ayudawp.com/crea-un-plugin-para-liberar-el-fichero-functions-php/
      Añades la función, lo guardas y lo subes vía FTP a tu carpeta «plugins».

      2) No uses el editor de WordPress.

      3) Haz siempre antes de tocar nada una copia de seguridad.

      De todas formas, abre un hilo en el soporte de wordpress.org y allí lo vemos con más detenimiento: https://es.wordpress.org/support/forum/plugins-y-hacks/

      1. Hola Carlos o Miguel.

        Gracias por la respuesta. He creado el plugin para WordPress, como me indicas, lo he instalado en mi WordPress que, como ya dije en mi mensaje anterior, utiliza el tema News Pro de Genesis y efectivamente corrige perfectamente el nombre del fichero quitando los acentos, cambiando mayúsculas por minúsculas, cambiando los espacios por guiones, etc pero sin embargo sigue rellenando la etiqueta «alt» con «Business Intelligence» la única diferencia es que ahora puedo editar eso y antes no.

        Pero claro, de esta manera tiene uno que estar pendiente de cuando se sube la imagen cambiar siempre el título, la leyenda y el texto alternativo pues aparece la leyenda «Business Intelligence»

        Tengo acceso al soporte de WordPress.org pero me puedes decir en que foro o apartado debo abrir el debate.

        Gracias anticipadas y disculpas por las molestias

        Feliz y Prospero Año 2018
        Toni Herrera

Deja un comentario

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

 

Ir arriba Ir al contenido