Раз такая тишина, видимо все посчитали что это как-то не очень правильно выводить изображения фоном.
Ок, тогда пойдем путем, который предложил AlekVolsk, будем использовать тег <picture>. Скоро он станет стандартом, а пока внедрим его с помощью скрипта
Picturefill1. Подключаем скрипт в head в таком порядке:
<script> document.createElement( "picture" );</script>
<script src="<?php print JURI::root(); ?>templates/<?php echo $this->template ?>/js/picturefill.min.js" async></script>
2. В /components/com_jshopping/templates/default/product/product_default.php вместо:
<a class="lightbox" id="main_image_full_<?php print $image->image_id?>" href="<?php print $this->image_product_path?>/<?php print $image->image_full;?>" <?php if ($k!=0){?>style="display:none"<?php }?> title="<?php print htmlspecialchars($image->_title)?>">
<img id = "main_image_<?php print $image->image_id?>" src = "<?php print $this->image_product_path?>/<?php print $image->image_name;?>" alt="<?php print htmlspecialchars($image->_title)?>" title="<?php print htmlspecialchars($image->_title)?>" />
<div class="text_zoom">
<img src="<?php print $this->path_to_image?>search.png" alt="zoom" />
<?php print _JSHOP_ZOOM_IMAGE?>
</div>
</a>
Вставляем:
<span class="lightbox" id="main_image_full_<?php print $image->image_id?>" <?php if ($k!=0){?>style="display:none"<?php }?> >
<picture>
<source srcset="<?php print $this->image_product_path?>/<?php print $image->image_full;?>" media="(min-width: 72rem)" >
<source srcset="<?php print $this->image_product_path?>/<?php print $image->image_name;?> 0.5x" media="(min-width: 45rem)" >
<img class="img-responsive" id = "main_image_<?php print $image->image_id?>" srcset="<?php print $this->image_product_path?>/<?php print $image->image_thumb;?> 0.5x" alt="<?php print htmlspecialchars($image->_title)?>" title="<?php print htmlspecialchars($image->_title)?>" >
</picture>
</span>
Все, теперь пользователи заходящие к вам на смартфонах через 3G, скажут спасибо за сэкономленный трафик и скорость загрузки сайта.
* Пояснения:
- Это нужно для тех кто верстает респонсивный сайт. В этом случае вам не нужен Lightbox и это освобождает дополнительное изображение для брекпоинтов @media. Всего у вас получается 3 размера изображения для главной картинки в карточке товара: image_thumb - для смартфонов, image_name - для планшетов, image_full - для ПК.
- Если у вас товар не требует больших картинок, например пуговицы какие-нибудь, то вам это решение не нужно, просто делайте одну маленькую картинку для всех мониторов.
- Не знаю, или я чего-то не догоняю, или тот чувак на видео. Мне кажется у нас с ним разное понимание для чего все это нужно. Он предлагает для ретин отсылать изображения даже с еще большим разрешением чем для ПК. Я же считаю более важным экономию 3G трафика пользователей и более быструю загрузку сайта, поэтому вместо повышающего коэффициента как у него, я поставил наоборот понижающий 0.5x, он как бы обманывает браузер, из 4k монитора делает обычный, изображение растягивается до физических размеров как оно на обычном ПК выглядит с той же резкостью. Например, у вас изображение 1000px. На ПК его физический размер если измерить линейкой 20см, а вот на планшете это же изображение получается 10 см из-за большей плотности пикселей, у вас может поехать верстка, справа останется пустое место, поэтому я и задал понижающий коэффициент 0.5x. Кстати, именно поэтому я ранее и предлагал изображение фоном ставить, чтобы оно всегда растягивалось на любых мониторах на всю ширину блока.
- Брекпоинты указаны в rem чтобы игнорировать ретину, отсылать ей изображения исходя из обычной плотности экрана ПК. Например 45rem, для ПК это 720px, а для 4k это 1440px. В пикселях разные цифры, их никак не пропишешь одновременно, а в rem одна цифра для всех. Чтобы узнать свой rem, размеры изображений которые у вас в настройках JoomShopping указаны просто делите на 16.
- class="img-responsive" бутстраповский.
P.S. Я не претендую, что все изложенное здесь непреложная истина. Вполне возможно я где-то заблуждаюсь или что-то неправильно понял. Я просто поделился своими соображениями и своим пониманием, потому что мне кажется тема довольно сложная для восприятия. Если кто-то что-то дополнит или наоборот опровергнет, это будет не лишним.
12.04.2024, 21:20:02