[Support request] Unwanted padding around images

Home Forums Support Unwanted padding around images

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #1013701
    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.

    #1014084
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1014092
    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.

    #1014672
    Tom
    Lead Developer
    Lead Developer

    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?

    #1014705
    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.

    #1014937
    Tom
    Lead Developer
    Lead Developer

    Trying to think what would make this theme-specific.

    What if we add this?:

    remove_action( 'wp', 'generate_smart_content_width' );

    #1014952
    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.

    #1015348
    Tom
    Lead Developer
    Lead Developer

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

    Thanks! You too 🙂

    #1015377
    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” 😛

    #1015594
    Tom
    Lead Developer
    Lead Developer
    #1017164
    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.

    #1017815
    Tom
    Lead Developer
    Lead Developer

    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' );
    } );
    #1017827
    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. 🙂

    #1018151
    Tom
    Lead Developer
    Lead Developer

    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.

    #1018229
    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.

Viewing 15 posts - 1 through 15 (of 24 total)
  • You must be logged in to reply to this topic.