Форум русской поддержки Joomla!® CMS
04.12.2016, 16:17:14 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

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

 (Прочитано 487 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Sven
Осваиваюсь на форуме
***

Репутация: +6/-5
Offline Offline

Сообщений: 119


« : 26.06.2015, 13:46:02 »

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

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

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

Репутация: +795/-4
Offline Offline

Сообщений: 7740



« Ответ #1 : 26.06.2015, 14:18:10 »

Такое вообще возможно в PHP?

нет. php - это серверная часть. для того, чтобы узнать разрешение экрана, нужно использовать JavaScript.
Записан
Sven
Осваиваюсь на форуме
***

Репутация: +6/-5
Offline Offline

Сообщений: 119


« Ответ #2 : 26.06.2015, 16:26:56 »

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

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

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

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

Записан
dmitry_stas
Профи
********

Репутация: +795/-4
Offline Offline

Сообщений: 7740



« Ответ #3 : 26.06.2015, 16:54:46 »

разве определение мобильного устройства это одно и тоже что и определение разрешения экрана? если я зайду со своего full hd планшета, я буду видеть маленькие картинки?
Записан
Sven
Осваиваюсь на форуме
***

Репутация: +6/-5
Offline Offline

Сообщений: 119


« Ответ #4 : 26.06.2015, 17:58:45 »

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

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

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

Репутация: +6/-5
Offline Offline

Сообщений: 119


« Ответ #5 : 19.11.2015, 19:01:16 »

Похоже предыдущее решение на 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
Профи
********

Репутация: +316/-3
Offline Offline

Пол: Мужской
Сообщений: 6452



« Ответ #6 : 19.11.2015, 19:07:49 »

Почему-то забыли, что есть еще т.н. ретина, для которой картинку нужно даже большего размера, нежели для десктопа стандартных размеров, учитывайте плотность пикселей для мобильных. А вообще вот вам пруф по теме: http://youtu.be/Szo-2D7TtEU
Записан
Sven
Осваиваюсь на форуме
***

Репутация: +6/-5
Offline Offline

Сообщений: 119


« Ответ #7 : 19.11.2015, 19:15:24 »

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

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

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

Репутация: +6/-5
Offline Offline

Сообщений: 119


« Ответ #8 : 20.11.2015, 20:17:02 »

del
« Последнее редактирование: 23.11.2015, 19:18:51 от Sven » Записан
Sven
Осваиваюсь на форуме
***

Репутация: +6/-5
Offline Offline

Сообщений: 119


« Ответ #9 : 23.11.2015, 19:18:22 »

Раз такая тишина, видимо все посчитали что это как-то не очень правильно выводить изображения фоном.
Ок, тогда пойдем путем, который предложил 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. Я не претендую, что все изложенное здесь непреложная истина. Вполне возможно я где-то заблуждаюсь или что-то неправильно понял. Я просто поделился своими соображениями и своим пониманием, потому что мне кажется тема довольно сложная для восприятия. Если кто-то что-то дополнит или наоборот опровергнет, это будет не лишним.
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet