Как создать галерею изображений с помощью Gatsby и Cloudinary

JAMstack  —  это современная архитектура веб-разработки, основанная на клиентском JavaScript, многоразовых API и предварительно созданной разметке.

У приложения JAMstack есть следующие ключевые аспекты:

  • Целиком работает на CDN (или ADN). CDN расшифровывается как Content Delivery Network, “сеть доставки контента”, а ADN  —  Application Delivery Network, “сеть доставки приложений”.
  • Все совмещено с Git.
  • Автоматизированные сборки выполняются внутри рабочего процесса, когда разработчики отправляют код в репозиторий.
  • Автоматическое развертывание предварительной разметки в CDN/ADN.
  • Практически полная бессерверность. Проще говоря, мы не поддерживаем никаких серверных приложений, а пользуемся уже существующими сервисами (например, электронной почтой, медиа, базой данных, поиском и т. д.).

И любопытный факт: 70%-80% функций, которые когда-то требовали наличия собственного бэкенда, теперь могут полностью выполняться на стороне клиента.

В этой статье мы узнаем, как сделать приложение JAMstack, в котором будет:

И, наконец, мы развернем это приложение через CDN.

Итак, что же мы сегодня конструируем?

Мы создадим галерею изображений. Я люблю кино, поэтому решил сделать галерею фотографий моих любимых актеров. У меня есть для нее имя imaginary.

Для размещения изображений и управления ими мы воспользуемся сервисом управления мультимедиа Cloudinary, которая также предоставляет API-интерфейсы разработчика для загрузки и извлечения изображений, видео и т.д.

Для фронтенда галереи изображений воспользуемся фреймворком Gatsby. Gatsby  —  это платформа для создания веб-сайтов и приложений на основе React с открытым исходным кодом.

Наконец, мы узнаем, как развернуть приложение с помощью автоматического процесса сборки и развертывания. Для этого мы применим Netlify CDN.

К концу статьи наше приложение будет выглядеть так:

TL;DR

В этой статье применяется пошаговый подход. Если вам хочется сразу перейти к исходному коду или демонстрации, то вот ссылки:

Как настроить Cloudinary

Во-первых, создайте учетную запись. Бесплатного плана обслуживания более чем достаточно для нашего приложения.

Чтобы попасть на панель мониторинга Cloudinary, войдите в систему, используя свои учетные данные. Пожалуйста, запишите имя облака (Cloud name), ключ API и секрет API, поскольку они понадобятся в дальнейшем.

Затем загрузите выбранные изображения, которые хотите видеть у себя в галерее. Вы можете создать папку и назвать ее как угодно. Свою я назвал “artists”.

Обратите внимание: имя папки пригодится нам позже, когда мы интегрируем Cloudinary с Gatsby.

Выберите каждое изображение и добавьте им название и описание. Эти два бита метаинформации будут использованы в качестве подписей к изображениям и, соответственно, alt-текста в нашей галерее изображений.

Как настроить Gatsby

Убедитесь, что у вас установлен Node.js. Вы можете скачать и установить его отсюда.

Если установка прошла успешно, следующая команда отобразит версию Node:

node -v

Создание каталога проекта

Создайте каталог проекта для упорядочивания исходного кода. Создадим каталог с именем imaginary.

mkdir imaginary

cd imaginary

Инициализация проекта

Чтобы инициализировать проект с поддержкой Node.js откройте командную строку и введите следующую команду:

npm init -y

Gatsby: установка и первоначальная настройка

Установите инструмент gatsby-cli. Он поможет работать с окружением Gatsby.

npm install -g gatsby-cli

Установите зависимости Gatsby, React и ReactDOM. Вы можете воспользоваться либо командой npm install, как указано выше, либо командой yarn add, если у вас установлен yarn.

yarn add gatsby react react-dom

Также добавим файл .gitignore со следующим содержимым:

.cache
public
node_modules
*.env

Вы можете дополнительно создать README.md и файл лицензии. На данном этапе наш проект должен содержать следующие папки и файлы:

