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

Bozhkov2

  • Захожу иногда
  • 427
  • 12 / 0
Драсте. Задача выводить в шаблоне магазина разные изображения для разных устройств (для мобильных thumb, для desktop-ов - full). В инете есть решения для проверки устройства, но я нашел только старые статьи с громоздкими скриптами. Время то идет, может появились встроенные решения для Joomla или есть какой то коротенький код php?
*

Bozhkov2

  • Захожу иногда
  • 427
  • 12 / 0
Спасибо. Из вашей ссылки я понял, что в Joomla это есть. :) Только как это применить в шаблоне JS  я не понимаю. Можно подробнее? Как подключить эту функцию к файлу шаблона и как запрашивать проверку для if?
« Последнее редактирование: 19.11.2019, 18:50:07 от Bozhkov2 »
*

ProtectYourSite

  • Живу я здесь
  • 2356
  • 135 / 4
  • Безопасность вебсайтов
К примеру, как здесь,https://joomlaforum.ru/index.php/topic,295678.0.html
*

dmitry_stas

  • Легенда
  • 13151
  • 1234 / 8
Тут дарят бакс просто за регистрацию! Успей получить!
Все советы на форуме раздаю бесплатно, то есть даром. Индивидуально бесплатно консультирую только по вопросам стоимости индивидуальных консультаций
*

Bozhkov2

  • Захожу иногда
  • 427
  • 12 / 0
*

Bozhkov2

  • Захожу иногда
  • 427
  • 12 / 0
К примеру, как здесь,https://joomlaforum.ru/index.php/topic,295678.0.html
Спасибо, буду пробовать!
*

Bozhkov2

  • Захожу иногда
  • 427
  • 12 / 0
https://developer.mozilla.org/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
Не дочитал до конца... Извиняюсь. Да, это то, но... Я пробовал это метод, и мне показалось, что браузер определяет реальное разрешение экрана, а не view-port, а разрешение многих мобильных больше десктопов, поэтому на мобильном грузится самое большое фото.
Попробую еще раз завести этот инструмент от UiKit 3.
PS я пока реализовал это через CSS. Картинка выводится как фон. В шаблоне 2 блока, один скрыт, в зависимости от разрешения экрана, поэтому второе фото не грузится, а только то, что нужно. Как вам такое решение? Есть в нем минусы? или так и оставить?
*

Bozhkov2

  • Захожу иногда
  • 427
  • 12 / 0
Использовать в слайдшоу скрытые картинки не хочится, хочу добить всё-таки этот srcset... Но не работает. Что я делаю не так?

Код
<div class="uk-background-cover uk-transition-opaque uk-transition-scale-up image_block"
data-src="<?php print $this->image_product_path?>/<?php print $image->image_full;?>"
      data-srcset="<?php print $this->image_product_path?>/<?php print $image->image_name;?> 320w,
                      <?php print $this->image_product_path?>/<?php print $image->image_full;?> 800w"
data-sizes="(max-width: 650px) 300px" uk-img>

<img class="uk-invisible" data-src="" width="1200" height="900" alt="background" uk-img />
</div>
Вот документация по data-srcset https://3uikit.ru/image#-with-srcset
Я не совсем понимаю, нюансы. Написано, для srcset нужно указывать реальную ширину изображения в пикселях, а если я не могу это сделать? Если у превьюшек она отличаются? Я могу указать среднее значение? Это не вызовет сбой?
Как работает  size и это обязательный параметр? Я так понял, это какую ширину имеет место под изображение при определенной ширине окна? У меня она адаптивная? что указывать?
И если не указать size, браузер будет сравнивать ширину окна или размер экрана с шириной изображений?
*

Bozhkov2

  • Захожу иногда
  • 427
  • 12 / 0
Я не понимаю, у меня на сайте не работает вообще ни как. Я уже просто картинку вставляю, без всяких data- и  и фонов
Код
<img src="https://kievdah.com.ua/test/components/com_jshopping/files/img_products/full_maxima-350-30-pema.jpg"
              srcset="https://kievdah.com.ua/test/components/com_jshopping/files/img_products/maxima-350-30-pema.jpg 320w,
                         https://kievdah.com.ua/test/components/com_jshopping/files/img_products/full_maxima-350-30-pema.jpg 800w"
              sizes="(max-width: 650px) 300px">
и всё равно ничего, грузится 800px на любом устройстве и с любым размером окна браузера (даже включал просмотр с мобильного  в хроме)
*

Bozhkov2

  • Захожу иногда
  • 427
  • 12 / 0
К примеру, как здесь,https://joomlaforum.ru/index.php/topic,295678.0.html
Получилось! очень просто!
Код
<?php $client = new JApplicationWebClient(); foreach($this->images as $k=>$image){?>				
<img src="<?php print $this->image_product_path?>/<?php $client->mobile ? print $image->image_name :  print $image->image_full;?> />
<?php }?>
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться