Как добавить 2 картинки в post для разных экранов?

Question

[Сергей Явин]

Натягиваю верстку на wp. Ниже отрывок из кода.

<div class="blog-post__left">
                        <img class="blog-article__img_big" src="img/blog-page-img-2.jpg" alt="Cybersecurity today">
                        <img class="blog-article__img_small" src="img/blog-page-img-2-small.jpg" alt="Cybersecurity today">
                    </div>

Для отображния картинок из медиа я сделал следующее.

<div class="blog-block__left">
                       <?php if ( has_post_thumbnail()) { ?>
                        <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                            <img class="blog__img_big" <?php the_post_thumbnail(); ?>
                        </a>
                        <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                            <img class="blog__img_small" <?php the_post_thumbnail(); ?>
                        </a>
                        <?php } ?>
                    </div>

Как видно из примера в чистом html грузятся 2 картинки разыных размеров. А как быть с WP?

Comments

[Ankhena]

Для показа разных картинок на разных разрешениях и даже разных dpi есть тег picture

Answer 1

[Алексей Сычёв]

Если вёрстка завязана на классах, то примерно так:

<div class="blog-post__left">
<?php if ( has_post_thumbnail()) { ?>
    <?php the_post_thumbnail('full', array(
    	'class' => 'blog__img_big',
    	'alt' => get_the_title(),
    )); ?>
    <?php the_post_thumbnail('medium', array(
    	'class' => 'blog__img_small',
    	'alt' => get_the_title(),
    )); ?>
<?php } else { ?>
    <?php the_post_thumbnail('full', array(
    	'src' => get_template_directory() . '/images/no-image.jpg',
    	'class' => 'blog__img_big',
    	'alt' => get_the_title(),
    )); ?>
    <?php the_post_thumbnail('medium', array(
    	'src' => get_template_directory() . '/images/no-image-small.jpg',
    	'class' => 'blog__img_small',
    	'alt' => get_the_title(),
    )); ?>
<?php } ?>
</div>

То что в else можно и статикой задать, так же как в вёрстке. Это если нет картинки.

Answer 2

[Elvin_Fich]

через стили
для мобильных экранов:

@media screen and (max-device-width:480px){
    .name_class {
        background-image: url(/images/no-image-small.jpg);
    }

для пк:

@media screen and (min-device-width:481px){
    .name_class {
        background-image: url(/images/no-image.jpg);
    }