Como desenvolvedor trabalhando em um novo projeto SaaS, precisei vincular algumas imagens do Unsplash diretamente por meio de seus URLs.
Inicialmente, me deparei com um artigo (link) recomendando o uso da API https://source.unsplash.com/. No entanto, esse método não funciona mais e simplesmente copiar o link do campo URL não fornecia o URL direto da imagem necessário para incorporação.

https://unsplash.com/photos/a-digital-illustration-of-the-letter-k-CnbzJXw5Hx4

URLs de imagem não-splash

A próxima opção que tentei foi copiar o URL da imagem clicando com o botão direito sobre ela. No entanto, esse URL estava cheio de parâmetros desnecessários que eu não precisava, sempre exigindo remoção manual. Por exemplo:

https://images.unsplash.com/photo-1725610588086-b9e38da987f7?q=80&w=3500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA==

Como um desenvolvedor preguiçoso que valoriza a eficiência, achei esse processo frustrante. Eu não queria limpar URLs manualmente sempre que quisesse usar uma imagem.

O momento da lâmpada: construindo minha primeira extensão do Chrome

Então, depois de perder muito tempo fazendo isso manualmente, fiz o que qualquer desenvolvedor preguiçoso com aversão a tarefas repetitivas faria: criei uma extensão do Chrome. Apresentando "CopySplash", a extensão do Chrome que você nunca soube que precisava, mas que agora não pode viver sem!

E a melhor parte? É um projeto de código aberto! (GitHub) Sinta-se à vontade para mergulhar no código, contribuir, sugerir recursos ou até mesmo me dizer o quanto você gosta dele ou não? Elogios são sempre apreciados.

O que "CopySplash" faz?

• Fornece uma sobreposição conveniente do botão "Copiar link" em imagens Unsplash, permitindo que os usuários copiem rapidamente o URL da imagem para a área de transferência com um único clique.

• Defina parâmetros personalizados para ajustar tamanho, qualidade, corte e muito mais, adaptados às suas necessidades específicas e salve-os.

Mas espere… Qual é o problema com Unsplash e Imgix?

Unsplash usa a API de renderização Imgix (link), um poderoso serviço de processamento de imagens que redimensiona, corta e otimiza imagens dinamicamente para entrega na web. Cada URL de imagem do Unsplash é processado através do Imgix, e é por isso que os URLs são frequentemente preenchidos com parâmetros.

Confira a documentação da API de renderização para definir suas configurações personalizadas que serão integradas no URL copiado

Conclusão: Chega de drama de URL Unsplash!

Se você é um desenvolvedor que usa imagens Unsplash com frequência, "CopySplash" pode economizar muito tempo e esforço. Experimente e, quer você tenha uma ideia para um novo recurso, queira melhorar o código ou ajudar com a documentação, sua opinião é bem-vinda!

Links:

• Extensão CopySplash
• Código CopySplash
• Imgix
• Unsplash