Media widget throws PHP notices and warnings when using SVG

Resolved

(@benbodhi)

I’m the developer of the plugin SVG Support.

Since the new image widget was released in 4.8, there has been PHP notices and warnings when wp_debug is enabled while I use SVG files in the image widget.

The SVG images show up fine and everything works as expected except for the display of warnings issue.

I’ve been fiddling with my code (for a stupid number of hours I’m embarrassed to admit to) with no luck. Hoping someone out there can shed some light on this situation as I grow weary running in circles.

The warnings:

Warning: Illegal string offset 'height'
Warning: Illegal string offset 'width'
Notice: Uninitialized string offset: 0 (for both height and width)

My code:

function bodhi_svgs_response_for_svg( $response, $attachment, $meta ) {

	if ( $response['mime'] == 'image/svg+xml' && empty( $response['sizes'] ) ) {

		$svg_path = get_attached_file( $attachment->ID );

		if ( ! file_exists( $svg_path ) ) {
			// If SVG is external, use the URL instead of the path
			$svg_path = $response[ 'url' ];
		}

		$dimensions = bodhi_svgs_get_dimensions( $svg_path );

		$response[ 'sizes' ] = array(
			'full' => array(
				'url' => $response[ 'url' ],
				'width' => $dimensions->width,
				'height' => $dimensions->height,
				'orientation' => $dimensions->width > $dimensions->height ? 'landscape' : 'portrait'
				)
			);

	}

	return $response;

}
add_filter( 'wp_prepare_attachment_for_js', 'bodhi_svgs_response_for_svg', 10, 3 );

function bodhi_svgs_get_dimensions( $svg ) {

	$svg = simplexml_load_file( $svg );

	if ( $svg === FALSE ) {

		$width = '0';
		$height = '0';

	} else {

		$attributes = $svg->attributes();
		$width = (string) $attributes->width;
		$height = (string) $attributes->height;

	}

	return (object) array( 'width' => $width, 'height' => $height );

}

Here’s the core code that is affecting the situation:

function _wp_get_image_size_from_meta( $size_name, $image_meta ) {
	if ( $size_name === 'full' ) {
		return array(
			absint( $image_meta['width'] ),
			absint( $image_meta['height'] ),
		);
	} elseif ( ! empty( $image_meta['sizes'][ $size_name ] ) ) {
		return array(
			absint( $image_meta['sizes'][ $size_name ]['width'] ),
			absint( $image_meta['sizes'][ $size_name ]['height'] ),
		);
	}

	return false;
}

Thanks in advance for any insight!

Viewing 12 replies - 1 through 12 (of 12 total)

helldog2018

(@helldog2018)

8 years, 2 months ago

Hi @benbodhi,

I believe WordPress core isn’t allowing .SVG files because it can’t see height and width and therefore is ‘0’.
Can’t you add something like:

if(!isset($meta['width'])){$meta['width'] = 0;}
if(!isset($meta['height'])){$meta['height'] = 0;}

just to make sure the error isn’t producing on the websites?

I mean, it is just a warning because of the not visible size.

This reply was modified 8 years, 2 months ago by helldog2018.

Thread Starter

Benbodhi

(@benbodhi)

8 years, 2 months ago

Hi @helldog2018,

Thanks for your time looking at this!
I actually tried this exact code… but I may be using it incorrectly. Where would you suggest to use it in my code? To replace existing code or in addition to?

I’ve tried this in multiple places where I thought it should work, but I think my returns still aren’t using it.

This code is for the attachment-modal, but maybe I need to use the !isset somewhere else in my plugin.

helldog2018

(@helldog2018)

8 years, 2 months ago

Hi @benbodhi,

I am trying to reproduce these messages on my own website.

I have added an .svg file to the sidebar image widget and also in the footer image widget. Both seem to work without fail.
Debugging is enabled, but doesn’t reproduce these messages.

Did you fix this already?

This reply was modified 8 years, 2 months ago by helldog2018.

Thread Starter

Benbodhi

(@benbodhi)

8 years, 2 months ago

Hi @helldog2018,

I haven’t fixed it yet… but not for lack of trying!

The warnings and notices should show up just above the image in the sidebar when using SVG files in the image widget and wp_debug is enbaled. I just have a fresh WP install with SVG Support, twentyseventeen and wp_debug enabled. I also am running the bleeding edge nightly releases… but it’s the same issue regardless of which version I’m using, whether current stable or any beta or alpha.

Additionally, when using the Query Monitor plugin, I can see the whole process:

Location: wp-includes/media.php:993

Caller:
1. get_sidebar()
wp-content/themes/twentyseventeen/single.php:43

