Представляем на dle9.com
хак DLE Avatar crop, который быстро обрезает картинки аватарки загруженные на сайт, Ajax загрузка позволяет сохранять оригинал и координаты вырезаемой области. Многим было интересно, можно сделать обрезание области автарки, как это реализована в сервисе социальной сети или у крупных ресурсов, теперь пользователи могут с помощью хака обрезать фотографии в своем профиле, и применять в качестве аватарки.
К сожалению установка в
DataLife Engine размера (допустима квадратной формы 180х180). в настройках группы, картинка искажается и портится, если последняя в пропорции 3:4 загружена вертикально или горизонтально. По умолчанию сделать нормальный размер, никак нельзя, можно не указывать полный размер картинки при выводе аватара, а указать только максимально возможные размеры, в стилях шаблона, что очень подходят:
img {max-width: 180px; max-height: 180px;}
Решение осуществляется с помощью скрипта, теперь можно вырезать левый-верхний угол у загруженного фото пользователем в качестве аватарки нужный размер и установить его как вам нужно.
Во благо общего развития DLE было сделано следующее, простой модуль или хак, который легко можно интегрировать, Вначале хотел чтоб при редактировании открывало окно, где можно загрузить, затем обрезать, далее сохранить на сервер, но потом понял, что таким образом я могу наделать дыр и безопасность понизиться.
1. Взять скрипт модального окна.
2. Положить внутрь модального окна вывод скрипта .
3. profit
Для установки нужно:
Загрузить файлы на сервер. Загрузить основной файл на сервер engine/ajax/ava.php. Подключить скрипты и стили.
В шаблоне userinfo.tpl
[not-logged]avaCropOpen[/not-logged]
- класс на объект аватарки (Можете изменить везде или использовать уже имеющиеся классы). Если надо открывать редактирование по клику на аву. Остальные скрипты и стили подключайте как удобно.
Или в любом удобном месте разместите свои элементы управления(кнопки, ссылки и прочие) и повесьте на них вызов функций из файла 1.js.
Думаю объяснять их нету смысла, всем знакомы слова save,edit,del, и что они значат :D
В шаблоне userinfo.tpl добавьте нужные ссылки или кнопки и повесить на них соответствующие функции
Например открыть окно изменения миниатюры P.edit()
Обрезка Аватара - Crop
P.S. Я использовал дополнительный плагин magnific-popup.js для модальных окон. Плагин так же есть в папке со всеми файлами.
Совместимая версия
DLE: 9.6 и старше
Автор: teramoune
Скачать хаки для DLE с универсальными свойствами, удобный для обрезки картинки фото пользователя и добавлении к нику, все файлы представленного хака можно скачать последующей ссылке
Avatar-crop-DLE-hak.zip [219,32 Kb] (cкачиваний: 64)
