Есть вывод полей через acf в слайд, как сделать разный вывод изображений от размера экрана?

Question

[rrommka_dp]

Есть вывод изображений в сайд

<?php $top_sliders = get_field('home_slider');
                $count = 0;
                foreach ($top_sliders as $top_slider) {
                    $count++
                ?>
                    <div class="u-slider-item"
                             style="background-image: url(<?php echo $top_slider['background'] ?>)"
                             data-bg="<?php echo $top_slider['background'] ?>" style="opacity: 0;">
                        <div class="container">
                            // content
                        </div>
                    </div>
                <?php }
                ?>

Есть основное поля для вывода картинок background "<?php echo $top_slider['background'] ?>" его нужно заменить на вывод картинок для мобильной версии <?php echo $top_slider['fonove_foto_mob'] ?>



Как это можно реализовать?

Answer 1

[Артем Золин]

php ничего не знает о размере экрана пользователя, но вы можете использовать функцию wp_is_mobile(), которая проверяет переменную $_SERVER['HTTP_USER_AGENT']. Она не всегда работает, есть фильтр через который ее можно расширить, добавив дополнительные проверки отсюда detectmobilebrowsers.com

Так же вы можете добавить ссылки на оба изображения в дата-атрибуты и проверяя ширину экрана пользователя js-скриптом подставлять нужное значение в style

Comments

[rrommka_dp]

Не подскажите как проверку через jsсделать?

[Артем Золин]

rrommka_dp, например

$(window).resize(function() {
	if ( $(window).width() < 960 ) {
		alert('Less than 960');
	} else {
		alert('More than 960');
	}
});

[rrommka_dp]

Пробовал так сделать - первая фотография подставляется - а это слайд и другие не грузятся