Open pauljacobson opened 2 years ago
Support References
This comment is automatically generated. Please do not edit it.
User has replied back saying this page is a good example of the space around the image: https://chrisbocay.com/master-the-law-of-attraction/
📌 SCRUBBING
📌 FINDINGS/SCREENSHOTS/VIDEO
Baskerville 2
Twenty Sixteen
📌 ACTIONS
wp-calypso
if needed.Hello,
I am the original reporter of this phenomenon, which was done in a series of email messages to the Wordpress.com support team.
Unfortunately, not all details of my email messages have been transferred to this forum, so I am taking this opportunity to make this issue somewhat clearer.
THE ISSUE
Wordpress has always, to my knowledge, succeeded in downsizing any image on any post or page to exactly fit the particular content width of any theme, whether in Baskerville 2 or any other theme.
The issue is that, as of a few days ago (did it coincide with my upgrade to the Pro plan?), Wordpress suddenly does not always succeed in downsizing all my images on my posts and pages so that they fit the main content width (Baskerville 2: 756px); instead there is a 5px margin or padding to the left and right of the image, thus making the image not being left or right aligned with the text or the captions.
This happens consistently if the window is maximized on a normal landscape monitor (width=1920px) or on a normal portrait monitor (width=1080px).
It is not until I resize the width of my window (whether on a landscape or portrait monitor) so that it becomes less than approximately 900px or so that Wordpress spreads out the image over the whole content width. Thus, when the window size is 900px or less, there is no longer any 5px margin or padding, and the image then properly aligns with the main content width.
It is also noteworthy that this effect is seen, although my images typically are at least 1200px in width, and that my post settings for images always are set to "Full Size" in the image block settings. So this effect is NOT a result of that the original size of the images is less than the content width of the theme.
TEST PAGE
For live testing, the page https://chrisbocay.com/master-the-law-of-attraction/ is no longer showing the effect, since I have now replaced my WP Image blocks with my own HTML blocks instead (see my next comment below). But here is a picture of it, as it was prior to replacing the image blocks:
This image is 1200px wide and was set to "Full Size" in the image block settings. By resizing the window width to more than 900px, the effect could be seen. And when resizing it to less than 900px, the image aligned nicely with the left and right column width.
Also note that the caption was NOT "synched" with the extra 5px margin/padding of the image. The caption was retaining its full content width, even if the image has an extra 5px margin/padding to the left and right when the window width is greater than 900px.
NEW LIVE TEST PAGE: you can use https://chrisbocay.com/your-belief-wall-does-it-promote-your-desired-manifestations/ to see the effect of the images getting an additional 5px margin/padding when the width of the window is greater than 900px.
ADDITIONAL INFO
This issue is seen in all major browsers: Google Chrome, Firefox, Microsoft Edge, Avast Secure Browser.
Test environment: Fujitsu Celsius workstation, Windows 10 Pro, BenQ landscape monitor, BenQ portrait monitor
Active plugins: Redirection + standard Pro Plan plugins (Akismet Anti-Spam, Gutenberg, Jetpack, Jetpack Boost, Page Optimize, WordPress.com Editing Toolkit).
Best wishes! Chris Bocay https://chrisbocay.com/
Hello,
I have now conducted a test to see if I could manually "override" this problem by using a custom HTML block instead of an Image block.
And that test worked well, as seen in the following screenshot, where the top image is produced by my custom HTML block, and where the bottom image is produced by WP's Image block.
Not only does the top picture stretch out properly to the left, but also to the right (it aligns properly with the blue box of my Table of Contents above it). So that is a good feature.
The added bonus with this solution is that I now also can get nice captions, where I can left-align my text (something which is not possible with the captions in the WP image block, since they seem to be hard-coded being center-aligned).
The HTML code to produce the top image and its caption is seen in screenshot 2 below:
The relevant CSS for the top image is:
{
border: 0px;
margin: 0px;
padding: 0px;
width: 100%;
height: auto;
}
Best wishes! Chris
Quick summary
Our user raised a concern about what seems to be a small amount of padding or margin that is added to an image in an Image Block like this:
https://user-images.githubusercontent.com/2912202/182549496-2c8a9dcd-c133-4551-8c8f-3aedf6d6dfe8.mp4
This doesn't seem to originate in the theme's CSS code, though. There also isn't an option to manage this in the user's post editor. This could be due to theme support, though. The user is using the Baskerville 2 theme.
This does seem to affect sites with plugins, though.
Steps to reproduce
wp-block-image size-full
;https://user-images.githubusercontent.com/2912202/182552449-ba36ee25-8d56-4455-b7a0-48a1f43b6e0f.mp4
What you expected to happen
The Image Block should not gain additional spacing. Here is a site that doesn't support plugins, and there is no additional spacing:
Uploading Capture_2022-08-03 at 10.43.36.mp4…
What actually happened
As you can see from the demonstrations before, on a WordPress.com site that supports plugins, there is extra space added to the Image Block.
Context
This was reported in 5427858-zen
Platform (Simple, Atomic, or both?)
Atomic
Theme-specific issue?
It affects Baskerville 2 although doesn't seem to be as a result of the theme.
Browser, operating system and other notes
Vivaldi 5.3.2679.70 (Stable channel) (arm64) macOS 12.5
Reproducibility
Consistent
Severity
Some (< 50%)
Available workarounds?
No but the platform is still usable
Workaround details
Not aware of a workaround for this.