Сайты на заказ > Сайтостроение > Рекомендации по применению Hero Images в Oxygen Builder

Рекомендации по применению Hero Images в Oxygen Builder

В этом учебном пособии представлены шаги по настройке избранного изображения - featured image (элемент img), чтобы оно отображалось в качестве фона главного раздела - hero section с заголовком и заголовком сообщения, а также информацией, наложенной (overlayed) на отдельные сообщения в Oxygen.

Рекомендации по применению Hero Images в Oxygen Builder

Видео на Rutube

Этот учебник также можно применять к отдельным страницам любого типа, а не только к сообщениям.

Шаг 1

Давайте зарегистрируем пользовательский размер изображения для рекомендуемых изображений, используя функцию add_image_size в WordPress.

Если вы хотите, чтобы изображения имели определенное соотношение сторон ширины к высоте, укажите значение высоты в add_image_size следующим образом:

 

add_image_size( 'hero-1600', 1600, 834, true );

Мы не используем файл function.php в шаблоне Вордпресс (тем более, Oxygen Builder отключает шаблон), а добавляем хуки через плагин Code Snippets.

С учетом этого вывод HTML, the_post_thumbnail( 'hero-1600' ) который мы собираемся использовать на следующем шаге, будет выглядеть примерно так:

<img width="1600" height="834" src="https://site.ru/wp-content/uploads/2021/09/kote-puerto-so5nsYDOdxw-unsplash-1600x834.jpg" class="attachment-hero-1600 size-hero-1600 wp-post-image" alt="Рекомендации по применению Hero Images в Oxygen Builder" loading="lazy">

Если вы хотите, чтобы рекомендуемые изображения сохраняли соотношение сторон, укажите 0 для значения высоты следующим образом:

add_image_size( 'hero-1600', 1600, 0, true );

С учетом этого вывод HTML, который мы собираемся использовать на следующем шаге, будет выглядеть примерно так: the_post_thumbnail( 'hero-1600' )

 

<img width="1600" height="1173" src="https://site.ru/wp-content/uploads/2021/09/kote-puerto-so5nsYDOdxw-unsplash-1600x1173.jpg" class="attachment-hero-1600 size-hero-1600 wp-post-image" alt="Рекомендации по применению Hero Images в Oxygen Builder" loading="lazy" srcset="https://oxygen.local/wp-content/uploads/2021/09/kote-puerto-so5nsYDOdxw-unsplash-1600x1173.jpg 1600w, https://oxygen.local/wp-content/uploads/2021/09/kote-puerto-so5nsYDOdxw-unsplash-scaled.jpg 2560w" sizes="(max-width: 1600px) 100vw, 1600px">

Примечание. Размеры избранного изображения для конкретного сообщения, используемого на моем тестовом сайте в качестве эталона для этого руководства, составляют 2560 на 1877 пикселей.

Шаг 2

Если к вашим сообщениям уже прикреплены избранные изображения до регистрации нашего нестандартного размера изображения, повторно создайте эскизы (плагином вроде Regenerate Thumbnails).

Шаг 3

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

Шаг 4

Отредактируйте шаблон Catch All на основном сайте с помощью Oxygen и настройте заголовок с нужными элементами. Как правило, это заголовок/логотип сайта слева, ведущий на главную страницу сайта, и меню навигации справа. Поскольку мы собираемся добавить темный градиент поверх изображения, вы можете установить для них белый цвет/обводку.

Вы можете выбрать параметр «Наложение - Overlay» здесь или в шаблоне отдельного сообщения.

Шаг 5

(Создайте, если нет, и) Отредактируйте шаблон, который применяется к отдельным сообщениям с помощью Oxygen.

Добавьте раздел - Section.

Установите отступ на 0 на всех 4 сторонах.

Установите ширину на полную - full.

Установите относительное положение - relative.

Добавьте блок кода (Code Block) внутри раздела с этим кодом:

<?php the_post_thumbnail( 'hero-1600' ); ?>

Установите ширину на 100% (width to 100%).

Установите дисплей на гибкий (flex).

Щелкните состояние (state), а затем :after.

Установите ширину и высоту на 100% для каждого.

Установите абсолютное положение (position to absolute).

Добавьте следующий градиент на фон (Background):

rgba(0,0,0,0.5) при 0%
transparent на 50%
rgba(0,0,0,0.5) на 100%

Добавьте Div ниже (не под) блок кода.

Рекомендации по применению Hero Images в Oxygen Builder

Установите ширину -width на 100%.

Установите абсолютное положение (position to absolute), скажем, 60 пикселей снизу.

Добавьте Div внутри этого Div.

Установите левый и правый отступы (padding) по 20 пикселей каждый.

Установите ширину (width) на 100%.

Установите максимальную ширину 1120 пикселей (или любую ширину вашей страницы в глобальных настройках Oxygen).

Установите левое и правое поля (left and right margins) на авто.

+ Добавьте → WordPress → Динамические данные (Dynamic Data) → Заголовок (Title).

+ Добавьте → WordPress → Динамические данные → Дата (Date).

Добавьте любую другую дополнительную мета-публикацию (post meta), которую вы хотите показать здесь.

Шаг 6

Добавьте следующее в таблицу стилей в разделе Управление (Stylesheet at Manage) > Таблицы стилей (Stylesheets):

img {
	vertical-align: top;
	height: auto;
	max-width: 100%;
}

.size-hero-1600 {
	object-fit: cover;
	flex: 1;
}

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Copyright © 2021, GuruSite24. Копирование материалов сайта запрещено.
menu-circlecross-circle