- This topic has 23 replies, 2 voices, and was last updated 3 years, 4 months ago by
Tom.
-
AuthorPosts
-
September 19, 2019 at 8:41 am #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.September 19, 2019 at 6:48 pm #1014084Tom
Lead DeveloperLead DeveloperHi 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-developmentSeptember 19, 2019 at 7:06 pm #1014092Alexander
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, astyle="width: 970px"
is in the<figure>
tag.Thanks for your help
Alex.September 20, 2019 at 9:56 am #1014672Tom
Lead DeveloperLead DeveloperHmm, 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-developmentSeptember 20, 2019 at 10:21 am #1014705Alexander
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/8030It 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.September 20, 2019 at 7:10 pm #1014937Tom
Lead DeveloperLead DeveloperTrying 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-developmentSeptember 20, 2019 at 8:42 pm #1014952Alexander
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.September 21, 2019 at 9:25 am #1015348Tom
Lead DeveloperLead DeveloperJust 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-developmentSeptember 21, 2019 at 9:58 am #1015377Alexander
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” π
September 21, 2019 at 6:00 pm #1015594Tom
Lead DeveloperLead DeveloperSounds good π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentSeptember 23, 2019 at 5:16 pm #1017164Alexander
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.
September 24, 2019 at 9:25 am #1017815Tom
Lead DeveloperLead DeveloperThe 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-developmentSeptember 24, 2019 at 9:38 am #1017827Alexander
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. π
September 24, 2019 at 4:38 pm #1018151Tom
Lead DeveloperLead DeveloperBoth 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-developmentSeptember 24, 2019 at 8:43 pm #1018229Alexander
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. -
AuthorPosts
- You must be logged in to reply to this topic.