Cloudinary Fetch con Eleventy (Respetando el Desarrollo Local)

Se trata de una combinación tremendamente específica de tecnologías: Eleventy, el generador de sitios estáticos, con páginas con imágenes que, en última instancia, desea alojar en Cloudinary, pero solo quiero documentarlo, ya que parece que una cantidad decente de personas se encuentran con esta situación. .

El trato:

• Cloudinary tiene una función de recuperación de URL, lo que significa que en realidad no tienes que aprender nada (¡qué bueno!) para usar su servicio. Debe tener una cuenta, pero después de eso simplemente anteponga a sus imágenes una URL de Cloudinary y luego es Cloudinary quien optimiza, cambia el tamaño, formatea y CDN sirve su imagen. Dulce. No es el único servicio que hace esto, pero es bueno.
• Pero… la imagen debe estar en la Internet pública en vivo. En desarrollo, las URL de sus imágenes probablemente no lo estén. Probablemente estén almacenados localmente. Entonces, lo ideal sería seguir usando URL locales para las imágenes en desarrollo y realizar la búsqueda de Cloudinary en producción.

Varias personas han resuelto esto de diferentes maneras. Voy a documental cómo lo hice (porque lo entiendo mejor), pero también vincularé cómo lo han hecho otras personas (lo cual podría ser más inteligente, tú eres el juez).

La meta:

• En desarrollo, las imágenes serán como/images/image.png
• En producción, las imágenes serán comohttps://res.cloudinary.com/css-tricks/image/fetch/w_1200,q_auto,f_auto/https://production-website.com/images/image.png

Entonces, si tuviéramos que crear una plantilla (asumimos Nunjucks, ya que es un buen lenguaje de plantillas compatible con Eleventy), obtendríamos algo como este psuedocódigo:

img src="  {{CLOUDINARY_PREFIX}}{{FULLY_QUALIFIED_PRODUCTION_URL}}{{RELATIVE_IMAGE_URL}}  "  alt="Don't screw this up, fam."/

	Desarrollo	Producción
{{CLOUDINARY_PREFIX}}	“”	“https://res.cloudinary.com/css-tricks/image/fetch/w_1200,q_auto,f_auto/”
{{FULLY_QUALIFIED_PRODUCTION_URL}}	“”	“https://producción-website.com”
{{RELATIVE_IMAGE_URL}}	“/imagenes/imagen.jpg”	“/imagenes/imagen.jpg”

El truco entonces es conseguir que esas… ¿Supongo que las llamaremos variables globales?… configuradas. Probablemente sean sólo esos dos primeros. La ruta relativa de la imagen probablemente la escribirías a mano según sea necesario.

Eleventy tiene algo de magia disponible para esto. Cualquier *.jsarchivo que coloquemos en una _datacarpeta se convertirá en variables que podremos usar en plantillas. Entonces si hicimos como /src/_data/sandwiches.jsy fuera:

module.exports = {  ham: true}

En nuestra plantilla, podríamos usar {{sandwiches.ham}}y eso estaría definido {{true}}.

Debido a que esto es JavaScript (Node), eso significa que tenemos la capacidad de hacer algo de lógica basada en otras variables. En nuestro caso, algunas otras variables globales serán útiles, particularmente las process.envvariables que Node pone a disposición. Muchos hosts (Netlify, Vercel, etc.) hacen que las “variables de entorno” sean algo que usted puede configurar en su sistema, de modo que process.envestén disponibles cuando los procesos de compilación se ejecutan en su sistema. Podríamos hacer eso, pero es bastante específico y está vinculado a esos hosts. Otra forma de configurar una variable global de Nodo es configurarla literalmente en la línea de comando antes de ejecutar un comando, por lo que si tuviera que hacer:

SANDWICH="ham" eleventy

Entonces process.env.SANDWICHestaría hamen cualquier lugar de su Nodo JavaScript. Combinando todo eso… digamos que nuestro proceso de construcción de producción establece una variable que indica producción, como:

PROD="true" eleventy

Pero en materia de desarrollo local, funcionaremos sin esa variable global. Así que hagamos uso de esa información mientras configuramos algunas variables globales para usar en la construcción de nuestras fuentes de imágenes. En /src/_data/images.js(ejemplo completo del mundo real) haremos:

module.exports = {  imageLocation:    process.env.PROD === 'true'       ? 'https://coding-fonts.css-tricks.com'       : '',  urlPrefix:    process.env.PROD === 'true'      ? 'https://res.cloudinary.com/css-tricks/image/fetch/w_1600,q_auto,f_auto/'      : ''};

También puede verificar process.env.CONTEXT === 'deploy-preview'la URL de vista previa de implementación de Netlify, en caso de que desee cambiar la lógica allí de una manera u otra.

Ahora, en cualquiera de nuestras plantillas, podemos usar {{images.imageLocation}}y {{images.urlPrefix}}desarrollar las fuentes.

img   src="    {{images.urlPrefixLarge}}{{images.imageLocation}}/image.png  "  alt="Useful alternative text."/

Y ahí vamos. Esa será una fuente local/relativa en desarrollo, y luego en producción, se convertirá en esta URL con prefijo y completa desde la cual funcionará la recuperación de Cloudinary.

Ahora que está en Cloudinary, podemos dar un paso más. La URL del prefijo se puede ajustar para cambiar el tamaño de las imágenes, lo que significa que incluso con una sola imagen de origen, podemos realizar una configuración bastante apropiada para imágenes responsivas. Aquí está la configuración, que pone a disposición varios prefijos, de modo que puedan usarse para la sintaxis completa.

El resultado final significa una imagen localmente relativa en desarrollo:

…y Cloudinary recupera URL en producción:

Ideas de otras personas

Phil estaba presumiendo usando redirecciones de Netlify para hacer esto el otro día:

Un buen truco para optimizar las imágenes de su sitio sin un proceso de compilación ni ninguna biblioteca o marco.

1. Cargue y publique desde @cloudinary en un solo paso gracias a su API de URL recuperada
. 2. ¡Hágalo portátil y simple con una URL proxy CDN de @netlify

¡FTW!

https://t.co/YLLUvdEllQ pic.twitter.com/WRcMVFM6ZQ

– Phil Hawksworth (@philhawksworth) 16 de noviembre de 2020

Entonces, el truco para el desarrollo local es detectar los 404 y redirigirlos localmente con más redirecciones.

Si crear a mano su propia sintaxis de imágenes responsivas es demasiado complicado (lo es), le recomiendo abstraerla. En Eleventy-land, Nicolas Hoizey tiene un proyecto: eleventy-plugin-images-responsiver. Eric Portis también tiene uno, once-respimg, que usa específicamente Cloudinary como el que tengo aquí.

Para demostrar que estas cosas realmente han estado en la mente de la gente, Tim Kadlec acaba de escribir en su blog “Proxying Cloudinary Requests with Netlify”. Amplía el tweet de Phil, añadiendo algo de contexto de rendimiento adicional y trampas.