Adjust SVG image thumbnail size on media listing page

[sumitsingh]

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
}

[sumitsingh]

SVG issue on Media listing

[sumitsingh]

Adter added width 60px issue fixed

[costdev]

@sumitsingh when i am allowing to upload SVG image

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

[sumitsingh]

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) Install 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

[kebbet]

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

So suggestion: close as wontfix.

[sumitsingh]

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' );

[kebbet]

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

[sumitsingh]

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]

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

[costdev]

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!"

[kebbet]

Duplicate of #24251 ?

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

[sumitsingh]

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

[costdev]

@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 add 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. 😉

[sumitsingh]

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.

[sabernhardt]

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.

[JeffPaul]

Sounds good, closing as maybelater.