WordPress.org

Make WordPress Core

Opened 2 years ago

Last modified 10 months ago

#36982 assigned enhancement

Add image attributes and additional context to the wp_calculate_image_srcset and wp_calculate_image_sizes filters

Reported by: kylereicks Owned by: adamsilverstein
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.6
Component: Media Keywords: has-patch 2nd-opinion
Focuses: template Cc:

Description

Because the srcset and sizes attributes try to give the browser guidance on how CSS is going to handle images, we should be able to take into account image class attributes (and other attributes that could be used as CSS selectors) when using the wp_calculate_image_srcset and wp_calculate_image_sizes filters to set the appropriate srcset and sizes.

It would also be helpful to be able to supply a context to functions like wp_image_add_srcset_and_sizes and wp_make_content_images_responsive so we can calculate different srcset and sizes attributes if a medium sized image is in the main content section vs. in an aside or other section.

Attachments (2)

media-srcset-sizes.patch (6.7 KB) - added by kylereicks 2 years ago.
Adds image attributes and additional context to wp_calculate_image_srcset and wp_calculate_image_sizes filters
media-srcset-sizes.2.patch (13.3 KB) - added by kylereicks 10 months ago.
Update patch to remove the "context" attribute. Add a test to make sure that srcsets and sizes can be successfully updated via filters.

Download all attachments as: .zip

Change History (8)

@kylereicks
2 years ago

Adds image attributes and additional context to wp_calculate_image_srcset and wp_calculate_image_sizes filters

#1 @kylereicks
2 years ago

As an example, if a theme had a multi column layout like the following:

img, figure{
	max-width: 100%;
	height: auto;
}
.alignright{
	max-width: calc(100% + 3em);
	float: right;
	margin-right: -6em;
}
.entry-content{
	max-width: 350px;
	margin: 0 auto;
	padding: 1em 0;
	columns: 1;
	column-gap: 12em;
}
@media screen and (min-width: 600px){
	.alignright{
		max-width: 150%;
		margin-right: -50%;
	}
}
@media screen and (min-width: 900px){
	.alignright{
		max-width: calc(100% + 6em);
		float: right;
		margin-right: -6em;
	}
	.entry-content{
		max-width: none;
		columns: 2;
		margin: 0 6em;
	}
}
@media screen and (min-width: 1200px){
	.entry-content{
		columns: 3;
		column-gap: 6em;
	}
	.alignright{
		max-width: calc(100% + 3em);
		float: right;
		margin-right: -3em;
	}

}

An image with no alignment class might have a sizes attribute like (min-width: 1200px) calc((100vw / 3) - 3em), (min-width: 900px) calc((100vw / 2) - 6em), (min-width: 350px) 350px, 100vw whereas an image with the class .alignright might need a slightly different sizes attribute a more like (min-width: 1200px) calc(100vw / 3), (min-width: 900px) calc(100vw / 2), (min-width: 600px) 525px, (min-width: 350px) calc(350px + 3em), 100vw

Without access to the image attributes (class, id etc.) when filtering srcset and sizes, we cannot tell the difference between a medium sized image and a medium sized image with the class .alignright even though they may be sized differently at some breakpoints.

#2 @kylereicks
2 years ago

  • Keywords dev-feedback added

#3 @herrschuessler
17 months ago

I second @kylereicks considerations. There are many use cases where responsive images will need a different sizes attribute based on their alignment value, e.g. when floated images are displayed smaller than non-aligned, full-column images. Therefore, the alignment value should be available in wp_calculate_image_sizes.

#4 @greatestview
17 months ago

+1

Currently there is no way to tell exactly, which image is small and wide in wp_calculate_image_sizes. It’s the same with wp_get_attachment_image_attributes. I would appreciate providing the classes of that image as an additional argument, or maybe better, the whole image html code.

#5 @adamsilverstein
15 months ago

  • Keywords has-patch needs-unit-tests 2nd-opinion added; dev-feedback removed
  • Owner set to adamsilverstein
  • Status changed from new to assigned

@kylereicks Thanks for your ticket and patch and welcome to trac!

Overall the patch looks good and the use case makes sense... this seems like a valuable addition to the filter. Can you give an example of how you would use the context variable, or why you added that?

It would be good to add some unit tests that demonstrate how filter change is used: how the patch enables altering the sizes based on both attr values and context.

@kylereicks
10 months ago

Update patch to remove the "context" attribute. Add a test to make sure that srcsets and sizes can be successfully updated via filters.

#6 @kylereicks
10 months ago

  • Keywords needs-unit-tests removed

I added a new patch to remove the "context" attribute. It may not end up being useful for most cases and is not a critical addition. The new patch also adds unit tests to confirm that the wp_calculate_image_srcset and wp_calculate_image_sizes filters can access an image's class attribute and update their values based on that attribute.

Note: See TracTickets for help on using tickets.