LOADING ...

Обновлен редактор якорных тегов

Jamie Levinson Feb 11, 2019. 0 comments

Добавляет улучшения качества жизни в редактор, добавляя и внедряя якорные ссылки на избранные сообщения.

  • добавляет функциональность в поле ввода привязки для full-bleed-widget которая заставляет ввод тега привязки не использовать пробелы. проверяет, является ли ввод уникальным для страницы, и выдает предупреждение, если это не так.
  • когда значения привязки существуют, генерирует выпадающий список в модале «Вставить ссылку», который заполняется доступными значениями.
  • добавить функциональность в модал «Вставить ссылку», который не позволяет добавлять пустое значение ссылки и позволяет только значение в поле ввода URL или элемент, который выбирается из выпадающей ссылки. Когда один добавляется / выбирается, другой очищается

Anchor Tag Validation

  • Обновите тег привязки full-bleed-widget с full-bleed-widget
  • Попробуйте обновить другой full-bleed-widget чтобы использовать то же значение, и должно произойти следующее:

Add Link Modal Improvement

  • Добавьте ссылку на страницу, используя кнопку «Ссылка / Отмена» на панели инструментов
  • якоря должны быть доступны в раскрывающемся списке:

Suggested posts

Добавлена ​​возможность отключить эффект «лупа» на изображениях Добавлена ​​возможность отключить эффект «лупа» на изображениях

Теперь при загрузке изображений существует переключатель, который можно отключить, чтобы изображение отображалось на экране без эффекта увеличения при нажатии / наведении. По умолчанию состояние переключателя будет «по умолчанию лупа включена». Пользователь должен будет включить, чтобы отключить эффект.

Объединенные значки инструментов в раскрывающемся меню в редакторе для освобождения места Объединенные значки инструментов в раскрывающемся меню в редакторе для освобождения места

Новый раскрывающийся список содержит перемещенные параметры как для стандартных сообщений, так и для избранных. Поскольку мы постоянно добавляем функции в редактор, у нас не хватает места для отображения этих параметров. Сегодня мы запускаем новый выпадающий редактор, чтобы освободить место и сделать его менее загруженным. Standard Post Dropdown: Ваш браузер не поддерживает видео тег HTML5. Нажмите здесь, чтобы посмотреть оригинальный GIF Стандартный почтовый редактор: до и после выпадающего списка. Мы переместили Quotable Icon Review Icon в новый выпадающий список, расположенный справа от параметров редактора. Featured Post Dropdown: Ваш браузер не поддерживает видео тег HTML5. Нажмите здесь, чтобы посмотреть оригинальный GIF Избранный пост-редактор: до и после выпадающего списка. Мы переместили значок Quotable, значок Review, Dropcap Icon и новый значок Full Bleed Widget в новый выпадающий список, расположенный справа от параметров редактора. Эти изменения не должны влиять на функциональность перемещенных параметров.

Full Bleed Widget добавлен в избранные опции сообщения Full Bleed Widget добавлен в избранные опции сообщения

