Аватарки на сайте

Продолжаю приводить новую версию в порядок, и теперь дело дошло до работы с аватарками.

Исторически я всегда использовал сервис Gravatar. который позволяет вывести фотку пользователя по md5 хэшу от его email. Идея отличная: ты грузишь аватарку один раз и все сайты, на которых ты зарегистрирован, могут её получить.

Но, во-первых, не все пользователи про это знают. И во-вторых, это всё-таки сторонний сервис, который может перестать работать и я останусь без аватарок.

Поэтому на моих сайтах всегда была возможность загрузить аватарку самостоятельно, и теперь я решил реализовать её как давно хотел (нажмите на картинку для запуска GIFки).

По катом немного подробностей.

Работа с аватаркой происходит в разделе настроек профиля пользователя через CropperJs. Загрузку файлов через выбор из браузера и drag-n-drop я рассказывал в прошлой заметке. Тут ничего нового.

А вот обрезать аватарки я не стал, сохраняя вместо этого область выделения как свойство загруженного файла. Поэтому при запросе картинки через контроллер Image можно проверять, есть ли у файла параметр crop, и передавать его библиотеке Glide, которая используется в Vesp из коробки.

Просто расширяем родной контроллер и добавляем проверку:

<?php

namespace App\Controllers;

use Psr\Http\Message\ResponseInterface;
use App\Models\File;

class Image extends \Vesp\Controllers\Data\Image
{
    public function get(): ResponseInterface
    {
        // Получаем файл по ID только если у него есть метаданные
        if ($file = File::query()->whereNotNull('metadata')->find($this->getProperty('id'))) {
            // И если в метаданных есть обрезка
            if ($crop = @$file->metadata['crop']) {
                // Собираем и выставляем дополнительные параметры 
                // для родительского контроллера
                $data = implode(',', [$crop['width'], $crop['height'], $crop['x'], $crop['y']])
                $this->setProperty('crop', $data);
            }
        }
        // Передаём работу родительскому контроллеру
        return parent::get();
    }
}

С одной стороны, это дополнительный запрос в БД на каждый файл, а с другой получается очень красиво и удобно. Теперь пользователь всегда может не только загрузить свою аватарку, но и отредактировать область отображения без новой загрузки.

Дальше дело техники. К модели пользователя привязан файл и все данные (заметки и комментарии) выбираются с этой привязкой.

Наличие картинки проверяется прямо на фронтенде. Если она есть, то выводится ссылка на аватар, которая правильно обрезается контроллером. Если нет, то показываем аватар по умолчанию.

Старым пользователям я подгрузил картинки из Gravatar, так что все картинки опять хранятся у меня на сервере. Можно авторизоваться и настраивать профиль.

← Предыдущая заметка
Работа с картинками
Следующая заметка →
Загрузка видеофайлов
Комментарии (0)
bezumkin
Василий Наумкин
15.09.2023 08:27
Никакой разницы, только в количестве строк. Не знаю, почему я так написал - не задумывался -)
bezumkin
Василий Наумкин
14.09.2023 23:59
Очень рад, что тебе понравилось!
NightRider
12.09.2023 12:37
Понял. Спасибо за подробный ответ!
Сергей Лелеко
10.09.2023 06:23
Понял! да , сталкивался с этой проблемкой
Дмитрий П.
07.09.2023 11:19
ну да, что-то на этот момент я не обратил внимание) видимо дублирование в девтулсах происходит из-за...
NightRider
29.08.2023 10:30
Просто так совпало что у меня пока что есть свободное время на изучение. Остальные скорее всего побо...
bezumkin
Василий Наумкин
28.08.2023 01:02
Абсоюлютно верно, у меня даже IDE подсвечивает ошибку - не знаю, как пропустил. Поменял на $me-&gt;g...
bezumkin
Василий Наумкин
25.08.2023 10:24
Очень рад!
inetlover
Александр Наумов
24.08.2023 10:49
Спасибо!!
bezumkin
Василий Наумкин
21.08.2023 12:37
Сорян, что-то я уже второй раз затупил с этим дампом. Держи правильный ms2.sql.zip (2.79 Mb), в заме...