Поддержка → Проблемы и решения → Отображение разных изображений в зависимости от устройства

Отображение разных изображений в зависимости от устройства

  • Решено ffranss

    (@ffranss)


    4 года, 11 месяцев назад

    Добрый день.
    Помогите, пожалуйста, решить проблему. Мне необходимо отображать на экранах с width>640 image.1, на экранах с width<640 image2.jpg(изображения будут отличаться не только разрешением, но и содержанием).

    Пробовал через js. Не смог написать правильную функцию…:(

    Также думал изменить построение srcset у изображения(стандартно получается так: http://froggishop.ru/wp-content/uploads/2019/05/Logo_food1.jpg 1024w, http://froggishop.ru/wp-content/uploads/2019/05/Logo_food1-300×172.jpg 300w, http://froggishop.ru/wp-content/uploads/2019/05/Logo_food1-768×441.jpg 768w;
    а мне нужно поменять значение ширины окна на свои), но не пойму в каком файле оно генерируется и можно ли так делать?

    Буду рад любой помощи и напутствию. Заранее спасибо

    Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]

Просмотр 9 ответов — с 1 по 9 (всего 9)
  • tuxfighter

    (@tuxfighter)

    4 года, 11 месяцев назад

    Вы можете внятно объяснить, что должно получиться в итоге?

    Автор ffranss

    (@ffranss)

    4 года, 11 месяцев назад

    На планшетах и десктопах отображать image.jpg
    на мобильных image_min.jpg

    tuxfighter

    (@tuxfighter)

    4 года, 11 месяцев назад

    Ок, не хотите говорить, не надо.
    https://sampleweb.ru/info/usloviya-css/

    Автор ffranss

    (@ffranss)

    4 года, 11 месяцев назад

    Интересно,обязательно воспользуюсь, но не совсем то, что я спрашивал.
    Мне нужно сгенерировать тег примерно следующего вида:
    Logo_Karaoke
    Logo_karaoke — имя картинки отображающейся при ширине экрана больше чем 640px.
    Logo_karaoke_min.jpg — имя картинки отображающейся при ширине экрана до 640px
    Может так понятнее?

    Автор ffranss

    (@ffranss)

    4 года, 11 месяцев назад

    *
    Мне нужно сгенерировать тег примерно следующего вида:

    img src="http://froggishop.ru/wp-content/uploads/2019/05/Logo_karaoke -1024x588.jpg" alt="Logo_food" class="wp-image-61" srcset="http://froggishop.ru/wp-content/uploads/2019/05/Logo_karaoke .jpg 1024w, http://froggishop.ru/wp-content/uploads/2019/05/Logo_karaoke _min.jpg 640w, 
sizes="(max-width: 1024px) 100vw, 1024px"
    • Ответ изменён 4 года, 11 месяцев назад пользователем Denis Yanchevskiy. Причина: оформление кода
    tuxfighter

    (@tuxfighter)

    4 года, 11 месяцев назад

    но не совсем то, что я спрашивал.

    так и вы на мой вопрос не ответили.

    Может так понятнее?

    Нет.
    Пример:
    У вас стоит проблема добраться из пункта А в пункт Б.
    Вы для себя решили что это можно сделать ползком на корачках.
    Сейчас здесь спрашиваете, какие лучше подобрать щитки на колени и перчатки.

    Я вам задал вопрос об вашей общей проблеме, а не о пути который вы определили как правильный.
    Если вы ее озвучите, возможно вам посоветуют использовать велосипед или автомобиль, а может быть и самолет.

    qwert555

    (@qwert555)

    4 года, 11 месяцев назад

    Пробовал через js. Не смог написать правильную функцию…:(

    Попробуйте эту функцию.
    Как заменить на картинку сами сообразите, раз уж пытались функцию написать.
    Также про библиотеку jquery не забывайте.

    <script type="text/javascript">
jQuery(function($){
if (matchMedia) {
const mq = window.matchMedia("(min-width: 900px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
function WidthChange(mq) {
if (mq.matches) {
	
$('.result').html('111'); 

} else {
	
$('.result').html('222'); 

}
}
});
</script>

<div class="result">111</div>
    Модератор Denis Yanchevskiy

    (@denisco)

    WordPress-разработчик, denisco.pro

    4 года, 11 месяцев назад

    Добрый.

    а мне нужно поменять значение ширины окна на свои), но не пойму в каком файле оно генерируется и можно ли так делать?

    В общем случае, должен подойти фильтр wp_get_attachment_image_attributes.

    Если именно srcset, то, вероятно, стоит попробовать фильтры в wp_calculate_image_srcset.

    Ещё можно почитать вот эту заметку в официальном блоге.

    Автор ffranss

    (@ffranss)

    4 года, 11 месяцев назад

    Благодарю всех за помощь. Выбрал вариант qwert555, все работает.Спасибо!

Просмотр 9 ответов — с 1 по 9 (всего 9)
  • Тема «Отображение разных изображений в зависимости от устройства» закрыта для новых ответов.

Просмотр