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

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

HIT

10.12.2015

5646

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 Читать далее »

Несколько миниатюр записи

Несколько миниатюр записи

В некоторых случаях необходимо, чтобы у записи было несколько миниатюр. Например, если запись это товар с несколькими изображениями. Добавим эту возможность при редактировании записи. Плагин Multiple Featured Images После установки Читать далее »

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

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

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

/

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

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

  1. Александр

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

  2. Александр

    dfgdfgdgdfgdfg dfg dg df dgffgrtterteececert

  3. Софья

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

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