How can I add height and width attributes to an image in a menu?

Question

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

1. default.php
2. default_component.php
3. default_heading.php
4. default_separator.php
5. 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>';
    }
}

Answer 1

Your attributes are added only when image class is set. If you want dimensions on all images, move the code outside of $item->menu_image_css check:

if ($item->menu_image)
{
    $image_attributes['height'] = '308';
    $image_attributes['width'] = '308';

    if ($item->menu_image_css)
    {
        $image_attributes['class'] = $item->menu_image_css;
    }

    $linktype = JHtml::_('image', $item->menu_image, $item->title, $image_attributes);

    if ($item->params->get('menu_text', 1))
    {
        $linktype .= '<span class="image-title">' . $item->title . '</span>';
    }
}