Новая фотогалерея, помощник и работа с клавиатурой

Рассказываю о пяти нововведениях в редакторе для написания статей, которые появились в этом месяце.

В закладки

1. Новая фотогалерея

Раньше мы использовали слайдер: клик справа перелистывал снимки вперед, клик слева — назад. Такое решение содержало несколько проблем.

Во-первых, не всегда понятно, что перед нами именно фотогалерея. От обычной картинки её отличало только наличие небольших точек в нижнем правом углу — «листалок». В какой-то момент мы добавили интерфейсный «костыль» в виде иконки в левом верхнем углу — получилось, честно говоря, так себе.

Во-вторых, подписи к снимкам. У каждого снимка в фотогалерее может быть разная длина подписи. Непонятно, что делать с текстом статьи, который находится после галереи: делать так, чтобы он «прыгал» в зависимости от высоты подписи или оставлять «дыру» в верстке.

В-третьих, размер фотографий. Непонятно, что делать с картинками разного размера: подстраивать размер всей фотогалереи под самый большой снимок и оставлять пустоту по краям у остальных или делать так, чтобы всё статья «прыгала» в зависимости от высоты картинки.

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

В плиточной структуре предусмотрено несколько вариаций — две фотографии рядом, одна большая с двумя вертикальными маленькими и так далее. Снимки, которые не вместились, скрываются под цифрой с плюсом. По клику можно посмотреть полноценную фотографию с подписью.

2. Помощник

Для новых участников сообщества в правом нижнем углу редактора появился помощник. Он показывает короткие советы о том, что и как можно писать на DTF, какие шорткаты можно использовать в редакторе.

В будущем мы будем использовать его для анонса важных обновлений в редакторе — чтоб не пропустить что-то интересное.

3. Проблема больших фотографий

Раньше было тяжело (в буквальном смысле) писать статьи с большими фотографиями — редактор отображал исходники фотографий и страница получалось очень тяжелой. Иногда даже браузер мог зависнуть.

Теперь после загрузки снимка в редакторе отображается оптимизированная версия снимка.

4. Работа с клавиатурой

Работа с клавиатурой — одно из самых приоритетных направлений в развитии редактора. Сейчас работа в нём перешла в область обработки микрокейсов.

Например: написал имя автора цитаты, нажал на Enter — но вместо того, чтобы перейти в следующее поле цитаты, я оказался в новом текстовом блоке под цитатой. Из-за таких мелочей работа с редактором не кажется бесшовной и стабильной.

В этом обновлении редактора мы проработали целый набор таких микрокейсов. Вот несколько примеров:

  • Загружаю фотографию в статью, нажимаю Enter на клавиатуре, фотография появилась в редакторе. Но чтобы продолжить написание статьи нужно тянуться за мышкой и кликать в текстовое поле под картинкой. Исправили: теперь курсор самостоятельно встаёт в текстовое поле сразу под фотографией.
  • Пишем подпись к картинке. Жмем Enter и в подписи появляется еще один параграф в подписи. Исправили: теперь по Enter выходим из подписи в пустой текстовый блок под фотографией.
  • Заходим в редактирование статьи и ставим курсор в заголовок. Жмем Enter, а новый текстовый блок создается в конце статьи. Исправили: курсор встаёт в самое начало статьи.
  • Создаем список, заполняем его. Жмем два раза на Enter — бац, и теперь мы вышли из списка в обычное текстовое поле. Можем продолжать писать текст без мышки.
  • По Tab во всех модулях редактора происходит переход в следующее поле.

Таких небольших кейсов еще много. Продолжаем их отлавливать и исправлять — спасибо всем за вашу помощь в этом!

5. Затемнение страницы при клике на мини-редактор

Чтоб ничего не отвлекало.

Продакт DTF, TJ, vc.ru
{ "author_name": "Филипп Концаренко", "author_type": "editor", "tags": ["\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440","\u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f"], "comments": 29, "likes": 82, "favorites": 7, "is_advertisement": false, "subsite_label": "team", "id": 21848, "is_wide": true, "is_ugc": false, "date": "Fri, 22 Jun 2018 19:10:27 +0300", "is_special": false }
0
29 комментариев
Популярные
По порядку
Написать комментарий...
9

Осталось исправить сотню-другую багов :-)

Ответить
21

Мы просто даем багам новый домик!

Ответить

Лишенный шар

Denis
0

Попробуйте заманить баги в ловушку и там их уничтожить.

Ответить
3

