ハイパフォーマンスでギャツビーで画像を扱う

Cloudinary クラウドベースのエンドツーエンドのメディア管理プラットフォームで、動的に最適化し、デスクトップまたはモバイルアプリケーションの両方に対して画像やビデオを配信することができます.
The Gatsby-Source-Cloudinary plugin GatsbyプロジェクトのCloudaryのフォルダから最適化されたメディア資産をフェッチします.追加:

GraphSQLで他のアプリケーションデータと一緒にCloudaryのメディア資産を宣言することができます.

CloudDaryは、コンテンツ配信ネットワーク(CDN)を介してメディア資産を提供し、アプリを縮小-ビルドのバンドルサイズ.

GatsbyソースCloudaryは、自動的にQuickdinaryによって届けられるメディアファイルの品質と形式を最適化します.

このように、あなたは2つの世界の最高を持っています:メディア資産の最適化された配達と一緒の高性能アプリ.
このチュートリアルでは、GatsbyとCloudaryからのイメージで応答画像ギャラリーを構築するプロセスを介して手順を実行します.なぜならギャツビーは反応して書かれているからです.JSは、JavaScriptの作業知識を持っている必要があります.js

ノードのインストール。JSとギャツビー.js

ノードが必要です.このプロジェクトのためのJSとそのパッケージマネージャ、NPM.システムにインストールされているかどうかを確認するには、次のコマンドを入力します.

    node -v && npm -v

出力がバージョン番号を表示しない場合、Nodejs.org ノードをダウンロードしてインストールします.NPMで発送するJS.
次に、gatsbyをインストールします.JS CLIツールは、このコマンドを端末に入力します.

    npm install -g gatsby-cli

クラウドアカウントの作成

Cloudinaryからのソースイメージに、あなたは最初になければなりませんset up an account がある.Cloudaryは、スタータープロジェクトにとって主に適切で、寛大な、フリー層のアカウントを提供しています.
その後、次の手順を実行します.

Cloudaryであなたのメディア図書館のフォルダにイメージギャラリーのためにイメージをアップロードしてください.あなたの好みの名前を持つフォルダ、例えば、gallery .

あなたのAPIダッシュとAPI秘密をあなたのCloudaryダッシュボードから得てください.

新しいギャツビープロジェクトの作成

Gatsbyはすぐにベースセットアップで新しいプロジェクトを生成するスターターが含まれます.デフォルトのスターターを使用して、選択したフォルダーに新しいギャツビープロジェクトを作成するには、次のコマンド行を入力します.

    gatsby new cloudinary-site

次に、プロジェクトディレクトリに移動し、http://localhost:8000 以下のコマンドを実行します.

    cd cloudinary-site && gatsby develop

GraphInfoを含んでいるので、gatsbyは同時にGraphSQL IDEを作成しますhttp://localhost:8000/___graphql , 後でGraphSQLクエリをビルドします.
今すぐ行くhttp://localhost:8000 新しいギャツビープロジェクトを見るには、次のようになります.

追加パッケージのインストール

このプロジェクトには2つのパッケージが必要です.

The dotenv モジュール:環境変数を読み込みます.env ファイル.

The gatsby-source-cloudinary プラグイン:からの最適化されたイメージをフェッチするために.

NPMでコマンドラインを入力してインストールします.

    npm i --save dotenv gatsby-source-cloudinary

gatsby設定の設定。js

デフォルトのスターターを伴うものを含むすべてのプラグインを設定しますgatsby-config.js GATsbyプロジェクトのルートディレクトリにあるファイル.次の手順を実行します.

インポートdotenv 以前にインストールしたファイルgatsby-confi.js ファイルを追加gatsby-source-cloudinary このコードを使用するプラグイン

    require('dotenv').config();

    module.exports = {
      ...
      plugins:[
      ...
      {
          resolve: `gatsby-source-cloudinary`,
          options: {
            cloudName: process.env.CLOUDINARY_CLOUD_NAME,
            apiKey: process.env.CLOUDINARY_API_KEY,
            apiSecret: process.env.CLOUDINARY_API_SECRET,
            resourceType: `image`,
            prefix: `gatsby-source-cloudinary/` 
          }
        }
      ]
    } 

gatsby-source-cloudinary 以下のオプションを指定します.

cloudName , apiKey , and apiSecret . これらはセキュリティのための3つの別々の環境変数として格納されているあなたのCloudaryコンソールからの資格情報です.

resourceType これは、メディア資産のリソースタイプです.

prefix これは、ファイルが存在するフォルダです.上の例では、このフォルダgatsby-source-cloudinary . あなたの選択の名前を割り当てます.
オプションtype , tags , and maxResult .

