PHP

Скрипт галереи на PHP: простая фотогалерея с превью

Короткий ответ: простую галерею на PHP можно сделать через папку с изображениями. PHP находит файлы, формирует HTML-карточки, а CSS показывает сетку превью. Это не копия большой социальной сети, но хороший учебный скрипт для понимания галереи

Запрос “как ВКонтакте” обычно означает, что пользователь хочет плитку изображений, кликабельные фото и понятную структуру. Начинать лучше с простой версии без загрузки файлов и аккаунтов, а уже потом добавлять базу данных, авторизацию и модальное окно

Структура проекта

gallery-test/
  index.php
  images/
    photo-1.jpg
    photo-2.jpg
    photo-3.png

Положите несколько изображений в папку images

Простой вывод галереи

index.php

<?php

$images = glob(__DIR__ . '/images/*.{jpg,jpeg,png,webp}', GLOB_BRACE);

?>
<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>Галерея на PHP</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 40px;
        }

        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 16px;
        }

        .gallery a {
            display: block;
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid #e5e7eb;
        }

        .gallery img {
            display: block;
            width: 100%;
            height: 160px;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <h1>Галерея на PHP</h1>

    <div class="gallery">
        <?php foreach ($images as $image): ?>
            <?php
            $url = 'images/' . basename($image);
            ?>
            <a href="<?= htmlspecialchars($url, ENT_QUOTES, 'UTF-8') ?>">
                <img
                    src="<?= htmlspecialchars($url, ENT_QUOTES, 'UTF-8') ?>"
                    alt="Фото из галереи"
                >
            </a>
        <?php endforeach; ?>
    </div>
</body>
</html>

Запустите сервер

php -S localhost:8000

Откройте http://localhost:8000. PHP найдет изображения и выведет сетку

Почему используется basename

basename($image) оставляет только имя файла без полного серверного пути. Это важно, потому что браузеру нужен публичный путь вроде images/photo-1.jpg, а не системный путь на диске

Плюс так вы не показываете посетителю внутреннюю структуру сервера

Сообщение, если фото нет

<?php if (empty($images)): ?>
    <p>В галерее пока нет изображений</p>
<?php else: ?>
    <div class="gallery">
        <!-- вывод фото -->
    </div>
<?php endif; ?>

Пользователь должен видеть понятное состояние, а не пустую страницу

Как добавить подписи

Если подписи простые, можно временно сделать их из имени файла

<?php
$filename = pathinfo($image, PATHINFO_FILENAME);
$caption = str_replace('-', ' ', $filename);
?>

<p><?= htmlspecialchars($caption, ENT_QUOTES, 'UTF-8') ?></p>

Для настоящего сайта подписи лучше хранить в базе данных, а не угадывать по имени файла

Почему это еще не полноценная галерея

Учебный скрипт показывает изображения из папки. В полноценной галерее обычно нужны

загрузка файлов через форму
проверка типа и размера изображения
генерация превью
хранение данных в базе
авторизация пользователя
удаление и редактирование фото
защита от вредоносных файлов
модальное окно для просмотра

Не стоит сразу делать все. Сначала добейтесь работающего вывода изображений из папки

Мини-практика

Добавьте в папку images пять картинок разных размеров и проверьте, что сетка не ломается. Затем добавьте блок с подписью из имени файла и сообщение для пустой галереи

Частые ошибки

Путают серверный путь и адрес __DIR__ нужен PHP для поиска файла, а браузеру нужен путь images/photo.jpg

Не проверяют пустую папку Если изображений нет, покажите понятное сообщение

Разрешают любые файлы Для загрузки изображений нужна отдельная проверка типа, размера и имени

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

Что почитать дальше по PHP

Если нужен общий маршрут по теме, откройте рубрику PHP. Для соседних задач пригодятся эти разборы:

0 комментариев

Старые

Новые Популярные