[wp-trac] [WordPress Trac] #43185: max-width is causing issue with caption and narrow layouts (was: #42700 is causing issue with caption and narrow layouts)

[WordPress Trac]

#43185: max-width is causing issue with caption and narrow layouts
---------------------------+------------------------------
 Reporter:  brunochartier  |       Owner:
     Type:  defect (bug)   |      Status:  new
 Priority:  normal         |   Milestone:  Awaiting Review
Component:  Media          |     Version:  4.9
 Severity:  normal         |  Resolution:
 Keywords:                 |     Focuses:  ui
---------------------------+------------------------------
Changes (by ocean90):

 * version:  4.9.1 => 4.9
 * component:  Shortcodes => Media


Old description:

> wp-includes/media.php was modified in 4.9.1 (see below). This results in
> messing up caption which are pushed to the right when using narrow
> window. Since the change is on element, not CSS, this is impossible to
> overwrite with CSS.
>
> Github commit:
> [https://github.com/WordPress/WordPress/commit/760f9fd3fd743a1de8dd46e61018b232bf38420a
> #diff-297bf46a572d5f80513d3fed476cd2a2]
>
> {{{
> @@ -1578,7 +1578,7 @@ function img_caption_shortcode( $attr, $content =
> null ) {
>
>         $style = '';
>         if ( $caption_width ) {
> -               $style = 'style="width: ' . (int) $caption_width . 'px"
> ';
> +               $style = 'style="max-width: ' . (int) $caption_width .
> 'px" ';
>         }
>
>         if ( $html5 ) {
>
> }}}
>
> Before 4.9.1:
> [[Image(https://lh3.googleusercontent.com/p_DCrbp1XuYpot9wCb1oLh5MoRrP-
> LfFdfx_emOALBki8inhh9wA5e9Kx9w6vdcKEr970YBFwNeWXFcjKXChjm2_js_-Y27_-
> qJesSdCQxwA0taPi1Jdxe4EKPRmqqDfROMvm5ewn3gHdHmCoeW0r8MzJWNppIVcLnD3XZCZnKn8q6
> -zZivxzlX7vcvyUv7ZYWkN9tYgL4doKesoSqAfWwpcAUdThdmgG2CJZuoewMRborqG6jzF8HueORESCQQ-
> Eu3umOBec0nExg0II3LVyVVMAIzgkLB8PwkEoDSu5J-Ogy585r-
> GxIRofCKowlXZUPNdf4jW2HbhK5ztNT065kYlI0G9Uf6RFoR9fy-
> IwtGQU94YM7y5UYbp83FMlfu_f9vfbGycNFemYLBuqxFzEV1lGmCYjTI2p6oJ7wyzwmRmfNVa6uq-
> HsdX_ontf39kQnGec4UoQ9KoK8z_kSDAtI_HcMYOD9GZpUey7z9Oh7QeEP2A1Jye5x_8ZDWo-
> Sd8L_EqzmGWPKHoqnK0d7Jz9gx9bPmh17DKsdsOz4A9iuVpduJU9S7YQ7rqzpf8BpohOmPMtaZdXfneiVEK5jWFI7RRdaZnQDWPUKyb0Ul1=w3110-h1980-no)]]
>
> After 4.9.1 and changes to media.php:
>
> [[Image(https://lh3.googleusercontent.com/BRTRsTdvSUkgurlwhVNTFvd4WK-
> rwjnXoAdFAdyCBy3UpGiifoDsG3SgjQe5qjiwIM-S9eK1TNidys53-fKgqGqHojdJ46nz-
> mEuL5JlWBSQb6nEf-ZLHCQQUNUac_mXkoqpPLp_vXVD6x-
> hEwU66PeQdSjamOa6v4TfRKKPVYKIwiXLIRc1pkHdafHPUhpVME3851bzYx4kPyDFQjRN7BFHZgYGOFlt_0kFNjG8_3s8GSUM5tVW_9FTYrMz8CMqBTotw6Xygqbgm72FoSD_Hq0N2gNeV2uYAUYvB6hQL8tMgkYNyGvh4Q-
> YZOAi34_FuE13sTzB1Ij9yQzKCV9Rvr5UVNSNOFfvOCFLHduxWTBqxTubUH3SaeMc6ocNZpZfpGB-
> 3t3iTb79z8_sZs9eLwEzlFXr8BIYl-
> Lv2MAt26o5nlAOLspcbz52rglWW1HJPPVQc5YJQaUK6LRh9gNgPKG-
> SfhT8Cg_1ABMLusXQLLnOC7Co0_AmT2FrpyVUE470KedPwxF4JzF1_2JsAGRL5JF7zw5T8FPu18m4oByk9kSvD1W2oaw4s0BGs8Blzk-
> N88KMs9qPVK0FBYzV2R9KXkg7fydqkL9EWIVDiJO=w3110-h1980-no)]]
>

> I understand it has to use the shortcode caption width param so using CSS
> is complicated. Suggestion: please consider changing the  caption width
> filter to a "style" filter so that is can be overwritten by the theme?
> ex:
>

> {{{
> diff --git a/wp-includes/media.php b/wp-includes/media.php
> index e465e09..a2c6692 100755
> --- a/wp-includes/media.php
> +++ b/wp-includes/media.php
> @@ -1578,8 +1578,20 @@ function img_caption_shortcode( $attr, $content =
> null ) {
>
>   $style = '';
>   if ( $caption_width ) {
>     $style = 'style="max-width: ' . (int) $caption_width . 'px" ';
>   }
> + /**
> +  * Filters the style of an image's caption.
> +  *
> +  * @see img_caption_shortcode()
> +  *
> +  * @param string $style    the default style attribute
> +  * @param int    $width    Width of the caption in pixels. To remove
> this inline style,
> +  *                         return zero.
> +  * @param array  $atts     Attributes of the caption shortcode.
> +  * @param string $content  The image element, possibly wrapped in a
> hyperlink.
> +  */
> + $style = apply_filters( 'img_caption_shortcode_style', $style, $width,
> $atts, $content );
>
>   if ( $html5 ) {
>     $html = '<figure ' . $atts['id'] . $style . 'class="' . esc_attr(
> $class ) . '">'
>
> }}}
>

> Thanks,
>
> Bruno

New description:

 wp-includes/media.php was modified in 4.9 (see #33981). This results in
 messing up caption which are pushed to the right when using narrow window.
 Since the change is on element, not CSS, this is impossible to overwrite
 with CSS.

 Github commit:
 [https://github.com/WordPress/WordPress/commit/760f9fd3fd743a1de8dd46e61018b232bf38420a
 #diff-297bf46a572d5f80513d3fed476cd2a2]

 {{{
 @@ -1578,7 +1578,7 @@ function img_caption_shortcode( $attr, $content =
 null ) {

         $style = '';
         if ( $caption_width ) {
 -               $style = 'style="width: ' . (int) $caption_width . 'px" ';
 +               $style = 'style="max-width: ' . (int) $caption_width .
 'px" ';
         }

         if ( $html5 ) {

 }}}

 Before 4.9:
 [[Image(https://lh3.googleusercontent.com/p_DCrbp1XuYpot9wCb1oLh5MoRrP-
 LfFdfx_emOALBki8inhh9wA5e9Kx9w6vdcKEr970YBFwNeWXFcjKXChjm2_js_-Y27_-
 qJesSdCQxwA0taPi1Jdxe4EKPRmqqDfROMvm5ewn3gHdHmCoeW0r8MzJWNppIVcLnD3XZCZnKn8q6
 -zZivxzlX7vcvyUv7ZYWkN9tYgL4doKesoSqAfWwpcAUdThdmgG2CJZuoewMRborqG6jzF8HueORESCQQ-
 Eu3umOBec0nExg0II3LVyVVMAIzgkLB8PwkEoDSu5J-Ogy585r-
 GxIRofCKowlXZUPNdf4jW2HbhK5ztNT065kYlI0G9Uf6RFoR9fy-
 IwtGQU94YM7y5UYbp83FMlfu_f9vfbGycNFemYLBuqxFzEV1lGmCYjTI2p6oJ7wyzwmRmfNVa6uq-
 HsdX_ontf39kQnGec4UoQ9KoK8z_kSDAtI_HcMYOD9GZpUey7z9Oh7QeEP2A1Jye5x_8ZDWo-
 Sd8L_EqzmGWPKHoqnK0d7Jz9gx9bPmh17DKsdsOz4A9iuVpduJU9S7YQ7rqzpf8BpohOmPMtaZdXfneiVEK5jWFI7RRdaZnQDWPUKyb0Ul1=w3110-h1980-no)]]

 After 4.9.1 and changes to media.php:

 [[Image(https://lh3.googleusercontent.com/BRTRsTdvSUkgurlwhVNTFvd4WK-
 rwjnXoAdFAdyCBy3UpGiifoDsG3SgjQe5qjiwIM-S9eK1TNidys53-fKgqGqHojdJ46nz-
 mEuL5JlWBSQb6nEf-ZLHCQQUNUac_mXkoqpPLp_vXVD6x-
 hEwU66PeQdSjamOa6v4TfRKKPVYKIwiXLIRc1pkHdafHPUhpVME3851bzYx4kPyDFQjRN7BFHZgYGOFlt_0kFNjG8_3s8GSUM5tVW_9FTYrMz8CMqBTotw6Xygqbgm72FoSD_Hq0N2gNeV2uYAUYvB6hQL8tMgkYNyGvh4Q-
 YZOAi34_FuE13sTzB1Ij9yQzKCV9Rvr5UVNSNOFfvOCFLHduxWTBqxTubUH3SaeMc6ocNZpZfpGB-
 3t3iTb79z8_sZs9eLwEzlFXr8BIYl-
 Lv2MAt26o5nlAOLspcbz52rglWW1HJPPVQc5YJQaUK6LRh9gNgPKG-
 SfhT8Cg_1ABMLusXQLLnOC7Co0_AmT2FrpyVUE470KedPwxF4JzF1_2JsAGRL5JF7zw5T8FPu18m4oByk9kSvD1W2oaw4s0BGs8Blzk-
 N88KMs9qPVK0FBYzV2R9KXkg7fydqkL9EWIVDiJO=w3110-h1980-no)]]


 I understand it has to use the shortcode caption width param so using CSS
 is complicated. Suggestion: please consider changing the  caption width
 filter to a "style" filter so that is can be overwritten by the theme? ex:


 {{{
 diff --git a/wp-includes/media.php b/wp-includes/media.php
 index e465e09..a2c6692 100755
 --- a/wp-includes/media.php
 +++ b/wp-includes/media.php
 @@ -1578,8 +1578,20 @@ function img_caption_shortcode( $attr, $content =
 null ) {

   $style = '';
   if ( $caption_width ) {
     $style = 'style="max-width: ' . (int) $caption_width . 'px" ';
   }
 + /**
 +  * Filters the style of an image's caption.
 +  *
 +  * @see img_caption_shortcode()
 +  *
 +  * @param string $style    the default style attribute
 +  * @param int    $width    Width of the caption in pixels. To remove
 this inline style,
 +  *                         return zero.
 +  * @param array  $atts     Attributes of the caption shortcode.
 +  * @param string $content  The image element, possibly wrapped in a
 hyperlink.
 +  */
 + $style = apply_filters( 'img_caption_shortcode_style', $style, $width,
 $atts, $content );

   if ( $html5 ) {
     $html = '<figure ' . $atts['id'] . $style . 'class="' . esc_attr(
 $class ) . '">'

 }}}


 Thanks,

 Bruno

--

Comment:

 Related: #42700

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