Ticket #31352: 31352.4.diff

src/wp-admin/includes/class-wp-media-list-table.php

@@ -313 +313 @@
                 $attributes = 'class="column-icon media-icon ' . $mime . '-icon"' . $style;
 ?>
                 <td <?php echo $attributes ?>><?php
-                        if ( $thumb = wp_get_attachment_image( $post->ID, array( 80, 60 ), true ) ) {
+                        if ( $thumb = wp_get_attachment_image_src( $post->ID, array( 40, 40 ), true ) ) {
+
+                                list( $src, $width, $height ) = $thumb;
+
+                                if ( 'image' != $mime ) {
+                                        // Grab the icon src and create a 2x srcset
+                                        $img_filename = substr( $src, 0, strrpos( $src, '.' ) );
+                                        $srcset = str_replace( $img_filename, $img_filename . '-2x', $src );
+                                        $img_html = '<img src="' . $src . '" srcset="' . $srcset . ' 2x" width="' . $width . '" height="' . $height . '" alt="' . $mime . ' icon" />';
+                                } else {
+                                        $img_html = '<img src="' . $src . '" width="' . $width . '" height="' . $height . '" alt="' . $mime . ' icon" />';
+                                }
+
                                 if ( $this->is_trash || ! $user_can_edit ) {
-                                        echo $thumb;
+                                        echo $img_html;
                                 } else {
 ?>
                                 <a href="<?php echo get_edit_post_link( $post->ID ); ?>" title="<?php echo esc_attr( sprintf( __( 'Edit &#8220;%s&#8221;' ), $att_title ) ); ?>">
-                                        <?php echo $thumb; ?>
+                                        <?php echo $img_html; ?>
                                 </a>
 
 <?php                   }

src/wp-includes/js/media/views.js

@@ -2721 +2721 @@
                         options.size = this.imageSize();
                 }
 
+                // add support for retina icons
+                if ( '' !== options.icon ) {
+                        options.icon2x = options.icon.replace('.png', '-2x.png');
+                }
+
                 options.can = {};
                 if ( options.nonces ) {
                         options.can.remove = !! options.nonces['delete'];

src/wp-includes/media-template.php

@@ -297 +297 @@
                                 <# } else if ( 'image' === data.type && data.sizes && data.sizes.full ) { #>
                                         <img class="details-image" src="{{ data.sizes.full.url }}" draggable="false" />
                                 <# } else if ( -1 === jQuery.inArray( data.type, [ 'audio', 'video' ] ) ) { #>
-                                        <img class="details-image" src="{{ data.icon }}" class="icon" draggable="false" />
+                                        <img class="details-image" src="{{ data.icon }}" srcset="{{ data.icon2x }} 2x" class="icon" draggable="false" />
                                 <# } #>
 
                                 <# if ( 'audio' === data.type ) { #>
@@ -461 +461 @@
                                                 <# if ( data.image && data.image.src && data.image.src !== data.icon ) { #>
                                                         <img src="{{ data.image.src }}" class="thumbnail" draggable="false" />
                                                 <# } else { #>
-                                                        <img src="{{ data.icon }}" class="icon" draggable="false" />
+                                                        <img src="{{ data.icon }}" srcset="{{ data.icon2x}} 2x" class="icon" draggable="false" />
                                                 <# } #>
                                         </div>
                                         <div class="filename">
@@ -511 +511 @@
                                 <# } else if ( 'image' === data.type && data.sizes ) { #>
                                         <img src="{{ data.size.url }}" draggable="false" />
                                 <# } else { #>
-                                        <img src="{{ data.icon }}" class="icon" draggable="false" />
+                                        <img src="{{ data.icon }}" srcset="{{ data.icon2x }} 2x" class="icon" draggable="false" />
                                 <# } #>
                         </div>
                         <div class="details">