Unwanted padding around images

[Alexander]

Hello,

I’m at a loss figuring out a sizing discrepancy between images in galleries, images with captions, and on attachment pages alike.

My image size “large” in WP’s Media settings is configured to be 980 pixels.

In galleries that use “large” images (in a single column, which is neat for desktops & mobile devices alike), in posts where I insert single images with a caption, and on my attachment pagess, the actual size that the images are shown isn’t 980 pixels though.

In galleries and on attachment pages, the size shown is 960 pixels.

In posts with a single captioned image, the size is 970 pixels.

Example gallery: https://www.alex-kunz.com/sunset-alkali-flats-salton-sea/

Example captioned image in post: https://www.alex-kunz.com/full-moon-night-desert/

Example attachment page: https://www.alex-kunz.com/photos/summer-dawn-at-garnet-peak/#main

How do I get rid of this padding, or whatever it is, and have my 980 pixels size “large” images actually shown 980 pixels wide?

Thanks
Alexander.

[Tom]

Hi there,

That’s strange – can you try adding this PHP to your site?:

remove_filter( 'img_caption_shortcode_width', 'generate_remove_caption_padding' );

Let me know if it does anything 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alexander]

Hello Tom,

that didn’t do anything, unfortunately.

I notice that, in the attachment page and gallery alike, there’s a sizes="(max-width: 960px) 100vw, 960px" inside the <img> tag. In the single image, a style="width: 970px" is in the <figure> tag.

Thanks for your help
Alex.

[Tom]

Hmm, I’m not sure what could be causing that.

You can overwrite the style tag like this:

figure.wp-caption {
    width: auto !important;
}

Maybe the gallery block in Gutenberg is worth checking out?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alexander]

That’s a step forward. 🙂 It fixes it for single images in a post, but not for galleries and the attachment pages.

However, the caption text is then left-aligned now, instead of matching the alignment of the photo (center in this example) https://www.alex-kunz.com/full-moon-night-desert/

One of the main reasons why I’m not using Gutenberg (there are many others…) is that it puts the captions OVER the image. It’s absolutely horrible and I don’t know what drunk designer thought that was a great idea, visually.

In fact, Github has a number of requests to change that, which have been closed. Ridiculous. Here’s one that illustrates the problem nicely:
https://github.com/WordPress/gutenberg/issues/8030

It would be great if you could figure out where that max-width thing comes from. I don’t think that was in my old theme.

Thanks
Alex.

[Tom]

Trying to think what would make this theme-specific.

What if we add this?:

remove_action( 'wp', 'generate_smart_content_width' );

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alexander]

No luck, unfortunately. The max-width in galleries and attachment pages remained unaffected at 960, instead of 980.

Thanks for your continued help – no rush, have a nice weekend!
Alex.

[Tom]

Just to confirm, this issue goes away if you temporarily switch to a Twenty-x theme?

Thanks! You too 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alexander]

Ugh. I don’t know. I’ll have to try, but I won’t be able to do that until next week.

“I’ll be back” 😛

[Tom]

Sounds good 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alexander]

Hello Tom,

I wasn’t able to try this with a Twenty-something theme because they’re all either too narrow, or don’t have useful attachment pages. I did test it with my old theme (Portfolio Press) in a local WP installation and I don’t see this behavior with that theme.

What I did see is that the “max-width” parameter (or whatever it is) seems to be defined by the size of the photo in the post or gallery.

For example, if I insert a photo as “large” (980 pixels wide) in either a gallery or as a captioned image in a post, then “max-width” is also set to 980 pixels. When I insert a photo as “full size” then “max-width” takes on whatever that size is (1500 pixels in my test).

So it would appear to me that something is off with the content-width, or whatever is used to determine the max-width value in GeneratePress.

Not sure how helpful that is…
Alex.

PS: the width on my site is set to 1200 pixels (Customize / Layout / Container) and I don’t use a sidebar on my photo posts and attachment pages.

[Tom]

The only part of GP that sets the content width is what we tried removing above: https://generatepress.com/forums/topic/unwanted-padding-around-images/#post-1014937

Maybe we can try to fire it later:

add_action( 'wp', function() {
    remove_action( 'wp', 'generate_smart_content_width' );
} );

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alexander]

Hello Tom,

that didn’t make any difference either, unfortunately. “max-width” still “maxes out” at 960 pixels.

I’ve been looking at this on my wife’s site in the meantime (also with GeneretePress) and interestingly, while the width configuration is the same (1200 pixels and no sidebar), her “large” image size is 1024 pixels, and “max-width” is set accordingly for a gallery that uses “large” images.

Here’s my gallery again, where max-width limits the images to 960 pixels (when it should be 980 pixels)
https://www.alex-kunz.com/sunset-alkali-flats-salton-sea/

Here’s a gallery on her site, where max-width is 1024 pixels, just like the image size.
https://shuwenwu.com/2018/09/cuyamaca-peak-night-hike/

It’s a riddle. 🙂

[Tom]

Both sites using the same versions? Same plugins? I’m not sure what the issue is here, so you may need to find the differences between each site and disable them one by one until the issue fixes itself.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alexander]

I figured it out (I think).

On my site, I have a Layout Element in place that disables the sidebar for certain post categories, as well as media (attachment pages). So no sidebar is visible, but somehow, it’s still messing with the max-width.

When I disable the sidebar individually in the post (Disable Elements set to “Content no sidebar”) the gallery images then have the proper max-width set.

This is independently of disabling the smart content width (via the snippet you gave me earlier).

It only fixes the problem for gallery images though, and not for single, captioned images in a post.

You can compare here:

https://www.alex-kunz.com/sunset-alkali-flats-salton-sea/ -> unchanged, sidebar disabled via Layout Element, results in max-width being wrongly set to 960 pixels.

https://www.alex-kunz.com/test/ (please use password “generate”) -> additionally manually disabled sidebar directly in the post, max-width is set to 980 pixels.

(the content of the test is a copy of the other one)

I hope this is something you can work with.

Cheers
Alex.

[Author]

Posts