Сдвиги макета cls, нужно прописать для всех изображений width height

[aksen872]

Добрый день, друзья!
В связи с новыми метриками гугла появилась задача прописать для всех картинок width height чтоб не было сдвига макета (по личным наблюдениям именно картинки и жарят).
Может кто подскажет как это лучше сделать, может в image.php можно сделать.

Буду рад любой помощи, да и пригодится думаю, ведь официально web vitals один из факторов

  Пример https://stil.com.ua/ua/interery/uchimsya-pravil-no-kombinirovat-zhidkie-oboi 

[Seriusis]

в идеале во всех контроллерах берете размеры из конфига, а в tpl файлах выводите значения в параметры для img. 

[aksen872]

Та дело в том что img храниться в БД..... Это нужно наверное достать все src, получить размеры картинок, а потом вставить в тег

[Dimasscus]

12 минут назад, aksen872 сказал:

Та дело в том что img храниться в БД..... Это нужно наверное достать все src, получить размеры картинок, а потом вставить в тег

У вас на сайте картинки вьіводятся после ресайза. Зачем вам бд?

[aksen872]

Может я что то туплю, текст статьи блога вместе с картинками ведь храниться в БД. Ресайз с этими картинками не происходит

[Dimasscus]

3 минуты назад, aksen872 сказал:

Может я что то туплю, текст статьи блога вместе с картинками ведь храниться в БД. Ресайз с этими картинками не происходит

Картинки храняться в файлах. В бд храняться url

[Seriusis]

24 минуты назад, aksen872 сказал:

Может я что то туплю, текст статьи блога вместе с картинками ведь храниться в БД. Ресайз с этими картинками не происходит

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

 

Само собой, если вы вставляете изображение вручную в визуальном редакторе, то никакого ресайза нет, и можете прямо там и прописывать width и height в режиме кода

[aksen872]

Цитата

Само собой, если вы вставляете изображение вручную в визуальном редакторе, то никакого ресайза нет, и можете прямо там и прописывать width и height в режиме кода

Как думаете это можно решить без муторной ручной работы?

[Dimasscus]

5 минут назад, aksen872 сказал:

Как думаете это можно решить без муторной ручной работы?

А как вьіглядит ссьлка на картинку в коде описания в блоге?

[aksen872]

<p><img alt="виды жидких обоев" src="https://stil.com.ua/image/catalog/vidu-zhidkih-oboev/zhidkie-oboi-vidu2.jpg" /></p>

[pawana]

3 часа назад, Seriusis сказал:

в идеале во всех контроллерах берете размеры из конфига, а в tpl файлах выводите значения в параметры для img.

Это ж адский ад  

17 минут назад, Seriusis сказал:

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

По идее сдвига в товарах/категориях быть не должно так как cls реагирует на несоответствие оригинальной картинки и ресайзнутой/сдвинутой стилями. 
Если это так, то проблема в картинках в описаниях и на главной.

Или все не так?

[aksen872]

Да, сдвиги в описаниях стр фильтров, блога, категории. В общем там где картинки в описании.
По крайней мере я это наблюдаю

[pawana]

Вот такую штуку нарыл для определения cls https://defaced.dev/tools/layout-shift-gif-generator/?fbclid=IwAR2rWV1UVh5WEk_AemY8SVrQStF_6Aypw4UXcyf9O9gLcEH09aI6VWjhwm4

У меня показала сдвиги на десктопе, а у вас @aksen872 все красиво

Змінено 9 січня 2021 користувачем pawana

[Dimasscus]

17 минут назад, aksen872 сказал:

<p><img alt="виды жидких обоев" src="https://stil.com.ua/image/catalog/vidu-zhidkih-oboev/zhidkie-oboi-vidu2.jpg" /></p>

Вьігрузить таблицу блога через бекап в админке, заменой добавить к     . jpg" />

Нужньіе width  и height. Загрузить обратно

[aksen872]

12 минут назад, pawana сказал:

Вот такую штуку нарыл для определения cls https://defaced.dev/tools/layout-shift-gif-generator/?fbclid=IwAR2rWV1UVh5WEk_AemY8SVrQStF_6Aypw4UXcyf9O9gLcEH09aI6VWjhwm4

У меня показала сдвиги на десктопе, а у вас @aksen872 все красиво

Да, я уже поработал, но ошибки не уходят, значит картинки хоть они и не на 1 экране

[Yoda]

Сразу учитывайте, что вам необходимо реальный размер изображений указывать для разных типов экранов - соответсвенно это минимум x4 работ.
И необходимо учесть все размеры, а также сделать базовый ресайз кешей изображений под все размеры.

 

Вот описание стандарта:

https://developer.mozilla.org/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

 

А вот взятый оттуда пример верстки:

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

 

[aksen872]

2 минуты назад, Dimasscus сказал:

Вьігрузить таблицу блога через бекап в админке, заменой добавить к     . jpg" />

Нужньіе width  и height. Загрузить обратно

Я в phpmyAdmin заменой где размеры были одинаковые все проставил.

А руками выписывать по каждой картинке размеры и вставлять

Я в php не очень, но думаю алгоритм должен быть такой
Есть переменная description, нужно в массив вітянуть все src
Далее получить через getimagesize() размеры
Выполнить замену <img   на <img width='$width' height='$height'

[Seriusis]

29 минут назад, pawana сказал:

cls реагирует на несоответствие оригинальной картинки и ресайзнутой/сдвинутой стилями

если не указаны размеры, то пока картинка не загрузилась, она не занимает место на странице, и только после ее загрузки она занимает определенную высоту и ширину. Отсюда и проблема со сдвигом в определенный момент и плохой показатель cls

[pawana]

20 минут назад, Seriusis сказал:

Отсюда и проблема со сдвигом

Спасибо, уже дошло

[aksen872]

В общем может кому пригодится, прямо в tpl вставляем, описание блога/статьи/товара - $description

Вытягиваем все src, получаем размеры и меняем в описании
<?php  $htmlContent = $description; ?>
<?php   preg_match_all('/<img[^>]+>/i',$htmlContent, $imgTags);  ?>
<?php   for ($i = 0; $i < count($imgTags[0]); $i++) { ?>
<?php      preg_match('/src="([^"]+)/i',$imgTags[0][$i], $imgage); ?>
<?php      $imgage[0] = str_ireplace( 'src="', '',  $imgage[0]); ?>
<?php      $size = getimagesize ("$imgage[0]"); ?>
<?php      $description = str_replace("$imgage[0]\"", "$imgage[0]\" $size[3]", $description); ?>
<?php   } ?>

[gyurza2000]

Добрый день, столкнулся с таким же сюрпризом - Оценка основных интернет-показателей: проверка не пройдена

Для изображений не заданы явным образом атрибуты width и height