Аватарки на сайте
Продолжаю приводить новую версию в порядок, и теперь дело дошло до работы с аватарками.
Исторически я всегда использовал сервис 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
👍
👎
❤️
🔥
😮
😢
😀
😡
1 116
29.03.2022, 12:05:16
Комментарии
bezumkin.ru
Личный сайт Василия Наумкина
Прямой эфир
Василий Наумкин
23.12.2024, 05:33:00
В MODX сначала создали проблему, автоматически генерируя адреса, а потом "решили" заморозкой.
Так ч...
Вывод товаров на сайте
21
Дмитрий
14.12.2024, 09:10:38
Василий, прошу прощения, тупанул, не разобрался сразу. Фреймворк отличный! "Чистый лист" на vue, рис...
Начинаем новый курс!
14
Василий Наумкин
05.12.2024, 20:01:14
В итоге основная ошибка была в неправильном общем root в Nginx, из-за чего запросы не улетали на фай...
Запуск в продакшн
55
Василий Наумкин
22.11.2024, 03:33:54
Спасибо!
День рождения 42
5
inna
06.11.2024, 15:47:13
Да. Все работает. Спасибо.
Vesp 3.0
108
Василий Наумкин
01.07.2024, 11:56:41
Да, верно, именно так.
А в контроллере, скорее всего, ловить данные методом post.
Оплата заказа
2
Василий Наумкин
26.06.2024, 09:38:15
О, точно, вылезает если не залогинен.
Спасибо, исправил!
Обновление проекта
2
Василий Наумкин
09.04.2024, 04:45:01
> Ошибка 500
Это не похоже на ошибку Nginx, это скорее всего ошибка PHP - надо смотреть его логи.
...
Создание нового проекта
63
Василий Наумкин
20.03.2024, 21:21:52
Volledig!
Поездка в Швейцарию
8
Андрей
14.03.2024, 13:47:10
Василий! Как всегда очень круто! Моё почтение!
День рождения 41
6
Уровни подписки
Спасибо!
500 ₽ в месяц
Эта подписка ничего не даёт, просто возможность сказать спасибо за мои заметки. Подписчики отмечаются зелёненьким цветом в комментариях.
Большое спасибо!
1 000 ₽ в месяц
И эта подписка не даёт ничего, кроме оранжевого цвета в комментариях и возможности сказать спасибо, но уже большое!