プロジェクトのルートで、環境ファイルを作成します.env このような曇りの資格情報とその値を追加するには、次の手順に従います.

    CLOUDINARY_API_KEY=xxxxxxxxxxxxxx
    CLOUDINARY_API_SECRET=xxxxxxxxxxxxxxxxxxxx
    CLOUDINARY_CLOUD_NAME=xxxxx

The `dotenv` package exposes those environment variables in the project.

GatsBy開発サーバーを再起動し、この例のようにアクションのプラグインを確認します.

Note the info log, which displays the CloudinaryMedia nodes. Those images are ready to be queried in Gatsby components.

イメージギャラリーの作成

イメージギャラリーを作成するには、次の手順に従います.

にsrc/components フォルダーと呼ばれるコンポーネントファイルを作成するImageGallery.js そして、次のようにして、対応する機能コンポーネントをファイルに追加します.

    import React from 'react'
    import './gallery.css'
    import {useStaticQuery, graphql} from 'gatsby'
    const ImageGallery = () => {
        const data = useStaticQuery(graphql`query CloudinaryImage {
                allCloudinaryMedia {
                  edges {
                    node {
                      secure_url
                    }
                  }
                }
              }`
        )
        const clImages = data.allCloudinaryMedia.edges
        return (
            <div>
              <div className="image-grid">
                {clImages.map((image, index) => (
                      <div className="image-item" key={`${index}-cl`}>
                        <img src={image.node.secure_url} alt={"no alt :("} />
                      </div>
                    ))
                }
              </div>
            </div>
          )
      }
      export default ImageGallery

ここでは、すべての曇りの画像をCloudinaryMedia ノードuseStaticQuery フック.順番に、これらのイメージのURLを介してコンポーネントをギャラリーを作成するマップします.

ファイルを作成する./gallery.css インsrc/components コンポーネントのスタイルを設定します.次のようにCSSスタイルをファイルに追加します.

    .image-grid {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        grid-auto-rows: minmax(50px, auto);
      }
      .image-grid .image-item:nth-child(5n) {
        grid-column-end: span 2;
      }
      .image-grid img {
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

The above styling renders your image gallery into a beautiful, responsive masonry grid.

既存のindex.js ファイル名src/pages 新しく作成したフォルダImageGallery コンポーネントは次のようになります.

    import React from "react"
    import Layout from "../components/layout"
    import SEO from "../components/seo"
    import ImageGallery from "../components/ImageGallery"
    const IndexPage = () => (
      <Layout>
        <SEO title="Home" />
        <h1>Image Gallery</h1>
        <p>Here's a Gatsby site with optimized images in a masonry grid, served from <a href="https:cloudinary.com" target="_blank" rel="noopener noreferrer">Cloudinary</a></p>
        <div style={{ marginBottom: `1.45rem` }}>
          <ImageGallery/>
        </div>
      </Layout>
    )
    export default IndexPage

Gatsby automatically creates dynamic routes for single pages in the  `src/pages` folder, with `index.js` being the root or home page.

オプションです.少しスタイルを調整するような感じですか?にsrc/components/header.js ファイルを変更background のスタイルプロパティ<header> 要素#002954 .

また、サイトのタイトルを書き換えることもできますgatsby-config.js . 更新title 資産siteMetadata ギャツビーCloudary画像ギャラリーに.
今、開発サーバーを再起動し、更新されたページを見てください.以下に例を示します:

次に、このコマンドを端末に入力して、配備可能な最適化されたビルドを作成します.

    gatsby build

Netlifyへの配備

このJamstackアプリを展開するにはNetlify プリビルドされた連続的な統合と連続的な配送(CI/CD)パイプラインで、これらのステップに従ってください

githubやbitbucketなどのリモートリポジトリにコードをプッシュします.

Create a Netlify account でログインします.

NetLifyで展開したリポジトリから新しいプロジェクトを作成します.

テキストフィールドにビルドコマンドを入力し、ディレクトリをビルドしますgatsby build and public , それぞれ.ほとんどの場合、Netlifyは、技術を検出し、それらのフィールドを自動化します.

環境変数をNetLifyの環境変数設定に追加します.この手順を省略すると、展開は失敗します.

展開とvoilaを実行してください!あなたのイメージギャラリーの形を取っている.

ここではdeployed version このプロジェクトの.
そして、ここでは、ちょうどあなたが作成したページに配信された8つの高解像度の画像とギャツビーとCloudinaryの力を披露する配備されたウェブサイトの灯台監査です

完全なコードについては、GitHub repository .

概要

今では、GallsbyソースCloudaryプラグインを使用して、最適化された応答画像を構築する方法を学びました.
また、チェックアウトGatsby-Transformer-Cloudinary plugin , これにより、メディアの資産をCloudinaryにアップロードし、ファイルノードを作成しますgatsby-image コンポーネントの反応.楽しい!