Joomla! Issue Tracker | Joomla! CMS #39543 - [4.2.6]If an SVG image is selected, then the height and width values are zero

No Code Attached Yet ? ?

Closed
8 Jan 2023
Medium
Build: 4.2-dev
# 39543

PhocaCz
2 Jan 2023

Steps to reproduce the issue

This issue is associated with the following issue:
#39538

Templates: Styles (Site) - edit Cassiopeia - tab Advanced - select SVG image:

Expected result

Width and height will be correctly set

Actual result

Width and height is set to zero

System information (as much as possible)

Joomla 4.2.6
PHP 8.1

PhocaCz - open - 2 Jan 2023

joomla-cms-bot - change - 2 Jan 2023

Labels

Added: No Code Attached Yet

joomla-cms-bot - labeled - 2 Jan 2023

brianteeman - comment - 2 Jan 2023

confirmed. @dgrammatiko I guess the lazy load stuff should not be applied to svg files

dgrammatiko - comment - 2 Jan 2023

I guess the lazy load stuff should not be applied to svg files

It doesn't IF someone is using the recommended way of rendering images (eg using the respective layout):

joomla-cms/layouts/joomla/html/image.php

Line 35 in 4f1a4f1

if ($img->attributes['width'] > 0 && $img->attributes['height'] > 0) {

PhocaCz - comment - 2 Jan 2023

Hi,

can you explain more. What should a standard Joomla user do with an SVG image?

dgrammatiko - comment - 2 Jan 2023

@PhocaCz please read this: https://magazine.joomla.org/all-issues/february-2022/new-image-convention-to-help-developers
Also in the context of both templates and their logos, the code should be updated to use the JLayout

PhocaCz - comment - 2 Jan 2023

I still don't understand, I don't edit any code there. I just select SVG image in template. Does it mean, that Cassiopeia still uses some obsolete code?

dgrammatiko - comment - 2 Jan 2023

Does it mean, that Cassiopeia still uses some obsolete code?

Yes Cassiopeia (and Atum) should use the JLayout for their logos, this is a bug and an easy 2 lines conversion fix

PhocaCz - comment - 2 Jan 2023

Ok, thank you for the info.

brianteeman - comment - 2 Jan 2023

actually its a bit wierd. If you manually delete the text highlighted in the screenshot then as soon as you focus away the width and height values return and are correct

dgrammatiko - comment - 2 Jan 2023

actually its a bit weird

Well, the inconsistency here comes from the way the image URL is validated and as a side effect of having a load event for the image the code actually has access to the actual image size:

joomla-cms/build/media_source/system/js/fields/joomla-field-media.w-c.es6.js

Lines 230 to 233 in 4f1a4f1

    
           img.onload = () => { 
        
             this.inputElement.value = `${urlParts[0]}/${rest.join('/')}#joomlaImage://local-${urlParts[0]}/${rest.join('/')}?width=${img.width}&height=${img.height}`; 
        
             this.validatedUrl = `${urlParts[0]}/${rest.join('/')}#joomlaImage://local-${urlParts[0]}/${rest.join('/')}?width=${img.width}&height=${img.height}`; 
        
             this.markValid();

On the other side the SVG files inside the media manager as loaded as simple html <img> tags and thus the size is coming from the PHP side which in this case both width and height have 0 values. A simple solution is to have the MM to use the same onLoad event for the svg files and thus get the actual size. Should be a few lines of code and an easy implementation. That said, both templates should use the JLayout for the logos because apart from the size part for the svg files the URLs have the junk of the hash-etc...

chmst - change - 3 Jan 2023

Labels

Added: ? ?

chmst - labeled - 3 Jan 2023

wojtekxtx - comment - 6 Jan 2023

Both @brianteeman and @dgrammatiko are right. From what I know/think: why using svg while jpg is commonly used standard nowadays? Not to mention that jpgs are easier to work with. BTW: this is perfect example where mixins becomes handy.

richard67 - close - 8 Jan 2023

richard67 - comment - 8 Jan 2023

Closing as having a pull request. Please test #39574 . Thanks in advance.

richard67 - change - 8 Jan 2023

Status	New	⇒	Closed
Closed_Date	0000-00-00 00:00:00	⇒	2023-01-08 17:14:39
Closed_By		⇒	richard67

Add a Comment

Older
Newer

Joomla! Issue Tracker - CMS

[#39543] - [4.2.6]If an SVG image is selected, then the height and width values are zero

Steps to reproduce the issue

Expected result

Actual result

System information (as much as possible)

Add a Comment

	img.onload = () => {
	this.inputElement.value = `${urlParts[0]}/${rest.join('/')}#joomlaImage://local-${urlParts[0]}/${rest.join('/')}?width=${img.width}&height=${img.height}`;
	this.validatedUrl = `${urlParts[0]}/${rest.join('/')}#joomlaImage://local-${urlParts[0]}/${rest.join('/')}?width=${img.width}&height=${img.height}`;
	this.markValid();