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

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

HIT

10.12.2015

4452

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; ?>

Тэги: ,

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Pixel Grid

Pixel Grid

Pixel Grid (пиксельная сетка) применяется для придания текстуры фону или изображению. Служит для затемнения или осветления основы. К необходимому объекту, например <div> с классом .photo в CSS делаем такие свойства .w-grid Читать далее »

Миниатюры меток

Миниатюры меток

Произвольными полями делаем поле «миниатюра (изображение)» в метках. Там где надо вывести миниатюру ставим <?php // номер метки $tag_id = get_query_var( 'tag_id' ); // данные о текущей категории $tag = Читать далее »

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

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

Deprecated: Function create_function() is deprecated in /home/t/tiberi6w/opttour.ru/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 2033

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

/

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

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

  1. Александр
    Александр

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

  2. Аватар
    Александр

    dfgdfgdgdfgdfg dfg dg df dgffgrtterteececert

  3. Аватар
    Софья

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

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