Главная » Для новичков » Сделать миниатюру записи во весь экран свойством cover

Сделать миниатюру записи во весь экран свойством cover

868 просмотров

Столкнулся с проблемой, необходимо было сделать в шаблоне single.php (в одиночной записи), вывод фотографии миниатюры во весь экран и прописать картинке свойство cover чтобы была адаптация при сжатии. Получить саму миниатюру очень просто стандартным вызовом

<?php echo get_the_post_thumbnail( $id, $size, $attr ); ?>

Но присвоить её свойство cover не получилось, так как картинка была прописана не через css

background-size: cover;

Поэтому в итоге получилось решение ситуации методом получении ссылки миниатюры поста и подстановкой этой ссылки в css
Пример:

<div style="
position: absolute;
width: 100%;
height: 640px;
background-size: cover;
background-position-y: 33%;
opacity: 0.8;
background-image: url(<?php echo get_the_post_thumbnail_url( $post_thumbnail_id, array(1900, 640) );?>); background-color: #000" class="photoBorder"></div>

где <?php echo get_the_post_thumbnail_url( $post_thumbnail_id, array(1900, 640) );?>   это получение ссылки поста.

Результат получился таким:
Сделать миниатюру записи во весь экран свойством cover

 

 

Читайте также:

wpcommerce указать после цены произвольное поле

Возникают ситуации ,когда необходимо указать в продолжении цены единицы измерения м2, м3, руб, шт и т.д Вставляем следующий код в functions.php // add_filter( 'woocommerce_get_price_html', 'custom_price_html', ...

Все методы laravel

_filterData () - вспомогательные функции Доступные методы https://laravel.com/docs/5.5/collections   avg() - среднее значение чисел chunk() - разбивает коллекцию на множество мелких коллекций заданного ...

Настройка репозитория

Создать репозиторий без файла read me echo "# bazar-tex.ru" >> README.md git init git add README.md git commit -m "first commit" git remote add origin git@github.com:SPITIRU/bazar-tex.ru.git git push ...
Показать еще