WordPress как на ладони

Как выводить другие изображения в посте в зависимости от размера экрана?

Добрый вечер. Натягивая верстку на WordPress столкнулся с проблемой.

Листинг 1.

<div class="blog-post__left">
	<?php if ( has_post_thumbnail()) { ?>
	<img class="blog-article__img_big" <?php the_post_thumbnail('image_size_big'); ?>
	<img class="blog-article__img_small" <?php the_post_thumbnail('image-size-small'); ?>
	<?php } ?>
</div>

Первый css стиль отрабатывает нормально, а вот когда уменьшаешь расширение экрана то размер изображения меняется на непонятно какой. Как сделать правильно? Очень прошу помощи.

Как сделать так чтобы при изменении размера экрана подгружалось изображение другого размера?

0
jaserds
3.6 лет назад
add_image_sizeadd_theme_support()cssget_the_post_thumbnail
  • 0
    kolshix779 paxtoy.com

    если через css :
    есть приблуда @media

    по-моему можно вот так 

    .blog-article__img_big{
		display: none;
}
.blog-article__img_small{
		display: block;
}
@media screen and (max-width: 1090px){  /* тут размер и правила срабатывания*/ 
	.blog-article__img_big{
		display: block;
	}
	.blog-article__img_small{
		display:none;
	}
}
    3.6 лет назад #
    anseme 3.5 лет назад

    Плохой пример, так на мобилках будет грузится 2 изображения... а если там таких изображений 20...

    Комментировать
  • 0
    anseme455

    Загрузкой правильного изображения занимается сам браузер (все современные)

    Но указать им эти изображения нужно через srcset вот так например:

    <img src="https://images.lucasfox.com/location/4x3_1600w/BE7EB6F914.jpg" sizes="(min-width:64em) 60vw, 100vw" 
 srcset="https://images.lucasfox.com/location/4x3_420w/BE7EB6F914.jpg 420w,
 https://images.lucasfox.com/location/4x3_560w/BE7EB6F914.jpg 560w,
 https://images.lucasfox.com/location/4x3_700w/BE7EB6F914.jpg 700w,
 https://images.lucasfox.com/location/4x3_960w/BE7EB6F914.jpg 960w,
 https://images.lucasfox.com/location/4x3_1280w/BE7EB6F914.jpg 1280w,
 https://images.lucasfox.com/location/4x3_1600w/BE7EB6F914.jpg 1600w"
 alt=" ">

    wp_get_attachment_image_srcset() вот так можно брать эти данные

    3.5 лет назад #
    Kama 3.5 лет назад

    Вот еще статья по теме: https://wp-kama.ru/id_13564/atributy-scrset-sizes.html

    Комментировать
На вопросы могут отвечать только зарегистрированные пользователи. Вход . Регистрация