Маленькие фото товаров для смартфонов и большие для ПК

  • 9 Ответов
  • 663 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

Sven

  • ***
  • 107
  • 1
В карточке товара есть только два вида фото: превьюшки и крупное изображение. Никакого Lightbox и зума нет, соответственно full_image остаются неиспользуемыми.

Как прописать условие для крупного изображения,
если монитор меньше 768px, то выводить: <?php print $image->image_name;?>
если монитор больше 768px, то выводить: <?php print $image->image_full;?>

Такое вообще возможно в PHP? Нужно это понятно чтобы мобильный траффик экономить людям и чтобы быстрее загружалось изображение на смартфонах.
« Последнее редактирование: 19.11.2015, 20:02:58 от Sven »

*

dmitry_stas

  • ********
  • 9615
  • 929
Такое вообще возможно в PHP?

нет. php - это серверная часть. для того, чтобы узнать разрешение экрана, нужно использовать JavaScript.
Тут дарят бакс просто за регистрацию! Успей получить!
Все советы на форуме раздаю бесплатно, то есть даром. Индивидуально бесплатно консультирую только по вопросам стоимости индивидуальных консультаций

*

Sven

  • ***
  • 107
  • 1
Нашел плагин, там в комментах решение готовое оказалось))

1. Скачиваем плагин Mobile detection plug-in for identification of mobile devices in Joomla!

2. В файле /templates/default/product/product_default.php прописываем условие

Код: php
<?php if(MobileDetector::isMobile() === true){?>
// Маленькое изображение для смартфонов
<?php } else { ?>
// Большое изображение для ПК
<?php }?>


*

dmitry_stas

  • ********
  • 9615
  • 929
разве определение мобильного устройства это одно и тоже что и определение разрешения экрана? если я зайду со своего full hd планшета, я буду видеть маленькие картинки?
Тут дарят бакс просто за регистрацию! Успей получить!
Все советы на форуме раздаю бесплатно, то есть даром. Индивидуально бесплатно консультирую только по вопросам стоимости индивидуальных консультаций

*

Sven

  • ***
  • 107
  • 1
Да, для планшетов будут маленькие картинки грузиться. Спасибо что заметили.

Правильный код:

Код: php
<?php if (MobileDetector::isTablet($userAgent = null, $httpHeaders = null) === true){?>
// Большое изображение для планшетов
<?php } else if (MobileDetector::isMobile() === true){?>
// Маленькое изображение для смартфонов
<?php } else { ?>
// Большое изображение для ПК
<?php }?>
« Последнее редактирование: 26.06.2015, 21:03:47 от Sven »

*

Sven

  • ***
  • 107
  • 1
Похоже предыдущее решение на PHP сильно будет сервер нагружать. Поэтому придумал другую идею. Вкратце суть такова:
Большое изображение в карточке товара делаем прозрачным png. Его размеры у каждого свои, те что в настройках JoomShopping указаны. Весить оно будет не больше 1кбит независимо от размера. Этому изображению даем фон из маленького thumb_.jpg, сервер всегда только его будет отдавать, и оно будет растягиваться по размеру прозрачного изображения благодаря свойству background-size: cover. На больших экранах это будет выглядеть как это обычно и бывает, сначала изображение мутное не резкое как будто не подгрузилось до конца, а потом в браузере скрипт заменит thumb_.jpg на full_.jpg и оно станет резким.

Что я уже сделал:

В файле /components/com_jshopping/templates/default/product/product_default.php
изменил вывод изображения:

<img class="img-responsive" id = "main_image_<?php print $image->image_id?>" src = "<?php print $this->image_product_path?>/prozrachnoe.png" alt="<?php print htmlspecialchars($image->_title)?>" title="<?php print htmlspecialchars($image->_title)?>"
style="background: url(<?php print $this->image_product_path?>/<?php print $image->image_thumb;?>) no-repeat; background-size: cover;"
/>

Потом в инете нашел код, который наверно можно взять за основу:

<?php
if (isset($_GET['width'])) {
    // выводим переменную с размером
    echo "Ширина экрана: ". $_GET['width'] ."\n";
} else {
    // передаем переменную с размером
    echo "<script language='javascript'>\n";
    echo "  location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}"
        . "&width=\" + screen.width;\n";
    echo "</script>\n";
    exit();
}
?>

Дальше нужна помощь специалистов. Надо в скрипте прописать условие, если ширина экрана больше 700px, то в style у свойства background в имени файла заменить суффикс  thumb_  на  full_
Учитывать нужно только разрешение экрана, размер окна браузера не надо. Такой скрипт вообще возможно написать в принципе? Представьте только как быстро будут грузиться сайты на смартфонах, если картинки будут весом в 30 кбит всего.

*

AlekVolsk

  • ********
  • 6301
  • 336
Почему-то забыли, что есть еще т.н. ретина, для которой картинку нужно даже большего размера, нежели для десктопа стандартных размеров, учитывайте плотность пикселей для мобильных. А вообще вот вам пруф по теме:

*

Sven

  • ***
  • 107
  • 1
Да, AlekVolsk, я в курсе про большую плотность пикселей на смартфонах. Но это я считаю не важно, в любом случае картинка на смартфоне будет такой же резкой как на ПК даже если ее растянуть до физических размеров в сантиметрах как на ПК - в этом случае на ПК будет 1 красный например пиксель, а на смартфоне в этом же месте будет 4 таких же красных пикселя, которые по физическому размеру в сумме будут соответствовать размеру одного пикселя на ПК. Поэтому смысла под ретину подстраиваться я не вижу, здесь куда важнее скорость загрузки сайта.

Ну а 700px в условии.. это по узкой части смартфона просто на вскидку написал, ее потом поменять конечно можно, на 720px например, это уже каждый сам для себя решит как ему лучше. Сейчас в скрипте загвоздка.

Отпишитесь кто-нить по самой схеме, как вам вообще сама идея с таким подходом? Может овчинка выделки не стоит, слишком сложно или в другом месте из-за этого какие-то проблемы могут вылезти?
« Последнее редактирование: 19.11.2015, 22:13:45 от Sven »

*

Sven

  • ***
  • 107
  • 1
« Последнее редактирование: 23.11.2015, 20:18:51 от Sven »

*

Sven

  • ***
  • 107
  • 1
Раз такая тишина, видимо все посчитали что это как-то не очень правильно выводить изображения фоном.
Ок, тогда пойдем путем, который предложил AlekVolsk, будем использовать тег <picture>. Скоро он станет стандартом, а пока внедрим его с помощью скрипта Picturefill

1. Подключаем скрипт в 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. Я не претендую, что все изложенное здесь непреложная истина. Вполне возможно я где-то заблуждаюсь или что-то неправильно понял. Я просто поделился своими соображениями и своим пониманием, потому что мне кажется тема довольно сложная для восприятия. Если кто-то что-то дополнит или наоборот опровергнет, это будет не лишним.