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

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

HIT

10.12.2015

4680

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

Тэги: ,

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

  • Похожие записи
  • Комментарии
  • Вложения
Выравнивание миниатюр товаров

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

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

/
Атрибуты миниатюры

Атрибуты миниатюры

У миниатюры (thumbnail) есть служебная функция назначения атрибутов. Манипулируя атрибутами можно добиться интересных результатов. Фильтр wp_get_attachment_image_attributes распространяется на миниатюры, а также на вложенные изображения wp_get_attachment_image($image->ID, ‘rectangle’). Как сделать отложенную загрузку Читать далее »

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

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

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

/

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

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

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

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

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

    dfgdfgdgdfgdfg dfg dg df dgffgrtterteececert

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

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

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