Зачем исправлять, оставьте
Свежая новость про Беседку доказывает, как это полезно :^)

Ответить
0

Чот не видел ещё модов для дтф

Ответить
1

Возможно я что-то не так делаю, но при нажатии в мобильном приложении для iOS на любое фото из плиточной структуры, открывается только первое фото. Любое другое не открывается для просмотра.

Ответить
3

Да, забыл написать, что добавили новый баг. Сейчас уже выливаем обновление. Спасибо!

Ответить
1

Вот один из багов)
Запилил статью с картинками: https://dtf.ru/flood/21837-raboty-koncept-hudozhnika-ea
Денис сделал ей широкий формат. Потом я заметил опечатку, исправил, теперь часть картинок широкие, часть мелкие, смотрится стремно, поправьте плез.
И еще, будет ли возможность свою статью самому оформлять как широкоформатную? Было б неплохо.

Ответить
1

Мы обновили логику немножко. Если картинка шире страницы, то она встаёт на всю ширину страницы. А если меньше, то встаёт на ширину блока с текстом.

Ответить
1

Эх, понятно... Но в идеале же можно сюда добавить кнопочку дополнительную

Ответить

Комментарий удален

3

блин чуваки
плитки в андроид приложении не дают посмотреть фото кроме первого

Ответить
0

Приложение под андроид все время опаздывает)) (Хотя, если честно, надоело уже)

Ответить
0

да это нормально, если бы релизили по отдельности

Ответить
0

О, я не один такой. И у меня на iOS)

Ответить
0

Почти поправили. Скоро заработает.

Ответить
2

За новый дизайн плиточной галереи спасибо вам, а ещё эти отступы по бокам, всё супер.
Только ещё может быть подумайте над количественным индикатором в галерее. К примеру в режиме просмотра фотографий, добавьте сверху тот самый индикатор, например в виде точек. А то так, немного путаешься и теряешься в фото, а ещё теперь при переходе с последней фотографии, сразу перекидывает на первую (до этого вроде такого не было).

Ответить

Видный кофе

2

В статье не нашел любимой ссылки, скину сюда. Вдруг у кого-то что-то сломается - /bugs

Ответить

Лишенный шар

1

Ну, теперь-то заживём :)

Ответить

Комментарий удален

1

С большими пикчами прямо наболело. Спасибо!

Ответить
1

Один вопрос: уже можно нормально скопировать статью из гугл дока, чтобы сохранилась разбивка на абзацы?

Ответить
0

С этим есть некоторые сложности.

При вставке текста в редактор он прогоняется через санитайзер — специальный инструмент, который вырезает лишние теги, чтобы редактор получил текст без стилей.

Если в документе абзацы разбиты при помощи Entre и не использовалось кастомное оформление, то при копировании текста редактор получии правильные данные: абзацы разобьет на блоки, сохранит ссылки и прочее.

Но чаще всего текст в Google Docs разбит на абзацы при помощи <br><br> или <div>. В таких случаях редактору сложно понять, что это отдельный блок текста. Он вырезает все лишние теги и остается только текст — без разделений на параграфы и прочего.

Мы ищем способы обрабатывать как можно больше кейсов — в том числе и с <div>.

Ответить

Комментарий удален

0

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

Ответить

Комментарий удален

Комментарий удален

0

Сколько стоило нанять Кодзиму (гений) в качестве помощника?

Ответить
0

За плиточный формат галереи отдельное спасибо/

Ответить
0

Лучше бы поиск запилили. Ну сколько можно ждать?

Ответить
0

Он есть в планах, и им просто другого рода специалисты должны заняться

Ответить
0

Ооо, полезная информация!

*кстати, заходите ко мне чтоль почитать про ММО, а то активность упала :(*

Ответить
0

Надеюсь, болезнь с переносами починили

Ответить
0

Свадьба Джона сноу - оффтоп
Работы концепт-художника EA - оффтоп
Структура игрового движка - оффтоп
Unreal Engine 4 Meetup - оффтоп,
с первым понятно, какого хрена остальное то?

Ответить

Прямой эфир

{ "jsPath": "/static/build/dtf.ru/specials/DeliveryCheats/js/all.min.js?v=05.02.2020", "cssPath": "/static/build/dtf.ru/specials/DeliveryCheats/styles/all.min.css?v=05.02.2020", "fontsPath": "https://fonts.googleapis.com/css?family=Roboto+Mono:400,700,700i&subset=cyrillic" }