Cuando vimos a Chris poner una lista de almacenes de datos alojados en la nube, no pudimos resistirnos a hacerle saber que también teníamos uno de esos, solo que el nuestro es un CMS con todas las funciones que viene con un lenguaje de consulta enriquecido y un código abierto. , herramienta de creación colaborativa en tiempo real que puede adaptar a sus necesidades específicas usando React. Se llama Sanity.io.
“¡Agréganos a tu lista!” le preguntamos a Chris. “No, tus cosas son interesantes, no puedes escribir sobre ti”, respondió. “Tal vez algo que sería útil para las personas que trabajan con imágenes”. ¡Desafío aceptado!
Los sistemas como Sanity quieren liberar su contenido de la página específica en la que se encuentra, para que pueda fluir a través de las API. De esa manera, puede reutilizar su contenido cuidadosamente elaborado en cualquier lugar que lo necesite.
Entonces, ¿qué significa esto para las imágenes?
Las imágenes son las extrañas. Podemos capturar artículos de documentación, planes de precios o carteras de proyectos como estructuras de datos potencialmente complejas, pero en última instancia comprensibles que las máquinas pueden consultar y procesar de muchas maneras útiles. ¿Pero imágenes? En realidad, son solo bolsas de píxeles que se encuentran al final de un CDN, ¿no es así?
Se nos ocurrieron algunas ideas de todos modos porque todo el mundo necesita imágenes y las imágenes deberían estar tan dispuestas a viajar a lugares y servicios nuevos y emocionantes como el resto de sus cosas estructuradas.
Entonces, aquí estamos con una bolsa mediana de trucos de imagen que puedes lograr con Sanity.
1. Tome la paleta de los metadatos de la imagen
¿Alguna vez intentó superponer texto sobre una imagen aleatoria enviada por un usuario? Como salio eso? Por lo general, terminamos de enviar nuestras imágenes a los filtros hasta que son predecibles y se esconden en casa con una expresión malhumorada.
Pensamos que sería bueno enviar una paleta de imágenes con sus imágenes para que pueda seleccionar entre tipografía oscura y clara, así como combinar elementos visuales con el color de la imagen. Esto mejora mucho la legibilidad y evita los conflictos entre los colores de las imágenes y el texto.
Vea los colores de la imagen de Pen Access como metadatos en Sanity por Knut Melvær (@kmelve) en CodePen.
2. Obtenga marcadores de posición de imagen de baja calidad
Por más rápido y cercano que sea su CDN, aún lleva tiempo transmitir archivos de imagen grandes. Por lo tanto, incluimos un marcador de posición de imagen de baja calidad (LQIP) con los metadatos de su imagen. Es una cadena codificada en base64 de su foto con un ancho de 20px. Obtener LQIP en la primera solicitud le permite hornear una imagen de proxy directamente en el HTML.
<figure
style={{
backgroundImage: `url(${mainImage.metadata.lqip})`,
paddingTop: `calc(100% / ${mainImage.metadata.dimensions.aspectRatio})`
}}
>
<img src={`${mainImage.url}`} />
</figure>Un desafío con los marcadores de posición de imagen es poder predecir las dimensiones de la imagen en un diseño fluido. En este ejemplo, usamos la relación de aspecto que también viene en el objeto de metadatos para calcular el truco del relleno superior. Eso significa que no tiene que calcular la relación de aspecto usted mismo y, por ejemplo, mostrarla como una propiedad personalizada combinada con variables CSS.
Vea los marcadores de posición de imagen de baja calidad Pen Get de Knut Melvær (@kmelve) en CodePen.
3. Usa transformaciones de imágenes bajo demanda
Debería poder almacenar originales de archivo y obtener la imagen en cualquier resolución y formato que necesite. Adelante, cargue su TIFF de 268 megapíxeles y solicite un JPEG recortado de 128 × 128 con un 50% de desenfoque.
Las transformaciones se generan a partir de parámetros de URL y se generan en la primera solicitud. Almacenamos en caché el resultado localmente y en un CDN, por lo que muchas solicitudes de la misma imagen de resultado serán súper ágiles.
Toma esta imagen de la Nebulosa Carina. Subimos una versión de 29.566 x 12.960. Digamos que queríamos una versión PNG con un ancho de 500px. Adjuntar ?w=500&fm=png a la URL de la imagen, y ahí está:
Archivo fuente
No solo es difícil escuchar gritos en el espacio, también es difícil juzgar las direcciones. Pero digamos que necesitas rotar la imagen. Bueno, puedes agregar &or=90 y está inclinado 90 grados (y se reduce a 128 px):
Archivo fuente
No es por molestar a la NASA, pero si desea simular la aberración esférica en su nuevo telescopio de 1.500 millones de dólares, puede hacerlo agregando ?blur=30 a la URL de la imagen!
Archivo fuente
La canalización de imágenes también es buena para sus SVG. Digamos que necesita ofrecer un gráfico abierto JPG (og: imagen) a Facebook o tiene una necesidad urgente de agregar este SVG de una carretilla elevadora como emoji de Slack:
Archivo fuente
Obtenga la versión PNG de 128 × 128 que necesita agregando los parámetros de URL w=128&h=128&fm=png así como esto
También tienes el control del color de fondo, con bg=<hexcolor> Digamos que, por alguna razón, queríamos este montacargas sobre un hermoso fondo morado.
Y, finalmente, si desea vincular a esta imagen y activar una descarga para el usuario, puede agregar dl=<suggested file-name> para que esto ocurra.
Descargar la imagen
No siempre es tan divertido jugar con los parámetros de URL, por lo que creamos una biblioteca de JavaScript que lo hace un poco más fácil. instalarlo con npm install --save @sanity/image-url y aprenda a usarlo (lo usamos en las demostraciones a lo largo de esta publicación).
4. Recortar y escalar para ajustarse a un punto de enfoque
Esas molestas imágenes con sus relaciones de aspecto fijas. Además de no conocer la densidad de píxeles del dispositivo de salida, a menudo ni siquiera sabe qué recorte sería el más adecuado para el diseño. Incluso en un solo sitio web, a menudo usará la misma imagen en diferentes diseños y, a menudo, necesitará mostrarlos a terceros, como Facebook, que espera relaciones de aspecto específicas.
Recorte personalizado y punto de acceso en Sanity Studio
Para aliviar el dolor de lidiar con esto, permitimos que los editores de contenido establezcan puntos de acceso y recortes para las imágenes. También hemos creado un paquete de JavaScript que hace todo el trabajo duro de hacer que las URL de transformación de imagen sean correctas para usted. Simplemente pase un activo de imagen y el tamaño que desee y determinaremos el recorte y la escala.
Vea el recorte y los puntos de acceso personalizados de Pen por Knut Melvær (@kmelve) en CodePen.
5. Haz un fotomapa en tiempo real
Si esto no lo convierte en 11, es al menos un buen 10,5.
Podemos extraer datos EXIF y de geolocalización de una imagen. Los datos EXIF contienen información sobre el estado de la cámara cuando se tomó la foto (por ejemplo, exposición, apertura, lente, si se disparó el flash, etc.). Debido a problemas de privacidad (nos tomamos muy en serio el cumplimiento de GDPR), hemos desactivado la función de forma predeterminada, pero si configura [options: { metadata: ['exif', 'location' ] } en sus opciones de esquema, se incluirán.
Hicimos una pequeña demostración que le permite cargar una imagen y, si tiene datos de ubicación (por ejemplo, los que toma con su teléfono), aparecerá automáticamente en el mapa, ¡porque la API es en tiempo real con los oyentes!
Vea el mapa de fotos en tiempo real compartido por lápiz de Knut Melvær (@kmelve) en CodePen.
Si desea probar Cordura y estas características usted mismo, puede comenzar a escribir npm i -g @sanity/cli && sanity init. Aunque la CLI lo guía a través del proceso de instalación, vale la pena consultar la documentación (si no es solo por las ilustraciones) y siempre hay personas que quieren ayudar con los detalles esenciales en nuestro grupo de Slack.