Настройка фонового изображения плитки

Введение

Цветная плитка со значком понятна и компактна; плитка с фотографией привлекает. Smart Tiles позволяет любой плитке нести фоновое изображение вместо сплошного цвета — фотографию офиса для плитки Как нас найти, снимок продукта для страницы запуска, фотографию команды для сайта подразделения. В этой статье объясняется, как задать изображение, как оно отображается и как сохранить читаемость плитки.

Установка изображения

1. Откройте страницу в режиме редактирования и нажмите кнопку … плитки.
2. Наведите указатель на Цвет фона и выберите Фоновое изображение — первый пункт подменю.
3. В диалоге Изображение введите или вставьте адрес изображения в поле URL-адрес изображения либо просмотрите библиотеки сайта и нажмите на изображение.
4. Нажмите Применить.

Диалог Изображение — тот же, что используется для собственных изображений значков: поле URL-адрес изображения принимает адрес, начинающийся с https://, или путь, начинающийся с /, а список под ним позволяет просматривать библиотеки документов текущего сайта папка за папкой, показывая изображения в виде эскизов. Диалог подробно описан в статье KB10244. Использование собственного изображения в качестве значка плитки.

Как отображается изображение

Изображение заполняет всю плитку: оно масштабируется так, чтобы полностью покрыть плитку, и центрируется, а то, что не помещается, обрезается по краям. Плитка сохраняет свои пропорции — её ширина задаётся настройкой Размер плитки, а высота — содержимым и настройкой Внутренний Отступ, — поэтому одно и то же изображение обрезается по-разному на плитке «Маленький» и на плитке «Во всю ширину».

Значок, заголовок и описание рисуются поверх изображения в цвете, заданном настройкой Цвет шрифта плитки.

Цвет под изображением

Цвет фона плитки не исчезает, когда задано изображение: он закрашивается под изображением и просвечивает, пока изображение загружается, через прозрачные области PNG и в случае, если изображение вообще не удалось загрузить. Выберите цвет, близкий к общему тону картинки, чтобы ещё загружающаяся плитка не вспыхивала другим цветом.

Сохранение читаемости текста

Текст поверх фотографии читается ровно настолько, насколько они контрастируют друг с другом. Помогут несколько привычек:

• выбирайте изображения со спокойной областью — небо, стена, вода, — где будет располагаться заголовок, или обрезайте изображение так, чтобы такая область оказалась в центре;
• используйте белый текст на тёмных картинках и чёрный текст на светлых и задавайте Цвет шрифта соответственно;
• включите Тень в настройках веб-части: тень под значком отделяет его от пёстрого фона;
• подумайте о том, чтобы скрыть заголовок у плиток с изображениями, которые говорят сами за себя, и поместить название в Описание, чтобы оно по-прежнему показывалось во всплывающей подсказке.

Эскиз YouTube

Когда ссылка плитки указывает на видео YouTube, в меню Цвет фона над пунктом Фоновое изображение появляется ещё один пункт: Эскиз. Он использует изображение предпросмотра видео в качестве фона, не сохраняя адрес изображения в плитке. На опубликованной странице плитка с эскизом показывает только кнопку воспроизведения; её название и описание остаются во всплывающей подсказке.

Требования к изображению

• Адрес должен использовать https:// или быть путём в текущем клиенте; у посетителей должен быть доступ на чтение к изображению.
• Держите файл разумно небольшим — фотографии с 1200 пикселями по длинной стороне, сохранённой в формате JPEG или WebP, достаточно для плитки «Во всю ширину», и она быстро загружается на каждой странице, где используется панель.
• Изображения с прозрачным фоном показывают цвет плитки через прозрачные области, что можно использовать для оформления в стиле водяного знака.

Удаление изображения

Либо выберите цвет в меню Цвет фона, либо снова откройте Фоновое изображение и нажмите Убрать изображение в диалоге. Плитка возвращается к своему цвету фона.

Подробнее о продукте: https://vitextra.com/ru/products/smart-tiles