Новая фотогалерея, помощник и работа с клавиатурой
Рассказываю о пяти нововведениях в редакторе для написания статей, которые появились в этом месяце.
1. Новая фотогалерея
Раньше мы использовали слайдер: клик справа перелистывал снимки вперед, клик слева — назад. Такое решение содержало несколько проблем.
Во-первых, не всегда понятно, что перед нами именно фотогалерея. От обычной картинки её отличало только наличие небольших точек в нижнем правом углу — «листалок». В какой-то момент мы добавили интерфейсный «костыль» в виде иконки в левом верхнем углу — получилось, честно говоря, так себе.
Во-вторых, подписи к снимкам. У каждого снимка в фотогалерее может быть разная длина подписи. Непонятно, что делать с текстом статьи, который находится после галереи: делать так, чтобы он «прыгал» в зависимости от высоты подписи или оставлять «дыру» в верстке.
В-третьих, размер фотографий. Непонятно, что делать с картинками разного размера: подстраивать размер всей фотогалереи под самый большой снимок и оставлять пустоту по краям у остальных или делать так, чтобы всё статья «прыгала» в зависимости от высоты картинки.
Накопившиеся проблемы привели к тому, что мы решили вовсе отказаться от формата слайдеров в пользу плиточной структуры. Как здесь:
В плиточной структуре предусмотрено несколько вариаций — две фотографии рядом, одна большая с двумя вертикальными маленькими и так далее. Снимки, которые не вместились, скрываются под цифрой с плюсом. По клику можно посмотреть полноценную фотографию с подписью.
2. Помощник
Для новых участников сообщества в правом нижнем углу редактора появился помощник. Он показывает короткие советы о том, что и как можно писать на DTF, какие шорткаты можно использовать в редакторе.
В будущем мы будем использовать его для анонса важных обновлений в редакторе — чтоб не пропустить что-то интересное.
3. Проблема больших фотографий
Раньше было тяжело (в буквальном смысле) писать статьи с большими фотографиями — редактор отображал исходники фотографий и страница получалось очень тяжелой. Иногда даже браузер мог зависнуть.
Теперь после загрузки снимка в редакторе отображается оптимизированная версия снимка.
4. Работа с клавиатурой
Работа с клавиатурой — одно из самых приоритетных направлений в развитии редактора. Сейчас работа в нём перешла в область обработки микрокейсов.
Например: написал имя автора цитаты, нажал на Enter — но вместо того, чтобы перейти в следующее поле цитаты, я оказался в новом текстовом блоке под цитатой. Из-за таких мелочей работа с редактором не кажется бесшовной и стабильной.
В этом обновлении редактора мы проработали целый набор таких микрокейсов. Вот несколько примеров:
- Загружаю фотографию в статью, нажимаю Enter на клавиатуре, фотография появилась в редакторе. Но чтобы продолжить написание статьи нужно тянуться за мышкой и кликать в текстовое поле под картинкой. Исправили: теперь курсор самостоятельно встаёт в текстовое поле сразу под фотографией.
- Пишем подпись к картинке. Жмем Enter и в подписи появляется еще один параграф в подписи. Исправили: теперь по Enter выходим из подписи в пустой текстовый блок под фотографией.
- Заходим в редактирование статьи и ставим курсор в заголовок. Жмем Enter, а новый текстовый блок создается в конце статьи. Исправили: курсор встаёт в самое начало статьи.
- Создаем список, заполняем его. Жмем два раза на Enter — бац, и теперь мы вышли из списка в обычное текстовое поле. Можем продолжать писать текст без мышки.
- По Tab во всех модулях редактора происходит переход в следующее поле.
Таких небольших кейсов еще много. Продолжаем их отлавливать и исправлять — спасибо всем за вашу помощь в этом!
5. Затемнение страницы при клике на мини-редактор
Чтоб ничего не отвлекало.
Осталось исправить сотню-другую багов :-)
Мы просто даем багам новый домик!
Зачем исправлять, оставьте
Свежая новость про Беседку доказывает, как это полезно :^)
Возможно я что-то не так делаю, но при нажатии в мобильном приложении для iOS на любое фото из плиточной структуры, открывается только первое фото. Любое другое не открывается для просмотра.
Вот один из багов)
Запилил статью с картинками: https://dtf.ru/flood/21837-raboty-koncept-hudozhnika-ea
Денис сделал ей широкий формат. Потом я заметил опечатку, исправил, теперь часть картинок широкие, часть мелкие, смотрится стремно, поправьте плез.
И еще, будет ли возможность свою статью самому оформлять как широкоформатную? Было б неплохо.
блин чуваки
плитки в андроид приложении не дают посмотреть фото кроме первого
Приложение под андроид все время опаздывает)) (Хотя, если честно, надоело уже)