@sarathorn
php программист, веб-дизайнер, коллекционер

Сделать адаптивные картинки в CKEDITOR, с чего начать?

Доброго времени!

Есть самописный движок и большое желание сделать его ещё лучше.
Для редактирования контента используется редактор CKEDITOR.
Всё в нём нравится, кроме работы с картинками.

Проблемы:
1) Размер картинки... Сайты уже давно не имеют чётких размеров в пикселях, а значит и нет смысла задавать размеры фотки в пикселях. Можно в редакторе задавать размеры в процентах, но... картинка в 35% ширины на FullHD мониторе смотрится идеально, а на каком-нибудь iPhone 5s напоминает крошечную пиктограммку. Решение: задавать размер через классы css, например, .fit - 100%, .fit50 - 50%, .fit25 - 25% и так далее в зависимости от необходимости. А в css уже через медиа-запросы настраивать точные размеры.
2) Выравнивание. ckeditor на фотку просто вешает float:left; или float:right; но на устройствах с небольшим экраном нет смысла выравнивать картинки и делать обтекание текстом. Опять решаю всё через классы: .left и .right. На определённом брейкпоинте фотка становится с float:none; width:100%;
3) LazyLoad и необходимый размер. Клиенты очень часто грузят фотки без какой-либо обработки, то есть зачастую с разрешением, грубо говоря, 8000х6000. Это легко решается на бэкэнде, php скрипт, который загружает фотку просто её ресайзит до, например, 1600 по ширине. Но вернёмся к iPhone 5s, ему нет никакого смысла грузить фотку с 1600 по ширине. Ему достаточно и 400-500 пикселей. Можно настроить lazyload через data атрибуты, а на src у тега img вешать какой-нибудь gif прелоадер или фотку, но в крайне низком качестве. Всё хорошо и даже легко сделать на строне php бэкэнда, но только вот в самом редакторе вместо фотки будем наблюдать за gif спиннером или очень низкокачественной фоткой...

Хочу спросить совета как лучше всего решить поставленную задачу. Особенно волнует часть с lazyload. Бэкэнд без проблем может сохранять каждую загруженную фотку в 3-4 разрешениях и, например, одну в низком разрешении с блуром для плейсхолдера. Это не проблема. Просто как мне с минимальными трудозатратами сделать удобную загрузку фоток, чтобы в диалоге редактора можно было поставить галочку напротив необходимости в LazyLoad, галочку напротив сохранения в разных разрешениях?
  • Вопрос задан
  • 806 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы