Make WordPress Core

Opened 2 years ago

Closed 2 years ago

#56863 closed defect (bug) (maybelater)

Adjust SVG image thumbnail size on media listing page

Reported by: sumitsingh's profile sumitsingh Owned by:
Milestone: Priority: normal
Severity: normal Version: 6.0.3
Component: Media Keywords: has-screenshots close
Focuses: ui, css, administration Cc:

Description (last modified by costdev)

Hi ,

when i am allowing to upload SVG image then image is not showing on media listing page.

You can see mentioned SS and solution code with added width: 60px; in class

table.media .column-title .media-icon img {
    max-width: 60px;
    height: auto;
    vertical-align: top;
    width: 60px; // Proposed solution
}

Attachments (3)

Media-Library-‹-wpextended-—-WordPress.png (146.5 KB) - added by sumitsingh 2 years ago.
SVG issue on Media listing
Media-Library-‹-wpextended-—-WordPress (1).png (149.4 KB) - added by sumitsingh 2 years ago.
Adter added width 60px issue fixed
Screenshot-from-2022-10-20-14-07-40.png (312.9 KB) - added by sumitsingh 2 years ago.
check image width attribute things. why coming 1px width & height on svg image?

Download all attachments as: .zip

Change History (17)

@sumitsingh
2 years ago

SVG issue on Media listing

#1 @costdev
2 years ago

  • Description modified (diff)

@sumitsingh
2 years ago

Adter added width 60px issue fixed

#2 @costdev
2 years ago

  • Keywords reporter-feedback added

@sumitsingh when i am allowing to upload SVG image

Can you confirm how you're doing this so that reproduction steps are accurate? Thanks!

#3 @sumitsingh
2 years ago

Hi @costdev,

lot's of plugin available, but i have used https://wordpress.org/plugins/wpextended/ plugin and enbale "SVG File Upload" Module.

I am sharing Steps here.

1) Installed plugin - https://wordpress.org/plugins/wpextended/
2) Go to WP Extended menu and enbale "SVG File Upload" Module.
3) Go to media page and upload SVG image
4) issue happning with list view. look like this(abc.com/wp-admin/upload.php?mode=list)

I hope helpful above things

Thank you

Version 2, edited 2 years ago by sumitsingh (previous) (next) (diff)

#4 @kebbet
2 years ago

  • Resolution set to invalid
  • Status changed from new to closed

This should be handled by the provider of the feature IMHO, in the example that is ”WP Extended”.

So suggestion: close as wontfix.

#5 @sumitsingh
2 years ago

  • Resolution invalid deleted
  • Status changed from closed to reopened

Hi @kebbet ,

Even issue when i am doing with filter.

<?php
// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {

  global $wp_version;
  if ( $wp_version !== '4.7.1' ) {
     return $data;
  }

  $filetype = wp_check_filetype( $filename, $mimes );

  return [
      'ext'             => $filetype['ext'],
      'type'            => $filetype['type'],
      'proper_filename' => $data['proper_filename']
  ];

}, 10, 4 );

function cc_mime_types( $mimes ){
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );

#6 @kebbet
2 years ago

When allowing SVG's, then also add CSS in your theme/plugin that targets your modifications.

#7 @sumitsingh
2 years ago

Hey @kebbet ,

i am agree with you. but we need to check image width attribute things. why coming 1px width & height on svg image?

You can see mentioned SS.

@sumitsingh
2 years ago

check image width attribute things. why coming 1px width & height on svg image?

#8 @costdev
2 years ago

  • Keywords reporter-feedback removed

Thanks for the instructions @sumitsingh and for clarifying that this also occurs even without a plugin and just filters.

For a couple of references to this in the tutorial space:

  • See the fix_svg() callback here.
  • See this article, and in particular: "Before WordPress 4.0, you also make them display properly in the Media grid. But that’s broken now. If anyone knows how to fix, let me know!"

#9 @kebbet
2 years ago

Duplicate of #24251 ?

wp_getimagesize uses native PHP getimagesize and that does not support SVG's. Thats why 1px I guess.

#10 @sumitsingh
2 years ago

Hey @costdev ,

Thank you for above references tutorial

We can do with below css.

table.media .column-title .media-icon img[src$=".svg"] { 
   width: 60px !important; 
}

#11 @costdev
2 years ago

@kebbet wp_getimagesize uses native PHP getimagesize and that does not support SVG's. Thats why 1px I guess.

Nice catch!

Getting the right size for SVGs may involve parsing XML and for proportional SVGs, this could get messy quite quickly. Fixing the display via CSS is only part of the issue, as the image width and height attributes would need to be fixed too.

After reading about it previously working in WordPress < 4.0, I checked WordPress 3.9, and got the same result: width="1" height="1".

Since they didn't work in 3.9, and SVG uploads aren't natively supported by Core, I don't think we should be adding code to partially facilitate them. Extenders have already found a way to make this work. It's not a fix in Core, but rather part of what's required to provide SVG support.

IMO, if we were going to support SVG uploads in Core at all, I'd prefer to go all-in and support them entirely.

@kebbet Duplicate of #24251 ?

For the above reasons, I agree that it's appropriate to consider this at least a partial duplicate of the above ticket and to continue discussion there.

@sumitsingh Do you agree?

P.S. After searching "svg" on the Plugins > Add New screen, I installed the first plugin result and it had the CSS fix already in the plugin. 😉

Last edited 2 years ago by costdev (previous) (diff)

#12 @sumitsingh
2 years ago

Hi @costdev,

Yes that's fine. We can continue the discussion as you wish, here or there where is best for our community :)

Thank you.

Last edited 2 years ago by sumitsingh (previous) (diff)

#13 @sabernhardt
2 years ago

  • Component changed from General to Media
  • Keywords close added
  • Summary changed from Issue on media page to Adjust SVG image thumbnail size on media listing page

Instead of closing as a duplicate, would 'maybe later' make more sense? Then this could be reopened as a next step when #24251 is ready.

#14 @JeffPaul
2 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to maybelater
  • Status changed from reopened to closed

Sounds good, closing as maybelater.

Note: See TracTickets for help on using tickets.