CSS3 галерея изображений с эффектом затухания на JS и PHP. Часть 2.

Добавить комментарий
Никита Киселев

В прошлой статье мы занимались подготовкой проекта. В этой статье займёмся написанием серверной части галереи.

Что нужно делать на сервере?

  • Находить изображения в папке
  • Если для какого изображения нет миниатюры, создать её
  • Возвращать JSON объект с изображениями постранично.

Для начала, добавим немного тестовых изображений в папку public/images, чтобы было что искать. Предлагаю воспользоваться следующим скриптом, предоставленным на сайте https://images.nikitakiselev.ru/:

mkdir public/images
cd public/images
php -r "$(curl -fsSL https://gist.githubusercontent.com/nikitakiselev/c86c56ce39c7eb9ec3c5eba54f24fd76/raw" 50

Этот скрипт скачает в папку public/images 50 случайных изображений, которые будут выводиться в галерее.

Сразу, чтобы не забыть, искючим все изображения из репозитория git. Для этого создадим в папке public/images файл .gitignore со следующим содержимым:

public/images/.gitignore

*
!.gitignore

Т.е. мы исключаем все файлы, кроме самого файла .gitignore.

Теперь в папке public создадим файл images.php. Это будет точкой входа в php приложение.

cd ..
touch images.php

При обращении к этому файлу, скрипт будет искать все изображения в папке public/images и возвращать json объект с изображениями и их его миниатюрами. Если у какого изображения нет миниатюры, её нужно сгенерировать.

С генерацией миниатюр нам поможет пакет http://image.intervention.io/. Установим его для нашего проекта. Для этого в корне проекта выполним следующий код:

cd ..
composer require intervention/image

В файле public/images.php подключим загрузчик классов composer

public/images.php

<?php
require __DIR__."/../vendor/autoload.php";