Как сделать аналог медиа запросов в Wordpress?

Question

[Владислав]

Да, я в курсе, что никак. Но как-то нужно было кратко сформулировать вопрос.

Ситуация следующая:
На главной странице сайта, есть слайдер, реализованный с помощью slick slider

Картинки в него выводятся циклом из ACF:

<?php if (have_rows('slider', 59)) {
    while (have_rows('slider', 59)) {
        the_row(); ?>
        <img src="<?php the_sub_field('slider-image'); ?>" alt="Изображение слайдера">
<?php } } ?>

Можно ли как-то в данной ситуации сделать так, чтобы на смартфонах, грузились изображения меньшего размера вместо полноразмерных с шириной более 1000 px?

Comments

[Refguser]

Всё "как". См wp_get_attachment_image_srcset и другие подобные функции.

Answer 1

[KingAnton]

Для этого существует srcset, wp сам генерирует размеры фото с этим атрибутом. В ACF сделайте вывод картинки не ссылкой, а ID и выводите картинку для слайдера через функцию wp

<?php if (have_rows('slider', 59)) : while (have_rows('slider', 59)) : the_row(); ?>
    <?php echo wp_get_attachment_image(get_sub_field('slider-image'), 'large', false, array("loading" => "lazy")); ?>
<?php endwhile; endif; ?>

Comments

[Владислав]

Я думал об этом способе, но проблема в том, что я вручную отключил автоматически генерируемые размеры картинок в WP, и так выходит, что кроме этого слайдера мне это нигде и не нужно. Но спасибо

Answer 2

[Михаил Р.]

Можно через тег picture, браузером будут подгружены лишь те изображения, которые удовлетворяют условию, либо дефолтное изображение:

<?php if(have_rows('slider', 59)): ?>
    <div class="slider">
        <?php while(have_rows('slider', 59)): the_row();
            $images = get_sub_field('slider-image'); // slider images

            if(!empty($image)):
                $large = $images['sizes']['large'];
                $medium = $images['sizes']['medium'];
                $regular = $images['regular'] ? $images['regular'] : '';
                ?>
            
                <picture>
                    <source
                        media="(max-width: 799px)"
                        srcset="<?php echo esc_url($medium);
                    ?>"/>

                    <source
                        media="(min-width: 800px)"
                        srcset="<?php echo esc_url($large);
                    ?>"/>

                    <img
                        src="<?php echo esc_url($large); ?>"
                        alt="<?php echo esc_attr($regular);
                    ?>"/>
                </picture>
            
            <?php endif; endwhile; ?>
    </div>
<?php endif; ?>

Да, я в курсе, что никак.

Что значит никак? В теге source имеется атрибут media с аналогичным поведением и параметрами css директиве media.