2. locate_template()
wp-includes/general-template.php:111

3. load_template('wp-content/themes/twentyseventeen/sidebar.php')
wp-includes/template.php:653

4. dynamic_sidebar('sidebar-1')
wp-content/themes/twentyseventeen/sidebar.php:19

5. WP_Widget->display_callback()
wp-includes/widgets.php:769

6. WP_Widget_Media->widget()
wp-includes/class-wp-widget.php:377

7. WP_Widget_Media_Image->render_media()
wp-includes/widgets/class-wp-widget-media.php:248

8. _wp_get_image_size_from_meta()
wp-includes/widgets/class-wp-widget-media-image.php:213

I’ve been fiddling with the _wp_get_image_size_from_meta function in the wp-includes/media.php file on line 987. Testing var_dumps to see what info is getting passed to that function. It seems like no matter what I try, this function is only receiving the first character of anything I have set in $image_meta.

I feel like I’m staring the solution in the face, but it just hasn’t clicked for me yet. I even tried talking to my rubber duck 😛

helldog2018

(@helldog2018)

8 years, 2 months ago

Haha, but this is kind of crazy.
My website is realy not producing any of these errors.
These are my wp-config.php settings:

define('WP_DEBUG', true);
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );
@ini_set( 'display_errors', 0 );
define( 'SCRIPT_DEBUG', true );

I just refreshed my log file and it doesn’t produce anything.
If I try with display is true, it still doesn’t produce any warnings.
You can check it yourself via the link I send you earlier.
The SVG file is a piece of tree with a cat on it.

I’ll try a fresh install tomorrow with just Seventeen on it.

helldog2018

(@helldog2018)

8 years, 2 months ago

Also tried it with the ‘Seventeen’ theme.. Still no warnings..
Debug log only producing the following warnings because I disabled caching for a moment:

[18-Apr-2018 17:29:57 UTC] PHP Warning:  include(/home/youngsecur/domains/youngsecurity.nl/public_html/wp-content/advanced-cache.php): failed to open stream: No such file or directory in /home/youngsecur/domains/youngsecurity.nl/public_html/wp-settings.php on line 84
[18-Apr-2018 17:29:57 UTC] PHP Warning:  include(/home/youngsecur/domains/youngsecurity.nl/public_html/wp-content/advanced-cache.php): failed to open stream: No such file or directory in /home/youngsecur/domains/youngsecurity.nl/public_html/wp-settings.php on line 84
[18-Apr-2018 17:29:57 UTC] PHP Warning:  include(): Failed opening '/home/youngsecur/domains/youngsecurity.nl/public_html/wp-content/advanced-cache.php' for inclusion (include_path='.:/usr/local/lib/php') in /home/youngsecur/domains/youngsecurity.nl/public_html/wp-settings.php on line 84
[18-Apr-2018 17:30:14 UTC] PHP Warning:  include(/home/youngsecur/domains/youngsecurity.nl/public_html/wp-content/advanced-cache.php): failed to open stream: No such file or directory in /home/youngsecur/domains/youngsecurity.nl/public_html/wp-settings.php on line 84
[18-Apr-2018 17:30:14 UTC] PHP Warning:  include(/home/youngsecur/domains/youngsecurity.nl/public_html/wp-content/advanced-cache.php): failed to open stream: No such file or directory in /home/youngsecur/domains/youngsecurity.nl/public_html/wp-settings.php on line 84
[18-Apr-2018 17:30:14 UTC] PHP Warning:  include(): Failed opening '/home/youngsecur/domains/youngsecurity.nl/public_html/wp-content/advanced-cache.php' for inclusion (include_path='.:/usr/local/lib/php') in /home/youngsecur/domains/youngsecurity.nl/public_html/wp-settings.php on line 84
[18-Apr-2018 17:30:16 UTC] PHP Warning:  include(/home/youngsecur/domains/youngsecurity.nl/public_html/wp-content/advanced-cache.php): failed to open stream: No such file or directory in /home/youngsecur/domains/youngsecurity.nl/public_html/wp-settings.php on line 84
[18-Apr-2018 17:30:16 UTC] PHP Warning:  include(/home/youngsecur/domains/youngsecurity.nl/public_html/wp-content/advanced-cache.php): failed to open stream: No such file or directory in /home/youngsecur/domains/youngsecurity.nl/public_html/wp-settings.php on line 84
[18-Apr-2018 17:30:16 UTC] PHP Warning:  include(): Failed opening '/home/youngsecur/domains/youngsecurity.nl/public_html/wp-content/advanced-cache.php' for inclusion (include_path='.:/usr/local/lib/php') in /home/youngsecur/domains/youngsecurity.nl/public_html/wp-settings.php on line 84
[18-Apr-2018 17:30:28 UTC] PHP Warning:  include(/home/youngsecur/domains/youngsecurity.nl/public_html/wp-content/advanced-cache.php): failed to open stream: No such file or directory in /home/youngsecur/domains/youngsecurity.nl/public_html/wp-settings.php on line 84
[18-Apr-2018 17:30:28 UTC] PHP Warning:  include(/home/youngsecur/domains/youngsecurity.nl/public_html/wp-content/advanced-cache.php): failed to open stream: No such file or directory in /home/youngsecur/domains/youngsecurity.nl/public_html/wp-settings.php on line 84
[18-Apr-2018 17:30:28 UTC] PHP Warning:  include(): Failed opening '/home/youngsecur/domains/youngsecurity.nl/public_html/wp-content/advanced-cache.php' for inclusion (include_path='.:/usr/local/lib/php') in /home/youngsecur/domains/youngsecurity.nl/public_html/wp-settings.php on line 84
[18-Apr-2018 17:30:36 UTC] PHP Warning:  include(/home/youngsecur/domains/youngsecurity.nl/public_html/wp-content/advanced-cache.php): failed to open stream: No such file or directory in /home/youngsecur/domains/youngsecurity.nl/public_html/wp-settings.php on line 84
[18-Apr-2018 17:30:36 UTC] PHP Warning:  include(/home/youngsecur/domains/youngsecurity.nl/public_html/wp-content/advanced-cache.php): failed to open stream: No such file or directory in /home/youngsecur/domains/youngsecurity.nl/public_html/wp-settings.php on line 84
[18-Apr-2018 17:30:36 UTC] PHP Warning:  include(): Failed opening '/home/youngsecur/domains/youngsecurity.nl/public_html/wp-content/advanced-cache.php' for inclusion (include_path='.:/usr/local/lib/php') in /home/youngsecur/domains/youngsecurity.nl/public_html/wp-settings.php on line 84

