Comment utiliser les images Unsplash dans votre code

En tant que développeur travaillant sur un nouveau projet SaaS, j'avais besoin de lier certaines images Unsplash directement via leurs URL.
Au départ, je suis tombé sur un article (lien) recommandant l'utilisation de l'API https://source.unsplash.com/. Cependant, cette méthode ne fonctionne plus et la simple copie du lien depuis le champ URL n'a pas fourni l'URL directe de l'image nécessaire à l'intégration.

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

URL des images Unsplash

L'option suivante que j'ai essayée consistait à copier l'URL de l'image en cliquant dessus avec le bouton droit. Cependant, cette URL était remplie de paramètres inutiles dont je n'avais pas besoin, nécessitant une suppression manuelle à chaque fois. Par exemple :

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

En tant que développeur paresseux qui valorise l'efficacité, j'ai trouvé ce processus frustrant. Je ne voulais pas nettoyer manuellement les URL à chaque fois que je voulais utiliser une image.

Le moment Lightbulb : créer ma première extension Chrome

Ainsi, après avoir perdu beaucoup trop de temps à faire cela manuellement, j'ai fait ce que ferait n'importe quel développeur paresseux ayant une aversion pour les tâches répétitives : j'ai créé une extension Chrome. Présentation de "CopySplash", l'extension Chrome dont vous n'aviez jamais pensé avoir besoin mais dont vous ne pouvez plus vous passer !

Et le meilleur ? C'est un projet open source ! (GitHub) N'hésitez pas à vous plonger dans le code, à contribuer, à suggérer des fonctionnalités, ou même simplement à me dire à quel point vous l'aimez ou pas ?. Les compliments sont toujours appréciés.

Que fait « CopySplash » ?

• Fournit une superposition de bouton « Copier le lien » pratique sur les images Unsplash, permettant aux utilisateurs de copier rapidement l'URL de l'image dans leur presse-papiers en un seul clic.

• Définissez des paramètres personnalisés pour ajuster la taille, la qualité, le recadrage, etc., adaptés à vos besoins spécifiques et enregistrez-les.

Mais attendez… Quel est le problème avec Unsplash et Imgix ?

Unsplash utilise l'API de rendu Imgix (lien), un puissant service de traitement d'image qui redimensionne, recadre et optimise dynamiquement les images pour la diffusion sur le Web. Chaque URL d'image d'Unsplash est traitée via Imgix, c'est pourquoi les URL sont souvent remplies de paramètres.

Consultez la documentation de l'API de rendu pour définir vos paramètres personnalisés qui seront intégrés dans l'URL copiée

Conclusion : fini le drame des URL Unsplash !

Si vous êtes un développeur qui utilise fréquemment des images Unsplash, "CopySplash" peut vous faire gagner beaucoup de temps et d'efforts. Essayez-le, et que vous ayez une idée pour une nouvelle fonctionnalité, que vous souhaitiez améliorer le code ou aider avec la documentation, votre contribution est la bienvenue !

Liens :

• Extension CopySplash
• Copier le codeSplash
• Imgix
• Unsplash

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!