webp-uploads
Last commit date
deprecated.php
1 year ago
helper.php
10 months ago
hooks.php
10 months ago
image-edit.php
1 year ago
load.php
10 months ago
picture-element.php
1 year ago
readme.txt
6 months ago
rest-api.php
1 year ago
settings.php
1 year ago
uninstall.php
1 year ago
picture-element.php
173 lines
| 1 | <?php |
| 2 | /** |
| 3 | * Add `picture` element support |
| 4 | * |
| 5 | * @package webp-uploads |
| 6 | * |
| 7 | * @since 2.0.0 |
| 8 | */ |
| 9 | |
| 10 | /** |
| 11 | * Potentially wrap an image tag in a picture element. |
| 12 | * |
| 13 | * @since 2.0.0 |
| 14 | * |
| 15 | * @param string $image The image tag. |
| 16 | * @param string $context The context for the image tag. |
| 17 | * @param int $attachment_id The attachment id. |
| 18 | * |
| 19 | * @return string The new image tag. |
| 20 | */ |
| 21 | function webp_uploads_wrap_image_in_picture( string $image, string $context, int $attachment_id ): string { |
| 22 | if ( 'the_content' !== $context ) { |
| 23 | return $image; |
| 24 | } |
| 25 | |
| 26 | $original_file_mime_type = webp_uploads_get_attachment_file_mime_type( $attachment_id ); |
| 27 | if ( '' === $original_file_mime_type ) { |
| 28 | return $image; |
| 29 | } |
| 30 | |
| 31 | $image_meta = wp_get_attachment_metadata( $attachment_id ); |
| 32 | |
| 33 | if ( ! isset( $image_meta['sizes'] ) ) { |
| 34 | return $image; |
| 35 | } |
| 36 | |
| 37 | $image_sizes = $image_meta['sizes']; |
| 38 | |
| 39 | // Append missing full size image in $image_sizes array for srcset. |
| 40 | if ( isset( $image_meta['sources'], $image_meta['width'], $image_meta['height'] ) ) { |
| 41 | array_unshift( $image_sizes, $image_meta ); |
| 42 | } |
| 43 | |
| 44 | // Extract sizes using regex to parse image tag, then use to retrieve tag. |
| 45 | $width = 0; |
| 46 | $height = 0; |
| 47 | $processor = new WP_HTML_Tag_Processor( $image ); |
| 48 | if ( $processor->next_tag( array( 'tag_name' => 'IMG' ) ) ) { |
| 49 | $width = (int) $processor->get_attribute( 'width' ); |
| 50 | $height = (int) $processor->get_attribute( 'height' ); |
| 51 | } |
| 52 | $size_to_use = ( $width > 0 && $height > 0 ) ? array( $width, $height ) : 'full'; |
| 53 | |
| 54 | $image_src = wp_get_attachment_image_src( $attachment_id, $size_to_use ); |
| 55 | if ( false === $image_src ) { |
| 56 | return $image; |
| 57 | } |
| 58 | list( $src, $width, $height ) = $image_src; |
| 59 | $size_array = array( absint( $width ), absint( $height ) ); |
| 60 | |
| 61 | // Collect all the sub size image mime types. |
| 62 | $mime_type_data = array(); |
| 63 | foreach ( $image_sizes as $size ) { |
| 64 | if ( isset( $size['sources'] ) && isset( $size['width'] ) && isset( $size['height'] ) ) { |
| 65 | foreach ( $size['sources'] as $mime_type => $data ) { |
| 66 | if ( wp_image_matches_ratio( $size_array[0], $size_array[1], $size['width'], $size['height'] ) ) { |
| 67 | $mime_type_data[ $mime_type ] = $mime_type_data[ $mime_type ] ?? array(); |
| 68 | $mime_type_data[ $mime_type ]['w'][ $size['width'] ] = $data; |
| 69 | $mime_type_data[ $mime_type ]['h'][ $size['height'] ] = $data; |
| 70 | } |
| 71 | } |
| 72 | } |
| 73 | } |
| 74 | $sub_size_mime_types = array_keys( $mime_type_data ); |
| 75 | |
| 76 | // If original image type fallback is not available, don't wrap in picture element. |
| 77 | if ( ! in_array( $original_file_mime_type, $sub_size_mime_types, true ) ) { |
| 78 | return $image; |
| 79 | } |
| 80 | |
| 81 | /** |
| 82 | * Filter the image mime types that can be used for the <picture> element. |
| 83 | * |
| 84 | * Default is: ['image/avif', 'image/webp']. Returning an empty array will skip using the `picture` element. |
| 85 | * |
| 86 | * The mime types will output in the picture element in the order they are provided. |
| 87 | * The original image will be used as the fallback image for browsers that don't support the picture element. |
| 88 | * |
| 89 | * @since 2.0.0 |
| 90 | * @since 2.1.0 The default value was updated, removing 'image/jpeg'. |
| 91 | * |
| 92 | * @param string[] $mime_types Mime types than can be used. |
| 93 | * @param int $attachment_id The id of the image being evaluated. |
| 94 | */ |
| 95 | $enabled_mime_types = (array) apply_filters( |
| 96 | 'webp_uploads_picture_element_mime_types', |
| 97 | array( |
| 98 | 'image/avif', |
| 99 | 'image/webp', |
| 100 | ), |
| 101 | $attachment_id |
| 102 | ); |
| 103 | |
| 104 | $mime_types = array_intersect( $enabled_mime_types, $sub_size_mime_types ); |
| 105 | |
| 106 | // No eligible mime types. |
| 107 | if ( count( $mime_types ) === 0 ) { |
| 108 | return $image; |
| 109 | } |
| 110 | |
| 111 | // If the original mime types is the only one available, no picture element is needed. |
| 112 | if ( 1 === count( $mime_types ) && current( $mime_types ) === $original_file_mime_type ) { |
| 113 | return $image; |
| 114 | } |
| 115 | |
| 116 | // Add each mime type to the picture's sources. |
| 117 | $picture_sources = ''; |
| 118 | |
| 119 | // Gets the srcset and sizes from the IMG tag. |
| 120 | $sizes = $processor->get_attribute( 'sizes' ); |
| 121 | $srcset = $processor->get_attribute( 'srcset' ); |
| 122 | |
| 123 | if ( null !== $srcset && null !== $sizes ) { |
| 124 | foreach ( $mime_types as $image_mime_type ) { |
| 125 | // Filter core's wp_get_attachment_image_srcset to return the sources for the current mime type. |
| 126 | $filter = static function ( $sources ) use ( $mime_type_data, $image_mime_type ): array { |
| 127 | $filtered_sources = array(); |
| 128 | foreach ( $sources as $source ) { |
| 129 | // Swap the URL for the current mime type. |
| 130 | if ( isset( $mime_type_data[ $image_mime_type ][ $source['descriptor'] ][ $source['value'] ] ) ) { |
| 131 | $filename = $mime_type_data[ $image_mime_type ][ $source['descriptor'] ][ $source['value'] ]['file']; |
| 132 | $filtered_sources[] = array( |
| 133 | 'url' => dirname( $source['url'] ) . '/' . $filename, |
| 134 | 'descriptor' => $source['descriptor'], |
| 135 | 'value' => $source['value'], |
| 136 | ); |
| 137 | } |
| 138 | } |
| 139 | return $filtered_sources; |
| 140 | }; |
| 141 | add_filter( 'wp_calculate_image_srcset', $filter ); |
| 142 | $image_srcset = wp_get_attachment_image_srcset( $attachment_id, $size_array, $image_meta ); |
| 143 | remove_filter( 'wp_calculate_image_srcset', $filter ); |
| 144 | if ( is_string( $image_srcset ) ) { |
| 145 | $picture_sources .= sprintf( |
| 146 | '<source type="%s" srcset="%s"%s>', |
| 147 | esc_attr( $image_mime_type ), |
| 148 | esc_attr( $image_srcset ), |
| 149 | is_string( $sizes ) ? sprintf( ' sizes="%s"', esc_attr( $sizes ) ) : '' |
| 150 | ); |
| 151 | } |
| 152 | } |
| 153 | } else { |
| 154 | foreach ( $mime_types as $image_mime_type ) { |
| 155 | $image_srcset = webp_uploads_get_mime_type_image( $attachment_id, $src, $image_mime_type ); |
| 156 | if ( is_string( $image_srcset ) ) { |
| 157 | $picture_sources .= sprintf( |
| 158 | '<source type="%s" srcset="%s">', |
| 159 | esc_attr( $image_mime_type ), |
| 160 | esc_attr( $image_srcset ) |
| 161 | ); |
| 162 | } |
| 163 | } |
| 164 | } |
| 165 | |
| 166 | return sprintf( |
| 167 | '<picture class="%s" style="display: contents;">%s%s</picture>', |
| 168 | esc_attr( 'wp-picture-' . $attachment_id ), |
| 169 | $picture_sources, |
| 170 | $image |
| 171 | ); |
| 172 | } |
| 173 |