Los creadores de temas suelen preguntar si Photon —el módulo gratuito de red de distribución de contenido de imágenes incluido en Jetpack— se puede utilizar para acelerar la carga de las páginas y ahorrar ancho de banda al entregar imágenes desde sus temas. La respuesta corta es: ¡sí! Sigue leyendo para descubrir cómo hacerlo.
Si quieres enlazar a una versión de una imagen optimizada con Photon, lo hagas como lo hagas, tendrás que llamar a jetpack_photon_url().
La función jetpack_photon_url() acepta tres argumentos.
$image_url- (la URL de la imagen original)
$args- (un array de argumentos)
$scheme- (si quieres que la URL empiece por
http://,https://, o si debe ser independiente del protocolo mediante//)
Vamos a ocuparnos de cada uno por separado.
$image_url (cadena) (obligatorio)
Este es bastante fácil de entender. Solo tienes que pasar la URL de la imagen que quieras usar. Por ejemplo:
$image_url = get_template_directory_uri() . '/img/logo.png';
$args (array|string) (opcional)
$args te ofrece algunas opciones divertidas con las que experimentar. Puedes modificar el brillo y el contraste de tus imágenes; también puedes cambiar el color, cambiarles el tamaño o recortarlas; e incluso aplicar algunos filtros. (Puedes consultar la documentación completa de todas las opciones en developer.wordpress.com.)
Por ejemplo, si quisieras cambiar el tamaño de una imagen a 600 px de ancho por 200 px de alto y convertirla en blanco y negro, podríamos combinar dos $args:
$args = array( 'filter' => 'grayscale', 'resize' => '600,200', );
o
$args = 'filter=grayscale&resize=600,200';
$scheme (matriz) (opcional)
Por último está el esquema. Normalmente puedes omitirlo, y la URL devuelta será http:// o https://, según cuál coincida con la página que esté viendo el usuario actual. Sin embargo, si necesitas especificar algo, estos son los valores que puedes pasar y la estructura que generan:
http→ http://i0.wp.com/s.ma.tt/files/2011/06/MCM_9230-1600×1064.jpghttps→ https://i0.wp.com/s.ma.tt/files/2011/06/MCM_9230-1600×1064.jpgnetwork_path→ //i0.wp.com/s.ma.tt/files/2011/06/MCM_9230-1600×1064.jpg
Cómo llamarlo de forma segura
Ahora, al crear algo en torno a cualquier plugin, siempre tendrás que tener en cuenta qué ocurre si el usuario no tiene el plugin. ¡Sí, lo sabemos! Nosotros también soñamos con el día en que todo el mundo use Jetpack, pero tenemos que respetar las decisiones del usuario si decide no hacerlo.
Por tanto, no puedes llamar directamente a jetpack_photon_url() en tu tema de esta manera:
echo jetpack_photon_url( get_template_directory_uri() . '/img/logo.png' );
(¡No olvides cambiar esto a get_stylesheet_directory_uri() si prefieres que cambie para los temas hijo!)
Bueno, podrías, pero en cuanto se desactive Jetpack, se producirían errores bastante desagradables y el sitio podría incluso dejar de funcionar. ¡Y nadie quiere eso!
Por suerte, WordPress tiene una magnífica API de filtros. En nuestra próxima versión de Jetpack, añadiremos un filtro que te permitirá añadir esto en su lugar:
echo apply_filters( 'jetpack_photon_url', get_template_directory_uri() . '/img/logo.png' );
o
echo apply_filters( 'jetpack_photon_url', get_template_directory_uri() . '/img/logo.png', 'filter=grayscale', 'https' );
Y ya está todo listo. Si Jetpack no está instalado, entonces la función jetpack_photon_url() no se vinculará al filtro y no pasará nada; pero, lo que es más importante, ¡no se romperá nada!
Sí, sí, pero ¿qué hago hasta que salga esa versión?
¿Ah, quieres usarla ahora? ¡Vale! Solo tienes que insertar este código en el functions.php de tu tema
if( function_exists( 'jetpack_photon_url' ) ) {
add_filter( 'jetpack_photon_url', 'jetpack_photon_url', 10, 3 );
}
No pasará nada por dejarlo ahí una vez que lo incluyamos en Jetpack, ya que jetpack_photon_url() tiene una válvula de seguridad para asegurarnos de que nunca convierta en Photon la misma URL dos veces.
Jetpack 