10
10
exit ; // Exit if accessed directly.
11
11
}
12
12
13
- /**
14
- * Adds auto to the sizes attribute to the image, if applicable.
15
- *
16
- * @since 1.0.0
17
- *
18
- * @param array<string, string>|mixed $attr Attributes for the image markup.
19
- * @return array<string, string> The filtered attributes for the image markup.
20
- */
21
- function auto_sizes_update_image_attributes ( $ attr ): array {
22
- if ( ! is_array ( $ attr ) ) {
23
- $ attr = array ();
24
- }
25
-
26
- // Bail early if the image is not lazy-loaded.
27
- if ( ! isset ( $ attr ['loading ' ] ) || 'lazy ' !== $ attr ['loading ' ] ) {
28
- return $ attr ;
29
- }
30
-
31
- // Bail early if the image is not responsive.
32
- if ( ! isset ( $ attr ['sizes ' ] ) ) {
33
- return $ attr ;
34
- }
35
-
36
- // Don't add 'auto' to the sizes attribute if it already exists.
37
- if ( auto_sizes_attribute_includes_valid_auto ( $ attr ['sizes ' ] ) ) {
38
- return $ attr ;
39
- }
40
-
41
- $ attr ['sizes ' ] = 'auto, ' . $ attr ['sizes ' ];
42
-
43
- return $ attr ;
44
- }
45
-
46
- /**
47
- * Adds auto to the sizes attribute to the image, if applicable.
48
- *
49
- * @since 1.0.0
50
- *
51
- * @param string|mixed $html The HTML image tag markup being filtered.
52
- * @return string The filtered HTML image tag markup.
53
- */
54
- function auto_sizes_update_content_img_tag ( $ html ): string {
55
- if ( ! is_string ( $ html ) ) {
56
- $ html = '' ;
57
- }
58
-
59
- $ processor = new WP_HTML_Tag_Processor ( $ html );
60
-
61
- // Bail if there is no IMG tag.
62
- if ( ! $ processor ->next_tag ( array ( 'tag_name ' => 'IMG ' ) ) ) {
63
- return $ html ;
64
- }
65
-
66
- // Bail early if the image is not lazy-loaded.
67
- $ value = $ processor ->get_attribute ( 'loading ' );
68
- if ( ! is_string ( $ value ) || 'lazy ' !== strtolower ( trim ( $ value , " \t\f\r\n" ) ) ) {
69
- return $ html ;
70
- }
71
-
72
- $ sizes = $ processor ->get_attribute ( 'sizes ' );
73
-
74
- // Bail early if the image is not responsive.
75
- if ( ! is_string ( $ sizes ) ) {
76
- return $ html ;
77
- }
78
-
79
- // Don't add 'auto' to the sizes attribute if it already exists.
80
- if ( auto_sizes_attribute_includes_valid_auto ( $ sizes ) ) {
81
- return $ html ;
82
- }
83
-
84
- $ processor ->set_attribute ( 'sizes ' , "auto, $ sizes " );
85
- return $ processor ->get_updated_html ();
86
- }
87
-
88
- // Skip loading plugin filters if WordPress Core already loaded the functionality.
89
- if ( ! function_exists ( 'wp_sizes_attribute_includes_valid_auto ' ) ) {
90
- add_filter ( 'wp_get_attachment_image_attributes ' , 'auto_sizes_update_image_attributes ' );
91
- add_filter ( 'wp_content_img_tag ' , 'auto_sizes_update_content_img_tag ' );
92
- }
93
-
94
- /**
95
- * Checks whether the given 'sizes' attribute includes the 'auto' keyword as the first item in the list.
96
- *
97
- * Per the HTML spec, if present it must be the first entry.
98
- *
99
- * @since 1.2.0
100
- *
101
- * @param string $sizes_attr The 'sizes' attribute value.
102
- * @return bool True if the 'auto' keyword is present, false otherwise.
103
- */
104
- function auto_sizes_attribute_includes_valid_auto ( string $ sizes_attr ): bool {
105
- list ( $ first_size ) = explode ( ', ' , $ sizes_attr , 2 );
106
- return 'auto ' === strtolower ( trim ( $ first_size , " \t\f\r\n" ) );
107
- }
108
-
109
13
/**
110
14
* Displays the HTML generator tag for the plugin.
111
15
*
@@ -120,135 +24,19 @@ function auto_sizes_render_generator(): void {
120
24
add_action ( 'wp_head ' , 'auto_sizes_render_generator ' );
121
25
122
26
/**
123
- * Gets the smaller image size if the layout width is bigger.
124
- *
125
- * It will return the smaller image size and return "px" if the layout width
126
- * is something else, e.g. min(640px, 90vw) or 90vw.
127
- *
128
- * @since 1.1.0
129
- *
130
- * @param string $layout_width The layout width.
131
- * @param int $image_width The image width.
132
- * @return string The proper width after some calculations.
27
+ * Filters related to the auto-sizes functionality.
133
28
*/
134
- function auto_sizes_get_width ( string $ layout_width , int $ image_width ): string {
135
- if ( str_ends_with ( $ layout_width , 'px ' ) ) {
136
- return $ image_width > (int ) $ layout_width ? $ layout_width : $ image_width . 'px ' ;
137
- }
138
- return $ image_width . 'px ' ;
139
- }
140
-
141
- /**
142
- * Filter the sizes attribute for images to improve the default calculation.
143
- *
144
- * @since 1.1.0
145
- *
146
- * @param string $content The block content about to be rendered.
147
- * @param array{ attrs?: array{ align?: string, width?: string } } $parsed_block The parsed block.
148
- * @return string The updated block content.
149
- */
150
- function auto_sizes_filter_image_tag ( string $ content , array $ parsed_block ): string {
151
- $ processor = new WP_HTML_Tag_Processor ( $ content );
152
- $ has_image = $ processor ->next_tag ( array ( 'tag_name ' => 'img ' ) );
153
-
154
- // Only update the markup if an image is found.
155
- if ( $ has_image ) {
156
- $ processor ->set_attribute ( 'data-needs-sizes-update ' , true );
157
- if ( isset ( $ parsed_block ['attrs ' ]['align ' ] ) ) {
158
- $ processor ->set_attribute ( 'data-align ' , $ parsed_block ['attrs ' ]['align ' ] );
159
- }
160
-
161
- // Resize image width.
162
- if ( isset ( $ parsed_block ['attrs ' ]['width ' ] ) ) {
163
- $ processor ->set_attribute ( 'data-resize-width ' , $ parsed_block ['attrs ' ]['width ' ] );
164
- }
165
-
166
- $ content = $ processor ->get_updated_html ();
167
- }
168
- return $ content ;
29
+ // Skip loading plugin filters if WordPress Core already loaded the functionality.
30
+ if ( ! function_exists ( 'wp_img_tag_add_auto_sizes ' ) ) {
31
+ add_filter ( 'wp_get_attachment_image_attributes ' , 'auto_sizes_update_image_attributes ' );
32
+ add_filter ( 'wp_content_img_tag ' , 'auto_sizes_update_content_img_tag ' );
169
33
}
170
- add_filter ( 'render_block_core/image ' , 'auto_sizes_filter_image_tag ' , 10 , 2 );
171
- add_filter ( 'render_block_core/cover ' , 'auto_sizes_filter_image_tag ' , 10 , 2 );
172
34
173
35
/**
174
- * Filter the sizes attribute for images to improve the default calculation.
175
- *
176
- * @since 1.1.0
177
- *
178
- * @param string $content The block content about to be rendered.
179
- * @return string The updated block content.
36
+ * Filters related to the improved image sizes functionality.
180
37
*/
181
- function auto_sizes_improve_image_sizes_attributes ( string $ content ): string {
182
- $ processor = new WP_HTML_Tag_Processor ( $ content );
183
- if ( ! $ processor ->next_tag ( array ( 'tag_name ' => 'img ' ) ) ) {
184
- return $ content ;
185
- }
186
-
187
- $ remove_data_attributes = static function () use ( $ processor ): void {
188
- $ processor ->remove_attribute ( 'data-needs-sizes-update ' );
189
- $ processor ->remove_attribute ( 'data-align ' );
190
- $ processor ->remove_attribute ( 'data-resize-width ' );
191
- };
192
-
193
- // Bail early if the responsive images are disabled.
194
- if ( null === $ processor ->get_attribute ( 'sizes ' ) ) {
195
- $ remove_data_attributes ();
196
- return $ processor ->get_updated_html ();
197
- }
198
-
199
- // Skips second time parsing if already processed.
200
- if ( null === $ processor ->get_attribute ( 'data-needs-sizes-update ' ) ) {
201
- return $ content ;
202
- }
203
-
204
- $ align = $ processor ->get_attribute ( 'data-align ' );
205
-
206
- // Retrieve width from the image tag itself.
207
- $ image_width = $ processor ->get_attribute ( 'width ' );
208
- if ( ! is_string ( $ image_width ) && ! in_array ( $ align , array ( 'full ' , 'wide ' ), true ) ) {
209
- return $ content ;
210
- }
211
-
212
- $ layout = wp_get_global_settings ( array ( 'layout ' ) );
213
-
214
- $ sizes = null ;
215
- // Handle different alignment use cases.
216
- switch ( $ align ) {
217
- case 'full ' :
218
- $ sizes = '100vw ' ;
219
- break ;
220
-
221
- case 'wide ' :
222
- if ( array_key_exists ( 'wideSize ' , $ layout ) ) {
223
- $ sizes = sprintf ( '(max-width: %1$s) 100vw, %1$s ' , $ layout ['wideSize ' ] );
224
- }
225
- break ;
226
-
227
- case 'left ' :
228
- case 'right ' :
229
- case 'center ' :
230
- // Resize image width.
231
- $ image_width = $ processor ->get_attribute ( 'data-resize-width ' ) ?? $ image_width ;
232
- $ sizes = sprintf ( '(max-width: %1$dpx) 100vw, %1$dpx ' , $ image_width );
233
- break ;
234
-
235
- default :
236
- if ( array_key_exists ( 'contentSize ' , $ layout ) ) {
237
- // Resize image width.
238
- $ image_width = $ processor ->get_attribute ( 'data-resize-width ' ) ?? $ image_width ;
239
- $ width = auto_sizes_get_width ( $ layout ['contentSize ' ], (int ) $ image_width );
240
- $ sizes = sprintf ( '(max-width: %1$s) 100vw, %1$s ' , $ width );
241
- }
242
- break ;
243
- }
244
-
245
- if ( is_string ( $ sizes ) ) {
246
- $ processor ->set_attribute ( 'sizes ' , $ sizes );
247
- }
248
-
249
- $ remove_data_attributes ();
250
-
251
- return $ processor ->get_updated_html ();
252
- }
253
- // Run filter prior to auto sizes "auto_sizes_update_content_img_tag" filter.
254
- add_filter ( 'wp_content_img_tag ' , 'auto_sizes_improve_image_sizes_attributes ' , 9 );
38
+ add_filter ( 'the_content ' , 'auto_sizes_prime_attachment_caches ' , 9 ); // This must run before 'do_blocks', which runs at priority 9.
39
+ add_filter ( 'render_block_core/image ' , 'auto_sizes_filter_image_tag ' , 10 , 3 );
40
+ add_filter ( 'render_block_core/cover ' , 'auto_sizes_filter_image_tag ' , 10 , 3 );
41
+ add_filter ( 'get_block_type_uses_context ' , 'auto_sizes_filter_uses_context ' , 10 , 2 );
42
+ add_filter ( 'render_block_context ' , 'auto_sizes_filter_render_block_context ' , 10 , 2 );
0 commit comments