Проекты Gatsby нуждаются в специальном конфигурационном файле gatsby-config.js. Этот файл будет пустым. Создайте файл с именем gatsby-config.js и добавьте в него следующее:

module.exports = {
// здесь пусто
}

Пришло время для первой страницы с Gatsby. Создайте папку с именем src в корне проекта. Потом подпапку с именем pages в разделе src. Дальше файл с именем index.js в разделе src/pages:

import React from 'react';    

export default () => {
return (
<>
<h1>Images to load here...</h1>
</>
)
}

На этом этапе файлы и папки нашего проекта должны выглядеть так:

Давайте запускать

Попробуйте выполнить в командной строке следующую команду, чтобы запустить приложение локально:

gatsby develop

По умолчанию приложение Gatsby работает на порте 8000. Откройте браузер и получите доступ к приложению по адресу http://localhost:8000.

Вот, что вы увидите:

Мы успешно настроили и Cloudinary, и Gatsby. Пришло время свести их вместе.

Cloudinary & Gatsby

Фреймворк Gatsby широко поддерживается сообществом, и к нему существует множество плагинов, покрывающих критические потребности. В начале 2020 года команда Cloudinary представила сообществу разработчиков два крутых Gatsby-плагина:

Поскольку мы заинтересованы только в том, чтобы поместить изображения в галерею, мы остановимся на плагине gatsby-source-cloudinary.

Также установим пакет утилит под названием dotenv для локальной обработки переменных окружения (секретный ключ, ключ API и т. д.).

Откройте командную строку и выполните команду:

yarn add dotenv gatsby-source-cloudinary

Теперь для загрузки картинок в приложение выполните следующие действия:

  1. Создайте файл .env в корне папки проекта и добавьте следующее:
CLOUDINARY_CLOUD_NAME=<YOUR_CLOUDINARY_NAME>
CLOUDINARY_API_KEY=<YOUR_CLOUDINARY_API_KEY>
CLOUDINARY_API_SECRET=<YOUR_CLOUDINARY_API_SECRET>

Обратите внимание: значения в парах ключ-значение доступны на панели мониторинга Cloudinary, как мы уже видели раньше.

2. Отредактируйте файл gatby-config.js, добавив следующее:

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: `artists/` ,
context: true,
tags: true,
maxResults: 50
}
}
]

}

Здесь происходит несколько действий. Мы говорим Gatsby использовать плагин gatsby-source-cloudinary с несколькими параметрами.

Параметры cloudName, apiKey и apiSecret извлекаются из файла .env с помощью пакета dotenv. Мы также указываем значение resourceType как image, поскольку не заинтересованы в извлечении других типов данных.

Значение параметра prefix должно совпадать с именем папки изображений в Cloudinary.

Мы указываем параметрам context и tags значение true, чтобы получить контекстные метаданные и информацию о тегах изображения. Мы также устанавливаем maxResults на 50, чтобы не ограничивать себя значением по умолчанию (оно равно 10).

3. Затем создайте папку с названием components на уровень ниже src, а в ней файл с именем Gallery.js. Для запроса данных из различных источников (таких как markdown, JSON и Excel) Gatsby использует GraphQL.

В нашем случае для запроса изображений мы воспользуемся Cludinary в качестве источника. Для этого применим уже настроенный плагин gatsby-source-cloudinary.

4. Теперь отредактируйте Gallery.js и добавьте следующее:

import React from 'react';
import {useStaticQuery, graphql} from 'gatsby';

const Gallery = () => {
const data = useStaticQuery(
graphql`
query CloudinaryImage {
allCloudinaryMedia {
edges {
node {
secure_url
context {
custom {
alt
caption
}
}
resource_type
}
}
}
}`
);
const images = data.allCloudinaryMedia.edges;
return (
<div className="container">
{images.map((image, index) => (
<figure className="wave" key={`${index}-image`}>
<img
src={image.node.secure_url}
alt={image.node.context.custom.alt} >
</img>
<figcaption>{image.node.context.custom.caption}</figcaption>
</figure>
))
}
</div>
)
};

