I'm in the process of updating the page for the White Butte, ND state highpoint (use the search feature for White Butte, ND, page ID 151926; I'm not special enough to have permission to post links).

There are two sets of images which I want to be aligned side-by-side. The first set is in the "Getting There" section and the second set in in the "Red Tape" section.

After completing the original edits, the pictures were oriented side by side simply using the "New" WYSIWYG editor with no special effort or HTML coding on my part. Sometime in the last week, the default desktop layout changed such that the images are now displaying stacked underneath each other instead of side-by-side. Perhaps this was due to a change in the backend Editor code ... I didn't make any edits (that I recognize) which would have messed up the page layout

Possible clue?
This change / error appears to have coincided with the addition of the contenteditable="false" attribute recently (?) added to the <figcaption> tag (or at least I never noticed it before).

Previous original layout using the "New" WYSIWYG editor (desired layout)
[Image contained within a captioned figure] [Image contained within a captioned figure]

Current layout unrelated to any WYSIWYG or HTML edits on my part (not my grand vision for the new page)
[Image contained within a captioned figure]
[Image contained within a captioned figure]

Troubleshooting Attempts

1. I've tried to restore the intended layout using every iteration of the WYSISYG "New Editor," "Old Editor," and the "Ancient Editor" I can think of.
2. I'm familiar with raw HTML. I've tried every iteration of "float: left" and "align: left" on both the <figures> and the <imgs> contained therein. None of my attempts were successful.
3. The images have a width of 600px which fit perfectly side-by-side at 1920x1080 while allowing for the margin / whitespace of the left-hand navigation sidebar. I edited the display CSS to a super tiny 400px width which was most definitely small enough to left floated both images side-by-side; however, this didn't work either. There was tons of white space and the images were still stacking one on top of the other instead of displaying inline.
4. I had some minor success using "float: left" on the left image in conjunction with "float: right" on the right image; however, this resulted in a gigantic gap between the two images on the desktop layout (I didn't even bother to review the mobile layout since it wasn't even close to the desired output).
5. I'm aware I could put the images in a table; however, that is poor code and not semantically correct. I would prefer to avoid ancient hacks from the '90s.

Questions to be answered
A. Were there recent changes on the guts of the editor which would have modified my original layout that was working correctly.
B. Does anyone have a hint on the correct method for displaying inline images on this site engine; either using the WYSIWYG editor or raw HTML?
C. Have I overlooked a trivial quotation mark, opening, or closing bracket?

Questions to be answered
Here's the raw CSS as currently online (line breaks have been added for clarity and legibility). Currently, I've stripped out all of the floats and aligns for both the figure and the image since none of it was having any effect.

Code: Select all

<figure>
     <a href="https://www.facebook.com/adventureharder/photos/a.755541304817545/763366857368323/?type=3&amp;theater" target="_blank" rel="noopener">
          <img title="Correct Route via Google Maps from Bowman, ND to the White Butte Trailhead" src="https://scontent-ort2-2.xx.fbcdn.net/v/t1.0-9/49938743_763366860701656_4895721358287175680_n.png?_nc_cat=106&amp;_nc_ht=scontent-ort2-2.xx&amp;oh=7bdce9e5f526ed2595af0df463d48494&amp;oe=5CB2F42E" alt="Correct Route via Google Maps from Bowman, ND to the White Butte Trailhead" width="600" height="600" />
     </a>
     <figcaption contenteditable="false">
          Correct Route via Google Maps from Bowman, ND to the White Butte Trailhead
     </figcaption>
</figure>

<figure>
     <a href="https://www.facebook.com/adventureharder/photos/a.755541304817545/763356097369399/?type=3&amp;theater" target="_blank" rel="noopener">
          <img title="Incorrect route via Google Maps from Bowman, ND to White Butte, Chalky Butte, ND" src="https://scontent-ort2-1.xx.fbcdn.net/v/t1.0-9/49329077_763356100702732_690953400614912000_n.png?_nc_cat=109&amp;_nc_ht=scontent-ort2-1.xx&amp;oh=cd35d329e45485ae5ff90dcd1df7b1c7&amp;oe=5CC035CE" alt="Incorrect route via Google Maps from Bowman, ND to White Butte, Chalky Butte, ND" width="600" height="600" />
     </a>
     <figcaption contenteditable="false">
          Incorrect route via Google Maps from Bowman, ND to White Butte, Chalky Butte, ND
     </figcaption>
</figure>


Hello,

The easiest way to do it since we have made some changes to the styling is to add a table that is 2 columns x 1 row. I have edited your page as you described you wanted it. Please let me know if it looks as you wish now:
https://www.summitpost.org/white-butte/151926

Thanks, Matt!

This hack works on desktop at a fixed-width resolution. However, changing the resolution of the browser window or switching media devices to a mobile display causes the image files to distort due to the constraints of the table properties lacking inherent <:float> characteristics. Granted, table layouts are not intended as display elements. I appreciate the limitations of platforms intended primarily as chat and forum communications, in addition to ancient legacy coding.

Considering the current platform, am I precluded from utilizing a purely compliant CSS3 option? If so, that's ok-ish. I would prefer to experiment with alternative layout iterations or revert to stacked images rather than distorted images on cross-platform devices?

Aside from triggering my OCD, it's not that big a deal lolz Are there any other (perhaps slightly more complicated?) options utilizing HTML / CSS3 which could play nice with the current hosting platform, any iteration of any version of the native editor(s), or other wisdom which may provide the cross-platform solution I'm hoping to achieve?

Hello adventureharder,

Sorry I didn't properly respond to your forum post the first time. Last week was not a good week for me! I was way over extended. I'm coming back to this thread today and read your first post entirely. I understand now that you have a very good grasp on HTML/CSS and didn't want to do the table option.

I did notice that the images get distorted on smaller screens when wrapped in a table. I just spent some time reading and trying to figure out if there is a good way to achieve what you desire and couldn't come up with an easy solution.

Let me see if I can answer your questions from before...

adventureharder wrote:Questions to be answered
A. Were there recent changes on the guts of the editor which would have modified my original layout that was working correctly.

Yes, there were quite a number of changes to the editor that were to address shortcomings in how images are inserted, captioned, aligned and deleted. I'm not sure which one affected the layout of this page, but it is possible that we could make it function as it did before. Can you clarify what happened on smaller screens when the images were aligned side by side?

adventureharder wrote:B. Does anyone have a hint on the correct method for displaying inline images on this site engine; either using the WYSIWYG editor or raw HTML?

The only solution I could think of was the table solution, which obviously doesn't look good on all screen sizes due to the distortion of the images in the table. I'm looking for a way to prevent them from being distorted like that.

adventureharder wrote:C. Have I overlooked a trivial quotation mark, opening, or closing bracket?

No, your HTML/CSS looks good. It was a change to the CSS of the site.

adventureharder wrote:Considering the current platform, am I precluded from utilizing a purely compliant CSS3 option?

One of the advantages (or disadvantages when it comes to upgrading the site) is that we allow for any sort of custom HTML or CSS. So you could really do anything you want.

adventureharder wrote:Are there any other (perhaps slightly more complicated?) options utilizing HTML / CSS3 which could play nice with the current hosting platform, any iteration of any version of the native editor(s), or other wisdom which may provide the cross-platform solution I'm hoping to achieve?

I believe the most recent changes to the CSS that made your page not function as expected were to fix this page:
https://www.summitpost.org/lake-chelan- ... ess/834945

The images on the left and right side at the start of the page were not properly aligned.

If you can send me an example of what exactly you'd like to achieve with proper HTML/CSS, I can see if we can get the current CSS/HTML to function as you'd like.