WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

#43185 closed defect (bug) (duplicate)

max-width is causing issue with caption and narrow layouts

Reported by: brunochartier Owned by:
Milestone: Priority: normal
Severity: normal Version: 4.9
Component: Media Keywords: has-patch
Focuses: ui Cc:

Description (last modified by ocean90)

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:
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:

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

Attachments (1)

43185.diff (1.0 KB) - added by jainnidhi 4 years ago.

Download all attachments as: .zip

Change History (5)

#1 @ocean90
4 years ago

  • Component changed from Shortcodes to Media
  • Description modified (diff)
  • Summary changed from #42700 is causing issue with caption and narrow layouts to max-width is causing issue with caption and narrow layouts
  • Version changed from 4.9.1 to 4.9

Related: #42700

@jainnidhi
4 years ago

#2 @jainnidhi
4 years ago

  • Keywords has-patch added

#3 @jakeqz
4 years ago

See also #43123. I suggest also reverting the default behaviour so that existing themes are not broken, as well as adding the filter proposed here (so that anyone who really needs the new behaviour can use it).

#4 @desrosj
4 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to duplicate
  • Status changed from new to closed

Thanks for the ticket, @brunochartier. I am going to close this as a duplicate and it will be addressed in #43123.

Note: See TracTickets for help on using tickets.