export default Gallery;

Как видим, для извлечения путей исходного изображения и контекстной информации применяется запрос graphQL. Эта информация нужна для циклического просмотра и добавления изображений с подписью.

5. Следующим шагом будет редактирование файла index.js для импорта Gallery.js.

import React from 'react';
import Gallery from '../components/Gallery';

export default () => {
return (
<>
<Gallery />
</>
)
}

Если вы уже запустили gatsby develop, остановите и потом запустите снова. Еще раз откройте свое приложение в браузере. Вы должны увидеть страницу со всеми изображениями, полученными из Cloudinary.

Но только всё выглядит не так элегантно, как было обещано. Время немного поработать с css.

Создайте файл gallery.css в папке src\components и добавьте в него:

body {
background: #000000 url("https://res.cloudinary.com/atapas/image/upload/v1602214656/misc/6284_n48wtw.jpg") repeat-x center top;
color: #FFFFFF;
}

.container {
margin-top: 55px;
}

.wave {
float: left;
margin: 20px;
animation: wave
ease-in-out
1s
infinite
alternate;
transform-origin: center -20px;
}

.wave:hover {
animation-play-state: paused;
}

.wave img {
border: 5px solid #f8f8f8;
display: block;
width: 200px;
height: 250px;
background-color: #000;
}

.wave figcaption {
text-align: center;
}

.wave:after{
content: '';
position: absolute;
width: 20px;
height: 20px;
border: 1.5px solid #ffffff;
top: -10px;
left: 50%;
z-index: 0;
border-bottom: none;
border-right: none;
transform: rotate(45deg);
}

.wave:before{
content: '';
position: absolute;
top: -23px;
left: 50%;
display: block;
height: 44px;
width: 47px;
background-image: url(https://res.cloudinary.com/atapas/image/upload/v1602212639/misc/screw-head_oglfcu.png);
background-size: 20px 20px;
background-repeat: no-repeat;
z-index: 16;
}

@keyframes wave {
0% { transform: rotate(3deg); }
100% { transform: rotate(-3deg); }
}

6. Импортируйте файл gallery.css в Gallery.js:

import './gallery.css';

И вот, вы должны увидеть, что приложение выглядит намного лучше, чем раньше, как будто изображения висят на стене с анимацией.

Развернем приложение

Последний шаг  —  развернуть приложение в публичном доступе, чтобы его можно было продемонстрировать.

Создайте репозиторий в GitHub и отправьте туда исходный код. Затем создайте учетную запись в Netlify для входа в систему.

Для дальнейшего развертывания на CDN Netlify выполните следующие простые шаги:

  • Создайте сайт через Git.
  • Войдите в свою учетную запись Github и выберите проект галереи изображений. В моем случае название проекта  —  imaginary.
  • На следующем шаге предоставьте информацию о сборке в gatsby build и опубликуйте папку в качестве public/.
  • Затем нажмите на “Site settings”, чтобы сообщить netlify об имени облака Cloudinary, секретном ключе, ключе API и так далее.
  • Перейдите в раздел настройки окружения “Environment” и нажмите кнопку “Edit variables”.
Добавьте переменные окружения
  • Добавьте три переменные, как показано ниже  —  со значениями, взятыми с панели мониторинга Cloudinary.
Добавьте их все
  • Перейдите в раздел настроек развертывания “Deploy” и запустите новое развертывание.
Запустите развертывание
  • Вы можете изменить имя сайта на то, которое вам больше подходит. В моем случае это https://imaginary.netlify.app/:
При желании поменяйте имя сайт

На этом мы закончили. Теперь наш сайт виден для всех.

Читайте также:

Читайте нас в TelegramVK и Яндекс.Дзен


Перевод статьи TAPAS ADHIKARY: How to Create an Image Gallery Using Gatsby and Cloudinary

Предыдущая статьяОбучение программированию лучше начать с языка С. И вот почему
Следующая статья6 функций Pandas для быстрого эксплораторного анализа данных