sjaserds
@sjaserds
Студент

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

Натягиваю верстку на 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?
  • Вопрос задан
  • 78 просмотров
Решения вопроса 1
AlekseySychev
@AlekseySychev
Программирую в небольшой веб-студии.
Если вёрстка завязана на классах, то примерно так:
<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 можно и статикой задать, так же как в вёрстке. Это если нет картинки.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@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);
    }
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы