Вывод изображения на карточке товара зависящее от разрешения экрана

[sadar4ik]

Для каждого товара в админке задается 2 изображения, ОСНОВНОЕ( для карточки товара) и ДОПОЛНИТЕЛЬНОЕ (для вывода в категории)

Как сделать что бы в карточке товара для мобильной версии выводилось ДОПОЛНИТЕЛЬНОЕ изображение а для десктопа - осталось ОСНОВНЫМ

 

 

 

 

 

Читал о таком варианте, не уверен что корректно

При таком варианте:

<img class="big" src="catalog/view/theme/default/image/big.png" alt="" />
<img class="small" src="catalog/view/theme/default/image/small.png" alt="" />

а в стилях:
img.big {
    display: block;
}
img.small {
    display: none;
}
@media (max-width: 640px) {
img.big {
    display: none;
}
img.small {
    display: block;
}
}

 

 

[Prooksius]

это лет эдак 10 назад делали.
Сейчас можно посмотреть в сторону <picture>

Или, как вариант, srcset.

 

Первый вариант сложнее, может быть избыточный для вашего случая, но гораздо мощнее.

[niger]

А лучше не загружать лишних картинок

И mobile_detectом передавать прям в эту картинку -

if is_mobile $data['image'] = 'mobile.jpg' else $data['image'] = 'desktop.jpg'

 

[chukcha]

1 час назад, niger сказал:

А лучше не загружать лишних картинок

А srcset ничего не грузит
браузер самостоятельно выбирает картинку под свое разрешение

[Prooksius]

И к тому же все-таки лучше иметь именно адаптивность, приспособляемость к разным размерам окна, это более современно.
Раньше, помните, в php прописывали разные css в зав. от разрешения. Устаревший подход.
А сейчас телефоны такие лопаты, что перевернул - и почти десктоп уже )))

[Prooksius]

Я как-то даже заморочился с написанием такого плагинчика - редактора srcset-ов для ckeditor-а в админке. Чтобы в описание товара или в текст статьи вставлять адаптивные картинки в виде <picture>