В этом учебном пособии представлены шаги по настройке избранного изображения - featured image (элемент img), чтобы оно отображалось в качестве фона главного раздела - hero section с заголовком и заголовком сообщения, а также информацией, наложенной (overlayed) на отдельные сообщения в Oxygen.
Этот учебник также можно применять к отдельным страницам любого типа, а не только к сообщениям.
Шаг 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 ниже (не под) блок кода.
Установите ширину -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;
}