This reply was modified 8 years, 2 months ago by helldog2018.

Thread Starter

Benbodhi

(@benbodhi)

8 years, 2 months ago

That’s so weird! I actually had the same issue when I first tried debugging this when it was reported, I couldn’t see the issue anywhere. But with the clean install, sure enough, it showed up.

I appreciate the time you’re offering, thank you kindly!

helldog2018

(@helldog2018)

8 years, 2 months ago

Hi @benbodhi,

Yes, I can see it only happens to new websites?
I just created a temporary wordpress install and reproduced the problem on http://temporary.youngsecurity.nl/

Will try and help where I can.
Cheers.

Thread Starter

Benbodhi

(@benbodhi)

8 years, 2 months ago

Thank you!

I just stumbled on something I think might work.
I changed my line of code that sets the size name to “full” in the response to “custom” and then “svg” to see what would happen. To test the results, I have to completely remove the image widget and then add a new one each time as this code is for the attachment modal window.

In testing these, they both seem to yield the same result, no more warnings, but SVG is displayed at 1px. I’ve already tackled this with featured images and used CSS to set the SVG width to 100%.. so I’ll add that for the image widget also and keep testing. Not sure if it’s the most elegant solution, but it’s only the tiniest little bit extra code…. That I’ve spent hours and hours trying to write hahaha. Literally 1 minute of code.

Thanks for helping look into this. I’d be interested if you can see anything else.

Thread Starter

Benbodhi

(@benbodhi)

8 years, 2 months ago

Actually, using “svg” as the name doesn’t work… but “custom” does.

So the “fix” was to use:

$response[ 'sizes' ] = array(
	'custom' => array( // changed from 'full' to 'custom'
		'url' => $response[ 'url' ],
		'width' => $dimensions->width,
		'height' => $dimensions->height,
		'orientation' => $dimensions->width > $dimensions->height ? 'landscape' : 'portrait'
		)
	);

And then I added CSS to make sure the SVG wasn’t displayed at 1x1px in the Image Widget:

.widget_media_image img[src$=".svg"] {
	width: 100%;
}

helldog2018

(@helldog2018)

8 years, 2 months ago

Hi @benbodhi,

Yeah that indeed solved the problem, good catch.
Guess this topic is solved then 🙂

Thread Starter

Benbodhi

(@benbodhi)

8 years, 2 months ago

Thanks again for your help 🙂

Viewing 12 replies - 1 through 12 (of 12 total)

The topic ‘Media widget throws PHP notices and warnings when using SVG’ is closed to new replies.

Media widget throws PHP notices and warnings when using SVG

Tags

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics