DTF Филипп Концаренко
1 076

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

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

В закладки

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

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

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

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

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

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

{ "items": [{"title":"","image":{"type":"image","data":{"uuid":"f79c0bb6-e97d-11e4-b3be-273e76e8f645","width":3680,"height":2760,"size":1676460,"type":"jpg","color":"3a5877","external_service":[]}}},{"title":"","image":{"type":"image","data":{"uuid":"eaf22461-983d-c954-4651-09f7a64a00e9","width":3024,"height":4032,"size":2545715,"type":"jpg","color":"878c90","external_service":[]}}},{"title":"","image":{"type":"image","data":{"uuid":"ab96b06a-2b8d-d971-cd65-380f228504b8","width":4032,"height":3024,"size":2550446,"type":"jpg","color":"8ba2b2","external_service":[]}}},{"title":"","image":{"type":"image","data":{"uuid":"80ca8dee-27e9-6dc2-cfb5-a734a645d5d5","width":3939,"height":2954,"size":2778916,"type":"jpg","color":"567fa8","external_service":[]}}},{"title":"","image":{"type":"image","data":{"uuid":"bbb79d7e-4a91-ece8-02f9-adf2a3ecae43","width":4032,"height":3024,"size":3079595,"type":"jpg","color":"66726e","external_service":[]}}},{"title":"","image":{"type":"image","data":{"uuid":"666021c0-2073-1b37-cb01-bfc29d32ed7c","width":4032,"height":3024,"size":5186634,"type":"jpg","color":"adc59b","external_service":[]}}},{"title":"","image":{"type":"image","data":{"uuid":"2091ce2b-fc77-4ecc-97f2-0709ac22f241","width":4032,"height":3024,"size":4697326,"type":"jpg","color":"2f351f","external_service":[]}}}] }

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

2. Помощник

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

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

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

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

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

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

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

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

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

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

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

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

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

#редактор #обновления

{ "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": 33, "likes": 82, "favorites": 7, "is_advertisement": false, "subsite_label": "team", "id": 21848, "is_wide": false }
{ "id": 21848, "author_id": 52, "diff_limit": 1000, "urls": {"diff":"\/comments\/21848\/get","add":"\/comments\/21848\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/21848"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 64968 }

33 комментария 33 комм.

Популярные

По порядку

Написать комментарий...
9

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

Ответить
21

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

Ответить
0

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

Ответить
3

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

Ответить
0

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

Ответить
1

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

Ответить
3

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

Ответить
1

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

Ответить
1

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

Ответить
1

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

Ответить
0

А скажите в пикселях, когда встает широко? чтобы ориентироваться.

Ответить
3

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
2

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

Ответить
2

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

Ответить
1

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

Ответить

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

1

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

Ответить
1

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

Ответить
0

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

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

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

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

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

Ответить
0

Сделайте прямую копипасту картинок в редактор, как сейчас в комментариях.

Ответить
0

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

Ответить
0

Я имел ввиду из буфера обмена.

Ответить
1

...то есть не линк, а саму пикчу, если ее копировать в буфер.

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

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

Ответить
0

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

Ответить
0

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

Ответить
0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjog" } } }, { "id": 10, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-250597-0", "render_to": "inpage_VI-250597-0-1134314964", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=clmf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudo", "p2": "ftjf" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvc" } } } ]
Игру с лучшим стелсом никто не заметил
Подписаться на push-уведомления