Перейти к содержимому


Фотография
- - - - -

Адаптивные изображения: responsive images srcset

изображения

В этой теме нет ответов

#1 CB9TOIIIA

CB9TOIIIA

Отправлено 05 December 2016 - 16:16

*
Популярное сообщение!

Всем привет! Решил по фен-шую сделать изображения, вот так смог реализовать вывод в full-php изображений адаптивных:  
 
Почитать: https://www.smashing...picture-srcset/
API получаем из JBImage или иной - например тут пример из элемента fiction13
 0_a94f5_f9e6e79a_orig.png
 

  1. $document = JFactory::getDocument();
  2. $zoo = App::getInstance('zoo');
  3. $align = $this->app->jbitem->getMediaAlign($item, $layout);
  4. $tabsId = $this->app->jbstring->getId('tabs');
  5. $itemUrl = $this->app->route->item($item);
  6. $element = $item->getElement('050e0085-3fec-4d20-8ea9-4d2a602d2c7c');
  7. $data = (array)$element->data();
  8. $pathtoimgjbimage = $data[0]['file'];
  9. $Lwidth = '980';
  10. $Mwidth = '680';
  11. $Swidth = '480';
  12. $Xwidth = '320';
  13. $LargeImg = $zoo->jbimage->resize($pathtoimgjbimage, $Lwidth)->url;
  14. $MediumImg = $zoo->jbimage->resize($pathtoimgjbimage, $Mwidth)->url;
  15. $SmallImg = $zoo->jbimage->resize($pathtoimgjbimage, $Swidth)->url;
  16. $XsmallImg = $zoo->jbimage->resize($pathtoimgjbimage, $Xwidth)->url;
  17.  

Далее выводим:

  1. <picture>
  2. <source srcset="<?php echo $LargeImg;?>" media="(min-width: 1400px)" />
  3. <source srcset="<?php echo $MediumImg;?>" media="(min-width: 1200px)" />
  4. <source srcset="<?php echo $SmallImg;?>" media="(min-width: 960px)" />
  5. <img src="<?php echo $XsmallImg;?>" />
  6. </picture>
0_a94f6_e46c4c44_orig.png

Сообщение отредактировал CB9TOIIIA: 05 December 2016 - 16:33

  • 5





Темы с аналогичным тегами изображения

Click to return to top of page in style!