Получить ширину рабочего стола в wordpress

Question

У меня есть веб-сайт, построенный на WP с ползунком на главной странице. Каждый слайд слайдера имеет путь к фоновому изображению, хранящемуся на сервере. Скажем, для slide1 это /images/slide1.jpg.

Я хочу заменить /images/slide1-wide.jpg для ширины рабочего стола> 1400px.

CSS не является вариантом, потому что путь к изображению динамически оценивается из базы данных.

Я добавил js, который проверяет ширину окна, но он действует ПОСЛЕ загрузки изображения. Таким образом, единственное, что я смог достичь, это рисовать исходное изображение, а затем перерисовывать его. С точки зрения пользователя это выглядит ужасно (плохое изображение -> мигать -> правильное изображение).

Я пробовал плагин 51degrees, но он способен обнаруживать мобильные устройства.

Как получить ширину окна на стороне сервера во время рисования главной страницы?

Answer 1

Я думаю, вы можете выбрать изображение с этим скриптом перед отображением вашего изображения. Таким образом, ваши пользователи не будут видеть «плохое изображение».

<script> 
$(function(){ 
width = $(window).width(); 
alert(width); 
if (width > 1400) { 
$('#divimg').html("<img src='/images/slide1-wide.jpg'>"); 
} 
else { 
$('#divimg').html("<img src='/images/slide1.jpg'>"); 
} 
}) 
</script> 
<div id="divimg"></div>