Skip Navigation

This thread is resolved. Here is a description of the problem and solution.

Problem: I'm facing an issue where Google PageSpeed Insights is flagging images without width/height attributes. This problem arises with both built-in svg flags and custom png flags in the language switcher plugin, as shown in my attached screenshot.

Solution: Modify the code in `wp-content/plugins/sitepress-multilingual-cms/classes/block-editor/Blocks/LanguageSwitcher/Render.php`. Specifically, in the method `\WPML\BlockEditor\Blocks\LanguageSwitcher\Render::createLanguageItemNode`, update the code to set the 'src', 'width', and 'height' attributes for the flags, ensuring that the 'width' and 'height' values are numerical without any units like 'px'. The updated code snippet provided should resolve the issue with Google PageSpeed Insights flagging the images.

https://wpml.org/forums/topic/language-switcher-block-has-no-width-height-attributes-for-language-flags/#post-14910119

Relevant Documentation:
- WPML Language Switcher Customization
- WPML Plugin Code Modification
- Google PageSpeed Insights Image Optimization

This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

This topic contains 10 replies, has 2 voices.

Last updated by Bruno Kos 1 year, 6 months ago.

Assisted by: Bruno Kos.

Author Posts
November 15, 2023 at 5:09 pm #14819141

Matthias

Google PageSpeed Insights doesn't like images without width/height attribute. They are not correctly set through language switcher plugin, see screenshot attached. This occurs with built in svg flags and custom png flags.

wpml-language-switcher-block-no-width-and-height-attributes-set-for-flags.png
November 16, 2023 at 2:58 pm #14828129

Bruno Kos
WPML Supporter since 12/2018

Languages: English (English ) German (Deutsch ) French (Français )

Timezone: Europe/Zagreb (GMT+02:00)

Hi,

Thank you for contacting WPML support!

What if you enter the values for the flags, like this:
https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/custom-language-flags/#adjusting-the-flag-size

Does it show in HTML then?

Regards,
Bruno Kos

November 21, 2023 at 2:59 pm #14888297

Matthias

yeah, the issue still persists. You can see that width/length was set in block settings in my screenshot I have provided in my first message.

November 22, 2023 at 7:38 am #14893179

Bruno Kos
WPML Supporter since 12/2018

Languages: English (English ) German (Deutsch ) French (Français )

Timezone: Europe/Zagreb (GMT+02:00)

I see - can you send me a Google PageSpeed Insights report (screenshot would do) where it gives a bit information on this so we could have a look?

November 22, 2023 at 3:45 pm #14900473

Matthias

Here you go, you can also make a lighthouse test on hidden link

img-missing-width-height.png
November 23, 2023 at 7:42 am #14904049

Bruno Kos
WPML Supporter since 12/2018

Languages: English (English ) German (Deutsch ) French (Français )

Timezone: Europe/Zagreb (GMT+02:00)

I escalated the case to our developers, I will update here once I have some new information.

November 23, 2023 at 2:45 pm #14909397

Bruno Kos
WPML Supporter since 12/2018

Languages: English (English ) German (Deutsch ) French (Français )

Timezone: Europe/Zagreb (GMT+02:00)

Can you try this:

Go to: wp-content/plugins/sitepress-multilingual-cms/classes/block-editor/Blocks/LanguageSwitcher/Render.php
Change in the method: \WPML\BlockEditor\Blocks\LanguageSwitcher\Render::createLanguageItemNode

		$flagQuery = $languageSwitcherTemplate->getDOMXPath()->query( $XPathPrefix . '/' . Parser::PATH_ITEM_FLAG_URL );
		if ( $flagQuery->length > 0 ) {
			$flag = $flagQuery->item( $flagQuery->length - 1 );

			if ( $flag ) {
				$flag->setAttribute( 'src', $languageItem->getFlagUrl() );
			}
		}

to:

		$flagQuery = $languageSwitcherTemplate->getDOMXPath()->query( $XPathPrefix . '/' . Parser::PATH_ITEM_FLAG_URL );
		if ( $flagQuery->length > 0 ) {
			$flag = $flagQuery->item( $flagQuery->length - 1 );
			$pattern = '/<img[^>]*style="[^"]*(?:width\s*:\s*(\d+px))[^"]*(?:height\s*:\s*(\d+px))[^"]*"|<img[^>]*style="[^"]*(?:height\s*:\s*(\d+px))[^"]*(?:width\s*:\s*(\d+px))[^"]*"/i';
			preg_match($pattern, $sourceBlock->inner_html, $matches);
			if ( $flag ) {
				$flag->setAttribute( 'src', $languageItem->getFlagUrl() );
				$flag->setAttribute( 'width', $matches[1] );
				$flag->setAttribute( 'height', $matches[2] );
			}
		}

Does it work? The case is also now in our developers' queue.

November 23, 2023 at 3:11 pm #14909583

Matthias

Thank you. The Hotfix works, but the output includes the "px" unit within the width/height attributes, e.g. width="18px" height="12px".

Correct output should be without an unit, e.g. width="18" height="12".

November 23, 2023 at 3:47 pm #14910119

Bruno Kos
WPML Supporter since 12/2018

Languages: English (English ) German (Deutsch ) French (Français )

Timezone: Europe/Zagreb (GMT+02:00)

Here is the updated code:

		$flagQuery = $languageSwitcherTemplate->getDOMXPath()->query( $XPathPrefix . '/' . Parser::PATH_ITEM_FLAG_URL );
		if ( $flagQuery->length > 0 ) {
			$flag = $flagQuery->item( $flagQuery->length - 1 );
			$pattern = '/<img[^>]*style="[^"]*(?:width\s*:\s*(\d+px))[^"]*(?:height\s*:\s*(\d+px))[^"]*"|<img[^>]*style="[^"]*(?:height\s*:\s*(\d+px))[^"]*(?:width\s*:\s*(\d+px))[^"]*"/i';
			preg_match($pattern, $sourceBlock->inner_html, $matches);
      $width = preg_replace('~\D~', '', $matches[1]);
      $height = preg_replace('~\D~', '', $matches[2]);
			if ( $flag ) {
				$flag->setAttribute( 'src', $languageItem->getFlagUrl() );
				$flag->setAttribute( 'width', $width );
				$flag->setAttribute( 'height', $height );
			}
		}

November 24, 2023 at 7:10 am #14913417

Matthias

Problem solved, big thanks!

November 24, 2023 at 10:25 am #14915817

Bruno Kos
WPML Supporter since 12/2018

Languages: English (English ) German (Deutsch ) French (Français )

Timezone: Europe/Zagreb (GMT+02:00)

User confirmed that this is resolved