Следующий урок поможет вам с нуля создать и усовершенствовать FBW с помощью редактора Kinja. Есть четыре важных части FBW: Базовое изображение Наложение изображения (необязательно) Якорные ссылки с пользовательским социальным ресурсом (необязательно) Эффект параллакса (опционально) Базовое изображение Виджет с полным кровотечением состоит как минимум из одного изображения ( a base image ), поэтому прежде чем начать, убедитесь, что оно у вас есть. Вторичное изображение может быть добавлено как наложение, но мы вернемся к этому позже. Поскольку основная цель виджета с полным кровотечением заключается в добавлении большого визуального элемента к избранному сообщению, рекомендуется использовать очень большой актив изображения: Мы рекомендуем изображение размером не менее 800 пикселей и шириной не менее 3000 пикселей . Однако это не является жестким требованием, и вы можете свободно экспериментировать с различными размерами. Идея состоит в том, что этот виджет должен отвечать вашим творческим потребностям, а не заставлять вас предвзятым ограничением дизайна. Вы должны выбрать рекомендуемый шаблон для опции FBW . Мы не поддерживаем FBW в сообщениях по умолчанию. Давайте проверим один только с базовым изображением: Пример FBW, использующий только базовое изображение. Когда изображение попадает в область просмотра, применяется тонкий эффект замирания. Должны ли мы сделать один? Чтобы включить FBW, выберите его из нового выпадающего меню в редакторе: Выбор опции вставки FBW поместит FBW там, где находится ваш курсор, и откроет модальное изображение для загрузки. После загрузки базового изображения вы можете предварительно просмотреть его, сохранив как черновик. Если вам не требуется наложение, то все готово! Вуаля! Пример использования FBW прозрачного PNG в качестве пользовательской цитаты. Overlay Image (optional) Этот необязательный элемент исчезает, как только базовое изображение прокручивается в область просмотра. Таким образом, базовое изображение постепенно исчезнет, ​​а затем покажет наложенное изображение. Наложение по центру по вертикали и горизонтали над базовым изображением. В оверлее есть приятное тонкое движение, которое создает довольно крутой визуальный эффект для вашего контента. Некоторым использованием может быть включение цитаты с пользовательским шрифтом (см. Ниже) или заголовков, чтобы обозначить FBW как новый разрыв раздела. Наложенное изображение в настоящее время ограничено максимальной шириной 830 пикселей, но может быть шире этого. Это будет просто масштабироваться ответственно. Чтобы добавить наложенное изображение, просто щелкните базовое изображение, и появится значок наложения. Нажмите на значок, и вам будет предложено загрузить дополнительное наложение изображения (опять же, это не является обязательным требованием FBW и должно использоваться, только если вы хотите добавить наложение): Якорные ссылки с пользовательским социальным ресурсом (необязательно) Поскольку FBW - это хороший способ добавить отдельные разделы к вашему контенту в сообщении, мы добавили возможность привязки к элементу. Это необязательное поле, и вы всегда можете оставить его пустым. Чтобы добавить его, достаточно просто заполнить поле привязки желаемым тегом привязки: т.е. нарисовал Затем вы использовали бы инструмент ссылки Kinja, чтобы добавить привязку к текстовому элементу так же, как вы конвертировали бы текст в ссылку. Вместо того, чтобы заполнять поле URL, теперь вы можете выбрать созданный якорь из выпадающего меню: Теперь вы создали ссылку, которая привязывает к FBW с соответствующим тегом привязки! Я текст, который переходит к примеру базового изображения Я текст, который переходит к примеру наложения изображения Пользовательская информация о социальных сетях (создается при наличии привязки): Вы также заметите, что URL будет автоматически обновляться при прокрутке при наличии привязки. Эта ссылка также может быть использована для продвижения непосредственно на закрепленный контент вместо того, чтобы пользователь заходил вверху поста. URL будет выглядеть так: https://changelog.kinja.com/full-bleed-widget-added-to-featured-post-options-1820331713?anchor=overlay-image Если пользователь поделится виджетом с полным кровотечением, имеющим привязку, изображение FBW будет использовано для социальной рекламы, а также первый абзац после FBW: Кнопки обмена автоматически обновятся, чтобы поделиться разделом контента, который вы читаете. Parallax Effect (optional) FBW также поддерживает эффект параллакса. Эта опция может быть переключена простым нажатием на значок параллакса. Здесь применимы те же размеры. Важно отметить, что это приводит к превращению изображения в фоновый элемент, закрывающий окно браузера. Части изображения будут видны не во всех измерениях браузера (16x9 - это относительно безопасное соотношение для ваших изображений). Лучше всего рассматривать FBW с параллаксом чисто фоновым элементом. Также важно отметить, что эта desktop only supported feature для desktop only supported feature и мобильное представление будет отображаться как стандартная FBW. Если вы используете GIF в качестве полноценного ресурса изображения, мы конвертируем их в mp4 для визуальной оптимизации и оптимизации скорости страницы. Это означает, что картинки не могут получить эффект параллакса, так как они больше не отображаются как изображения. Надеемся, что FBW вдохновит вас на поиск новых и креативных способов поднять и расширить ваш рассказ, используя шаблон популярного поста. Не стесняйтесь обращаться с любыми вопросами и проблемами. Спасибо!

Language