Site logo

Archived topic

Image caption width too small by 10px

7 replies · Started by Mateusz on June 22, 2018

Viewing posts 1–8 of 8

On my website managed by Wordpress + latest GeneratePress/GP Premium, I noticed that images with captions are placed in <figure> tags with "width" set to 10px less than the actual widths of the images. This leads to the browser resizing the images by 10px, which degrades the quality of the graphics.

I've done some root-cause analysis and it seems that the problem is caused by a misunderstanding between the code in wp-includes/media.php and wp-content/themes/generatepress/inc/general.php.

GeneratePress declares support for html5+caption in wp-content/themes/generatepress/functions.php:

34 add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );

The logic of calculating the width of caption containers is found in wp-includes/media.php:

  1558          $html5 = current_theme_supports( 'html5', 'caption' );
  1559          // HTML5 captions never added the extra 10px to the image width
  1560          $width = $html5 ? $atts['width'] : ( 10 + $atts['width'] );
  1561
  1562          /**
  1563           * Filters the width of an image's caption.
  1564           *
  1565           * By default, the caption is 10 pixels greater than the width of the image,
  1566           * to prevent post content from running up against a floated image.
  1567           *
  1568           * @since 3.7.0
  1569           *
  1570           * @see img_caption_shortcode()
  1571           *
  1572           * @param int    $width    Width of the caption in pixels. To remove this inline style,
  1573           *                         return zero.
  1574           * @param array  $atts     Attributes of the caption shortcode.
  1575           * @param string $content  The image element, possibly wrapped in a hyperlink.
  1576           */
  1577          $caption_width = apply_filters( 'img_caption_shortcode_width', $width, $atts, $content );

As shown, the extra 10px are only added if html5+caption support is not declared, which is not the case here; hence the width remains equal to $atts['width'].

Then in line 1577, the width filters are invoked, among which is the generate_remove_caption_padding filter found in wp-content/themes/generatepress/inc/general.php:

   188          add_filter( 'img_caption_shortcode_width', 'generate_remove_caption_padding' );
   189          /**
   190           * Remove WordPress's default padding on images with captions
   191           *
   192           * @param int $width Default WP .wp-caption width (image width + 10px)
   193           * @return int Updated width to remove 10px padding
   194           */
   195          function generate_remove_caption_padding( $width ) {
   196                  return $width - 10;
   197          }

In the current form, the callback unconditionally subtracts 10 from the width, even if it is not really added by Wordpress in this case, resulting in the mismatch between the <figure> and widths.

The above was a quick analysis, apologies for any potential mistakes.

To mitigate the problem for now, I've registered my own callback that adds the 10px back, but if I'm not mistaken and it is a bug in the theme, I'd love to see it resolved soon. :)

Thanks!

Hi there,

Thanks for this! We originally added that filter to fix a bug users were encountering. I'll do some tests to see if it's necessary anymore :)

Great. Could you ping me / this thread in case this is fixed in the next version of GP, so that I remember to disable my temporary workaround then?

Absolutely :)

I just noticed the same thing and found this thread with a search. Just wondered what the final resolution was on this. Seems that t he images are still being sized 10 px small.

Thanks
John

Hi John,

This topic is very old and I'm sure since has changed since 2018.

Can you open a new topic for your question?

Thanks :)

Hi Lea,

I can, but the concern is identical. Anyway, not a big deal

Thanks :)

This archived topic is closed to new replies.