Get file size, dimension and file type in image caption

  • AJ20152015

    (@aj20152015)


    1 month, 2 weeks ago

    Hi,

    I am doing a stock photo website, a basic one. I need to display the file type, dimension and file size as caption automatically, every time I upload an image in the media library. Example, I prefer it like this as caption:

    File Type: image/jpeg | File Size: 300Kb | Dimension: 1920 x 1080 pixels

    It is the same info that WordPress give when you upload an image or file in the Library. Is there a custom snippet I can insert in functions.php for this? I am ware there are EXIF plugins, but they are not giving me what I want. They are just displaying EXIF info which is irrelevant to my needs.

    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)
  • Nicolas Langle

    (@nlangle)

    1 month, 2 weeks ago

    Hi @aj20152015,

    Maybe you can use the image_add_caption_text hook then use the function wp_check_filetype for the mime type, size_format( wp_filesize( $file_path ) ) for the file size and wp_getimagesize for the dimension.

    Hope this help.

    Best regards

    Thread Starter AJ20152015

    (@aj20152015)

    1 month, 2 weeks ago

    Thank you. Issue is, I am not a backend developer. So, for me to integrate these parameters, is complicated.

    Nicolas Langle

    (@nlangle)

    1 month, 2 weeks ago

    If you use Gutenberg editor for displaying your image, something like that should work :

    /**
     * Get file details string
     * @param int $id
     * @return string 
     */
    function get_file_details_string( $id ) {
    	$file_path = get_attached_file( $id );

    	if ( empty( $file_path ) ) {
    		return '';
    	}

    	$file_weight = size_format( wp_filesize( $file_path ) );
    	$file_size   = wp_getimagesize( $file_path );

    	return '<strong>File Type:</strong> ' . $file_size['mime'] . ' | <strong>File Size:</strong> ' . $file_weight . ' | <strong>Dimensions:</strong> ' . $file_size[0] . ' x ' . $file_size[1] . ' pixels';
    }

    /**
     * Override block core image render
     * @param string $block_content
     * @param array $block
     * @param WP_Block $instance
     * @return string 
     */
    function override_block_core_image_render( $block_content, $block, $instance ) {
    	if ( empty( $block['attrs']['id'] ) ) {
    		return $block_content;
    	}

    	$file_details = get_file_details_string( $block['attrs']['id'] );

    	if ( str_contains( $block_content, '</figcaption>' ) ) {
    		return str_replace( '</figcaption>', '<br />' . $file_details . '</figcaption>', $block_content );
    	}
    	
    	return str_replace( '</figure>', '<figcpation>' . $file_details . '</figcpation></figure>', $block_content );
    }

    add_filter( 'render_block_core/image', 'override_block_core_image_render', 20, 3 );

    you have to put that in your PHP functions file and then use an image block in Gutenberg editor in order to view the result

    Best regards

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.

Tags