[wp-trac] [WordPress Trac] #36982: Add image attributes and additional context to the wp_calculate_image_srcset and wp_calculate_image_sizes filters

[WordPress Trac]

#36982: Add image attributes and additional context to the
wp_calculate_image_srcset and wp_calculate_image_sizes filters
-------------------------+------------------------------
 Reporter:  kylereicks   |       Owner:
     Type:  enhancement  |      Status:  new
 Priority:  normal       |   Milestone:  Awaiting Review
Component:  Media        |     Version:  trunk
 Severity:  normal       |  Resolution:
 Keywords:               |     Focuses:  template
-------------------------+------------------------------

Comment (by kylereicks):

 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.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/36982#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform