srcset для Gallery 3.0.2 (Coollanta) и экранов повышенного разрешения
Добавлено: 03 апр 2022, 19:09
На современных мониторах и смартфонах с высоким разрешением ретина куда лучше выглядят картинки с удвоенным разрешением. Тег srcset позволяет указать браузеру, что в случае повышенного разрешения экрана можно использовать дополнительное увеличенное изображение, 2x, 4x. При этом на старых дисплеях обычного разрешения лишние увеличенные картинки не подгружаются.
Сделал для Gallery 3 свой srcset из папки resizes для превьюшек галереи. Для этого находим файл галереи \themes\wind\views\album.html.php и делаем себе его копию для правки. В нашей копии находим:
и заменяем на:
Почему сделаны отдельные условия для родительских каталогов и собственно альбомов. Я просто пока не нашел где брать большое изображение для обложки альбома. В галерее есть только фотка .album.jpg в каталоге thumbs и ее нет в каталоге resizes, ибо штатно этого не нужно было изначально. Поэтому srcset включается лишь для превью фоток в альбоме, но не для превью обложек альбомов. Пока так. Если есть идеи поинтереснее, с обложками альбомов высокого разрешения - напишите пожалуйста, будет полезно.
Теперь сделаем srcset повышенного разрешения для страницы photo - собственно страницы просмотра отдельной картинки. Тут все еще проще. Находим файл \themes\wind\views\photo.html.php, в нем следующую строку:
и заменяем на:
Таким образом и на странице фотографии появляется ее увеличенный вариант (собственно оригинал фото) для современных экранов повышенного разрешения при корректных геометрических размерах фотки на странице, определенных в настройках галереи.
Сделал для Gallery 3 свой srcset из папки resizes для превьюшек галереи. Для этого находим файл галереи \themes\wind\views\album.html.php и делаем себе его копию для правки. В нашей копии находим:
Код: Выделить всё
<? if ($child->has_thumb()): ?>
<?= $child->thumb_img(array("class" => "g-thumbnail")) ?>
<? endif ?>
Код: Выделить всё
<? if ($child->has_thumb() && $child->is_album()): ?>
<?= $child->thumb_img(array("class" => "g-thumbnail")) ?>
<? endif ?>
<? if ($child->has_thumb() && $child->is_album()==false): ?>
<? $newIMG = $child->thumb_img(array("class" => "g-thumbnail")) ?>
<? $newIMG = substr($newIMG,0,-2) ?>
<?= $newIMG ?> srcset="<?= $child->resize_url() ?> 2x"/>
<? endif ?>
Теперь сделаем srcset повышенного разрешения для страницы photo - собственно страницы просмотра отдельной картинки. Тут все еще проще. Находим файл \themes\wind\views\photo.html.php, в нем следующую строку:
Код: Выделить всё
<?= $item->resize_img(array("id" => "g-item-id-{$item->id}", "class" => "g-resize")) ?>
Код: Выделить всё
<? $NewBigImg = $item->resize_img(array("id" => "g-item-id-{$item->id}", "class" => "g-resize")) ?>
<? $NewBigImg = substr($NewBigImg,0,-2) ?>
<?=$NewBigImg ?> srcset="<?= $item->file_url() ?> 2x"/>