paired flush and centered images of equal height displaying at different heights
-
I first noticed this issue on my main website a few weeks ago. I’ve been including pairs, and occasionally trios, of flushed and centered images on this site for about ten years without once encountering this issue until now. I don’t know if setting side-by-side images flush against each other is possible with the Columns Block, but that’s presently irrelevant to me because I still use the old WP-Admin editor and have no interest in changing to the Block Editor at this time.
The issue is that despite each pair of flush and centered images being set at the same height, recently, in some cases, the two images began appearing at slightly different heights. This includes pairs of images that have been displaying at identical heights for years. It doesn’t occur with every pair, and sometimes I’ve been able to fix the unequal height issue by re-uploading one or both images. I’ve also found cases where three images in a row, flush and centered, have been affected in the same way. They previously displayed with each at the same height, for years, and now suddenly they don’t. This issue occurs on both the latest Firefox and Google Chrome browsers.
Example: The page Under a Blanket of Blue has nine sets of images where two or more are displayed in a row, flush and centered. Until about a month ago each pair and trio displayed with the heights equal. Eight of the nine rows are pairs (one is a trio), four or the eight pairs now display at unequal heights, despite the heights being set as equal, as indicated in the following places:
1. pull handle tooltip boxes
2. Display Settings at Image Details
3. in the HTML code for the imagesWhile I don’t know the cause of the issue, I suspect that the use of the theme Koi, which was retired several years ago, might be a factor. I also wonder if it could be due to a WP-Admin editor bug.
The blog I need help with is: (visible only to logged in users)
-
Below is the method that I’ve been using, more or less, for the past several years, though the order of the steps is often changed in practice.
To make a pair of images inserted in a page or post display flush and centered:
1. Upload each image to a page or post.
2. Use the pull handles at the image corners to adjust the heights of the two images, making their heights equal if desired. Also and make sure the combined width of the pair is small enough to display the pair side by side on the theme applied.
3. Set the alignment of the left image to “none” at image details.
4. Align the left image to center, using the align center tab in the editor menu bar.
5. Set the alignment of the right image to “none.”
6. Cut the right image and paste it beside the left image. They will automatically be flush.
7. Highlight both images.
8. Click on the letter “A” at the bottom left of the post editor window.
9. Align center, using the align center tab in the editor menu bar.
-
Hi there!
Thank you for all the details, it does sound like the issue is theme related and, as you mentioned the theme Koi was already retired so no improvements will be done for that one.
You mention changing the size of the images by pulling the edges to the desired position. Have you actually tried to resize/crop the image to the same size/ratio?
Adjusting the images this way might be more accurate and should help to make them appear perfectly aligned.
-
Howdy!
Even though I typically use the drag handles to get two paired images at roughly the same height, I always check the dimensions at Image Details > Display Settings, and typically refine the dimensions there. In the four cases in the page that I’ve linked to above, and many other cases, the heights of some flush pairs are equal at Display Settings and in the corresponding HTML codes, while the pairs are displaying at slightly different heights.
Some things that I’ve tried that work sometimes:
1. Re-uploading one or both of a pair images from the media library.
2. Adjusting the height one image of a pair randomly up and/or down before returning to the original height, or shifting the height of both images by a couple of pixels, and then updating will sometimes result in them displaying at the same height.
Neither of these work consistently, and I’ve no idea why they work when they do.
-
Have you actually tried to resize/crop the image to the same size/ratio?
No. It not necessary that the images in my pairs be of the same aspect ratio, and I’ve no interest in cropping them. That’s actually seldom the case. I only want them to be of equal height, flush, and of a sufficiently small combined width.
-
“That’s actually seldom the case.” — That is, each image in pair being of equivalent aspect ratio.
-
That’s actually seldom the case. I only want them to be of equal height, flush, and of a sufficiently small combined width.
I get that :) It might not be that easy though to adjust the images by hand like that. I had a look at the post in question and noticed that, right in the editor, the images are not of the same height.
Just to confirm, do you mean that you adjust the images by hand in the editor, have them at the same height and then, after publishing the post they are not aligned anymore?
Also, you mentioned you have no intention of using our new Block Editor, however, I’m thinking that a gallery block might actually be very helpful here. It positions the images in the number of columns of your choice and allows you to also slightly crop the displayed images so that they all have equal size.
-
I had a look at the post in question and noticed that, right in the editor, the images are not of the same height.
That’s not what I’m seeing. As I’ve mentioned above, the heights of the paired images are showing as exactly equivalent in three places in the WP-Admin editor: 1.) in the pull handle tooltip boxes, 2.) at Image Details > Display Settings, and 3.) in the HTML code for the images.
Examples: Here’s a screenshot with the code of the first two (from the top) pairs of images in the page Under a Blanket of Blue: https://snipboard.io/zGCYF2.jpg. I’ve put the pairs close together in the screenshot for convenience. The images in the first pair each have height 300 pixels and the second pair are each 309 in height. The displayed heights of the pairs are slightly unequal in each case.
Just to confirm, do you mean that you adjust the images by hand in the editor, have them at the same height and then, after publishing the post they are not aligned anymore?
I’m not sure what you mean by “by hand.” I typically start with the pull handles, but refine the heights with the WP-Admin post or page editor’s image editing tools at Edit (pencil icon) > Image Details > Display Settings. One may set the precise numerical width and height of an image with up and down arrows there.
Also, you mentioned you have no intention of using our new Block Editor, however, I’m thinking that a gallery block might actually be very helpful here.
Thanks for the suggestion, but I’m not a fan of the block editor based on my experience with it, although I recognize that it can do things the other editors cannot and I may one day use it for certain things such as tables and cover images. Also, I definitely don’t want to crop the images, and I’d like to be able to link the images elsewhere if desired, which is I believe still not possible with images in a gallery.
Why should I have to crop images now, in order to display a pair flush and centered, when I’ve been able to do it without cropping and without issue for the past 10 years? I’m aware that trying to combine landscape and portrait orientation images as side-by-side pairs can be problematic. I generally avoid such pairs.
-
Just to confirm, do you mean that you adjust the images by hand in the editor, have them at the same height and then, after publishing the post they are not aligned anymore?
It’s not a question of them appearing different after publishing. First, some of these pairs have displayed at equal heights for years until about a month ago. Second, it’s not just publicly that the images don’t display at equal heights. They display at unequal heights in the visual editor as well, even though they are clearly set at equal heights at Image Details > Display Settings, and in the HTML code.
-
Here’s link to a Wayback Machine capture of the first page of the feature referred and linked to above. The capture shows that on 28 March 2019, each of the three pairs of images on the first page of “Under a Blanket of Blue” that are presently displaying at unequal heights were then displayed at equal height. There is one pair displayed at unequal height in the capture, but I believe that was an error on my part that I’ve since fixed.
-
This Wayback Machine 11 July 2015 capture of the page shows each of five image pairs displayed at equal heights, although in one case the pair is slightly misaligned (the latter an easily fixable issue).
-
Hi @musicdoc1,
Can you please share a screenshot of where this is happening. I want a screenshot of the misaligned images as I’m no able to find any on the page you mentioned.
Thanks!
-
Hi @fstat,
The issue is not misalignment. Do you mean the pairs of images set to display at equal heights that are displaying at unequal heights?
It may be difficult to detect the difference in display heights at a glance because in most cases the difference is quite small, typically about 1-2 pixels. However, this is a very recent development. Some of the affected pairs have been displaying at precisely equal heights for several years until about a month ago. Evidence suggests that there are probably several hundred pairs of images on the site affected as I’ve described.
-
Screenshots:
1. https://snipboard.io/faeMyT.jpg — from the page Under a Blanket of Blue — Each image in the pair is set to display at a height of 279 pixels. In the page there are three other pairs set to display at equal height that are displaying at unequal height, but this is the most obvious of the four.
2. and 3. https://snipboard.io/k0vPpZ.jpg and https://snipboard.io/wARNV6.jpg — from the page Besame Mucho — Each image in pair 2. is set at a height of 253 pixels. Each image in pair 3. is set at a height of 236 pixels. In this page there are three pairs of images set to display at equal height that are displayed at unequal height.
4. https://snipboard.io/vTs8Ql.jpg — from the page I’ll Remember April — Each image in the pair is set to display at 219 pixels height. In the page there are four pairs of images set to display at equal height that are displayed at unequal height.
5. https://snipboard.io/T9l6iw.jpg — from the page Shuffle Along and the return of, etc. — Each image in the pair is set to display at 279 pixels height. In this page there are six pairs of images set to display at equal height that are displayed at unequal height.
I haven’t gone through all 900+ pages and posts on the site, but it’s clear the problem is probably sitewide. There may several hundred pairs of images affected.
-
I can see the issue on your site, but I’m not able to see why it’s happening, nor am I able to replicate this. I can see the CSS code responsible for what’s happening, but that same CSS code on my own site has no effect, even if I apply the same theme as you.
I’ve opened a bug report for this, just in case it is a bug, but I can’t make any promises that this will be fixed, or that it will happen quickly.
- The topic ‘paired flush and centered images of equal height displaying at different heights’ is closed to new replies.
WordPress.com Forums 
