Jump to content
  • разработка интернет магазинов на opencart
  • доработка интернет магазинов на opencart

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


Recommended Posts

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

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

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

Link to comment
Share on other sites


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

Link to comment
Share on other sites

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

Link to comment
Share on other sites


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

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

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

Link to comment
Share on other sites


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

Link to comment
Share on other sites


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

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

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

Link to comment
Share on other sites


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

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

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

 

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

Link to comment
Share on other sites

Циии

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

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

Link to comment
Share on other sites


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

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

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

Link to comment
Share on other sites


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

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

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

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

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

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

Или все не ик?

Link to comment
Share on other sites


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

Link to comment
Share on other sites


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

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

Edited by pawana
  • +1 1
Link to comment
Share on other sites


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

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

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

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

Link to comment
Share on other sites


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

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

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

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

Link to comment
Share on other sites


Сразу улитывайте, что вам необходимо реальный размер изображений указывать для разных типов экранов - соответсвенно это минимум 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">

 

Link to comment
Share on other sites


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

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

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

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

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

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

Link to comment
Share on other sites


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

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

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

Link to comment
Share on other sites

В обещём может кому пригодится, прямо в 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   } ?>

Link to comment
Share on other sites


  • 1 year later...

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

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.