コード内で Unsplash イメージを使用する方法

新しい SaaS プロジェクトに取り組んでいる開発者として、いくつかの Unsplash 画像を URL を通じて直接リンクする必要がありました。
最初に、https://source.unsplash.com/ API の使用を推奨する記事 (リンク) を見つけました。ただし、この方法はもう機能せず、URL フィールドからリンクをコピーするだけでは、埋め込みに必要な直接画像 URL は提供されません。

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

アンスプラッシュ画像の URL

次に試したオプションは、画像の URL を右クリックしてコピーすることでした。ただし、この URL には不要なパラメータが含まれており、毎回手動で削除する必要がありました。例:

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

効率を重視する怠惰な開発者として、私はこのプロセスがイライラすることに気づきました。画像を使用するたびに URL を手動でクリーンアップする必要はありませんでした。

電球の瞬間: 初めての Chrome 拡張機能を構築する

それで、手動でこれを行うのにあまりにも多くの時間を無駄にした後、私は繰り返しの作業を嫌う怠惰な開発者がやりそうなことを行い、Chrome 拡張機能を構築しました。 「CopySplash」をご紹介します。これは、必要性を知らなかったが、今ではこれなしでは生きていけない Chrome 拡張機能です。

そして一番いいところは?それはオープンソースプロジェクトです！ (GitHub) 自由にコードに飛び込んだり、貢献したり、機能を提案したり、あるいはどの程度気に入っているかどうかだけでも教えてください。お褒めの言葉はいつでも大歓迎です。

「CopySplash」は何をするのですか?

• Unsplash 画像に便利な「リンクをコピー」ボタン オーバーレイを提供し、ユーザーは 1 回のクリックで画像の URL をクリップボードにすばやくコピーできます。

• カスタム パラメータを設定して、サイズ、品質、トリミングなどを調整し、特定のニーズに合わせて保存します。

でも待ってください…Unsplash と Imgix はどうなるのでしょうか?

Unsplash は、Web 配信用に画像を動的にサイズ変更、トリミング、最適化する強力な画像処理サービスである Imgix レンダリング API (リンク) を使用します。 Unsplash からのすべての画像 URL は Imgix を通じて処理されるため、URL にはパラメーターが入力されることがよくあります。

レンダリング API ドキュメントを確認して、コピーされた URL に統合されるカスタム設定を設定してください

結論: Unsplash URL ドラマはもう必要ありません。

あなたが Unsplash 画像を頻繁に使用する開発者であれば、「CopySplash」を使用すると時間と労力を大幅に節約できます。新しい機能のアイデアがある場合でも、コードを改善したい場合でも、ドキュメントを手助けしたい場合でも、ぜひお試しください。

リンク:

• CopySplash 拡張機能
• Splash コードをコピー
• Imgix
• スプラッシュを解除

以上がコード内で Unsplash イメージを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。