[Support request] Unwanted padding around images

[Tom]

Hmm, doesn’t make much sense – the Layout Element does the same thing that the individual sidebar layout option does. Super strange.

What if you do this?:

add_action( 'wp', function() {
    global $content_width;

    $content_width = 980;
}, 20 );

[Alexander]

That fixes it for galleries and attachment pages. Everything else looks normal too. Could there be any unwanted side effects? 😛

Single captioned images are still 10 pixels too small (970 pixels instead of 980, which makes them a bit soft).
For example https://www.alex-kunz.com/oh-mockingbird/

(the fix for that one you gave me in https://generatepress.com/forums/topic/unwanted-padding-around-images/#post-1014672 works but disconnects the caption text itself from the image; ie. the image is centered then – as it should – but the caption text becomes left-aligned)

Thanks for your continued help
Alex.

[Tom]

Shouldn’t be any side effects.

And this doesn’t remove the need for that CSS?: https://generatepress.com/forums/topic/unwanted-padding-around-images/#post-1014084

[Alexander]

No the remove_filter snippet didn’t and doesn’t change anything, unfortunately.

I left the CSS fix you gave me in https://generatepress.com/forums/topic/unwanted-padding-around-images/#post-1014672 active so you can see how figcaption gets “disconnected” from the photo’s alignment: https://www.alex-kunz.com/oh-mockingbird/

Thanks
Alex.

[Tom]

Try this instead:

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

[Alexander]

Thanks Tom 🙂

I’m beginning to fear that I’ll drive you nuts and that I appear to be too picky – but this solution would limit the width of the image as well.

Sorry if I wasn’t cleared to begin with: I don’t want to limit *ALL* images to 980 pixels width – I just want them to be shown at the size that I defined as “large” without scaling (when the 980 pixels wide version gets scaled down by just a couple of pixels, to 960 or 970 in my case, it doesn’t appear as crisp – on a photography site, these details matter).

A size of ~1000 pixels width is a good compromise to fit the entire photo on a smaller screen in its entirety – say on an iPad in horizontal orientation (it’s actually too wide already for phones, but I found that people rarely rotate their phones to horizontal).

Now if I have a panorama, or other photo that is using an aspect ratio wider than 3:2 (ie. not as high), I’ll want to be able to show it wider than 980 pixels, to fill larger screens with more of the photo.

So in addition to your original CSS fix, I added CSS to make the caption-text center-aligned instead – which actually matches the center-aligned caption of photos in a gallery, so it’s visually more consistent too. I should’ve thought of that sooner.

.wp-caption .wp-caption-text {
    text-align: center;
}

(and for the attachment pages, I created a new class .wp-att-caption-text where I left-align the text)

I hope you don’t mind me saying this, but perhaps you can get to the bottom of why a “large” captioned image is reduced by 10 pixels in width. If that’s beyond what you can do right now via the support forum I understand. Maybe something for the to-do list in the next theme update? 🙂

Thanks again
Alex.

[Tom]

I’ll definitely dig into this before our next theme update. We’ve tried disabling everything the theme might do to adjust the figure width, but hopefully, I find something.

Luckily, the image block in Gutenberg no longer uses weird inline widths like this, so it shouldn’t be an issue in the future (unless you continue to use the Classic Editor).

[Alexander]

I’m still on team Classic Editor, and for the foreseeable future too I guess… 😛

(from a user perspective who writes simple posts with images, Gutenberg is a click-orgy that just makes me nervous – it’s completely over the top for my everyday usage, constantly gets in the way of simply getting things done, and I’m sure I sound like a cranky old man now!;-))

[Tom]

I get it 🙂

It should become more and more usable as time goes on I’d think.

[Author]

Posts