/ Дизайн / Миниатюра — фон сайта

Миниатюра — фон сайта

HIT

10.12.2015

6472

3

Мы можем использовать миниатюру записи для самых разных целей. В данной статье рассмотрим вариант использовать миниатюру в виде фонового изображения сайта.

Вывод миниатюры в виде фона

В цикл вывода миниатюры добавляем <style> стиль фона body. В примере ниже прописан также .bg с прозрачным фоном, т.к. на сайте функционирует parallax’ный фон.

<?php if( has_post_thumbnail() ) : ?>

<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'has_post_thumbnail' );
$url = $thumb['0']; ?>

<div style="overflow: hidden;"><div id="post-div-pic" style="background-image: url(<?=$url?>);"></div></div><style>
body {background-image: url('') !important; background-size: cover;}
.bg {background-image: url('/images/transparant.png') !important;"}
</style>

<?php else : ?>
<div style="overflow: hidden;"><div id="post-div-pic" style="background-image: url(<?php bloginfo('template_url'); ?>/images/img-default-full.jpg");"></div></div>
<?php endif; ?>
Можно style вставлять и ниже цикла, но важно чтоб был сам цикл вывода миниатюры
Если миниатюра не будет задана — то фон будет белым

Чекбокс включения фона из миниатюры

Надо создать в произвольных полях тип поля истина/ложь, и в зависимости от того ставим мы галку или нет фон будет выводиться/не выводиться. thumb-background — идентификатор поля. Конструкцию желательно вставить после функционала вывода миниатюры.

<?php if( get_field('thumb-background') ) : ?>

<style>
body {background-image: url('<?php echo $url ?>') !important; background-size: cover;}
.bg {background-image: url('<?php echo bloginfo('template_url'); ?>/images/transparant.png') !important;"}
</style>

<?php else : ?>

<?php endif; ?>

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Галерея изображений в виде карусели

Галерея изображений в виде карусели

Нужно переделать стандартное представление галереи изображений в карточке товара. Сделаем данный функционал более похожим на привычный в виде карусели. Для этого подключаем функционал карусели slick, и создать скрипт инициализации Рекомендуемые Читать далее »

/
Адаптивные изображения (атрибут srcset)

Адаптивные изображения (атрибут srcset)

Давно интересовал вопрос адаптивности изображений с помощью атрибута srcset. Как это работает и как правильно настроить. Пришло время это выяснить. Теория srcset В атрибуте srcset выводятся все варианты миниатюры и Читать далее »

Выравнивание миниатюр товаров

Выравнивание миниатюр товаров

Идеальная ситуация, когда мы загружаем изображения для товаров (хотя бы для главного изображения) квадратными. т.е. заранее подготовленными, откадрированными. Но бывают случаи, когда на сайт начинают заливаться изображения разных пропорций. Сделаем Читать далее »

/

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

3 комментария

  1. Александр

    Комментарий тестовый

  2. Александр

    dfgdfgdgdfgdfg dfg dg df dgffgrtterteececert

  3. Софья

    Проверка формы комментария

Миниатюра — фон сайта
Плагины для woocommerce (нюансы)
Рекомендации для васПлагины для woocommerce (нюансы)Opttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.