Google is complaining that there is no height and width set on the HTML properties of some images in a menu. It's worrying about cumulative layout shift.
The sizing is all done in CSS, but I want to add the height/width attributes. I've created a mod_menu
override but that doesn't help because I can't even see an <img
tag.
I see these files
- default.php
- default_component.php
- default_heading.php
- default_separator.php
- default_url.php
I think it's being called with this code. I see this code in default_component.php
and default_url.php
. I've tried changing it in both files.
if ($item->menu_image)
{
if ($item->menu_image_css)
{
$image_attributes['class'] = $item->menu_image_css;
$linktype = JHtml::_('image', $item->menu_image, $item->title, $image_attributes);
}
else
{
$linktype = JHtml::_('image', $item->menu_image, $item->title);
}
if ($item->params->get('menu_text', 1))
{
$linktype .= '<span class="image-title">' . $item->title . '</span>';
}
}
I suspect it's specifically this part:
JHtml::_('image', $item->menu_image, $item->title, $image_attributes);
I saw this part was adding a class
$image_attributes['class'] = $item->menu_image_css;
So I tried adding
$image_attributes['height'] = '308';
$image_attributes['width'] = '308';
But that didn't appear to do it. I then tried:
$linktype = JHtml::_('image', $item->menu_image, $item->title, $image_attributes, ['width' => '308'], ['height' => '308']);
but still no joy
How could I add the height and width to these images?
Here is my full edited code
if ($item->menu_image)
{
if ($item->menu_image_css)
{
$image_attributes['class'] = $item->menu_image_css;
// $image_attributes['height'] = '308';
// $image_attributes['width'] = '308';
$linktype = JHtml::_('image', $item->menu_image, $item->title, $image_attributes, ['width' => '308'], ['height' => '308']);
}
else
{
$linktype = JHtml::_('image', $item->menu_image, $item->title);
}
if ($item->params->get('menu_text', 1))
{
$linktype .= '<span class="image-title">' . $item->title . '</span>';
}
}