2

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>';
    }
}
0

1 Answer 1

2

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>';
    }
}
4
  • Ah ha! What an idiot. Good man
    – Eoin
    Jul 7, 2021 at 8:06
  • Weirdly this doesn't work. It shows the same old as it used to.
    – Eoin
    Jul 7, 2021 at 9:39
  • Have you checked if the override works at all?
    – Sharky
    Jul 7, 2021 at 17:33
  • Yep, I echo'd something and I see it selectable in the module too
    – Eoin
    Jul 9, 2021 at 22:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.