Make WordPress Core

Opened 2 days ago

Last modified 7 hours ago

#62712 new defect (bug)

"Edit image" in Media Modal not work for PSD/SVG ( mime_type image/* )

Reported by: hrohh's profile Hrohh Owned by:
Milestone: Awaiting Review Priority: normal
Severity: minor Version: 6.7.1
Component: Post Thumbnails Keywords:
Focuses: Cc:

Description

in wp-includes/media-template.php #425
is a condition for showing "Edit image" button in Media modal attachment dialog.

<?php
<# if ( 'image' === data.type && ! data.uploading && data.sizes && data.can.save ) { #>
<button type="button" class="button edit-attachment"><?php _e( 'Edit Image' ); ?></button>
<# } else if ( 'pdf' === data.subtype && data.sizes ) { #>
<p><?php _e( 'Document Preview' ); ?></p>
?>

If we have file with metadata sizes, and has mimetype image/*, it will show "Edit image" button. So if I add metadata sizes for PSD files, or DOCX (like PDF does), it will show button.

in wp-admin/includes/media.php #1682
is a condition for showing "Edit image" button in edit screen.

<?php
if ( wp_attachment_is_image( $post->ID ) && wp_image_editor_supports( array( 'mime_type' => $post->post_mime_type ) ) ) {
?>

wp_attachment_is_image function check mime type of file. If is image/*, so SVG (image/svg+xml) or PSD (image/vnd.adobe.photoshop), it is true, which is ok.

wp_image_editor_supports check ImageMagick, it has support for mime_type of attachment. For PSD return false.

wp_get_image_editor function for PSD return ImageMagick. I can create jpg.

Change History (4)

#1 @abcd95
2 days ago

Thanks, @Hrohh for reporting this issue.

I noticed a different behavior. The "Edit Image" button actually appears in both places when uploading the PSD file:

Direct Media Library view (Media → Library → Edit)
Media Modal (when adding media to post)

Screenshot - https://postimg.cc/hJBp29Df

Please let me know if I am missing something here

#2 @Hrohh
38 hours ago

@abcd95 Yes, you are right. I want try filter load_image_to_edit_path. I have PSD file with metadata sizes with jpg, so I can "edit image" with full sizes, which can be usefull for webpage. I dont have free time to try, but next week I will. I can filter admnin with ugly js hack for now.

<?php
add_action( 'print_media_templates', 'core_thumbnail_generator_print_media_templates');
function core_thumbnail_generator_print_media_templates() {
    ?>
    <script>
        /* maybe this is the way? :)
        jQuery(document).ready(function($){
            wp.media.view.Attachment.Details.TwoColumn = wp.media.view.Attachment.Details.TwoColumn.extend({

            });
        });
        */
        let tmpl = document.querySelector('#tmpl-attachment-details-two-column');
        if ( tmpl ) {

            tmpl.innerHTML = tmpl.innerHTML.replace(
                /'image' === data.type && ! data.uploading && data.sizes && data.can.save/g,
                "'image' === data.type && ! data.uploading && data.sizes && data.can.save && data.editable" );

            tmpl.innerHTML = tmpl.innerHTML.replace(
                /'pdf' === data.subtype && data.sizes/g,
                "! data.editable && data.sizes" );
        }
    </script>
    <?php
}

add_filter( 'wp_prepare_attachment_for_js', 'core_thumbnail_generator_wp_prepare_attachment_for_js', 10, 3 );
function core_thumbnail_generator_wp_prepare_attachment_for_js( $response, $attachment, $meta ){
   
    // revert full size instead $attachment_url = wp_get_attachment_url( $attachment->ID );

    if ( wp_attachment_is( 'image', $attachment ) && ! empty( $meta['sizes'] ) && ! empty( $meta['sizes']['full'] ) ) {

        $attachment_url = wp_get_attachment_url( $attachment->ID );
        $base_url       = str_replace( wp_basename( $attachment_url ), '', $attachment_url );

        $response['sizes']['full'] = array(
            'url'         => $base_url . $meta['sizes']['full']['file'],
            'height'      => $meta['sizes']['full']['height'],
            'width'       => $meta['sizes']['full']['width'],
            'orientation' => $meta['sizes']['full']['height'] > $meta['sizes']['full']['width'] ? 'portrait' : 'landscape',
        );
    }

    // maybe editor can work with other formats? how can i get these formats via imagick?
    $response['editable'] = in_array( $attachment->post_mime_type, array(
        'image/jpeg',
        'image/png',
        'image/gif',
        'image/bmp',
        'image/tiff',
        'image/webp',
        'image/avif'
    ) );

    return $response;

}

#3 @abcd95
24 hours ago

@Hrohh Thank you for providing the additional context and code. So, you're exploring a solution to control the "Edit Image" button visibility based on file editability rather than just mime type. Your approach is a clever workaround. However, we might want to consider -

The current behavior in core relies on wp_image_editor_supports() for checking editability, which correctly handles PSD files by returning false.
Instead of modifying the media template directly, we could explicitly define editable image types
Or extend the existing checks in wp_attachment_is_image() to consider file editability

But I am sure there might be better ways and this can be explored further.

#4 @Hrohh
7 hours ago

I think, that it doesn't matter whether the file is an image. If we have metadata sizes for example for DOCX, MP3 etc, we can use image editor for cropping thumbnails ( metadata sizes ). It is same situation like with PDF.

So we have image/*, it is image, but only

viewable to browser
'image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/webp', 'image/avif', ( no heic for now https://caniuse.com/heif )

editable by image editor

<?php
wp_image_editor_supports( array(
        'mime_type' => 'image/vnd.adobe.photoshop',
        'methods'   => array(
            'rotate',
            'resize',
            'save'
        )
    ) );
// return true for me so "Edit Image" should work

I found little bug in image editor
https://core.trac.wordpress.org/ticket/62729#ticket

Note: See TracTickets for help on using tickets.