This solution applies legacy image positioning to SharePoint pages.
In 2023 Microsoft changed the way adjacent images are rendered on modern SharePoint pages, in the text editor web part. The culprit is a new CSS selector on the page, that hasn't been there before. Images that were shown next to each other suddenly were shown one below the other.
The new image formatting is activated as soon as an older page is going into edit mode. There is no way to prevent that.
This solution allows to roll this formatting change back, on an opt-in per-page basis.
Before entering edit mode, all is well. The page looks like this:
When entering edit mode for the first time, SharePoint upgrades the page and applies new styling. It now looks like this:
Note the little toggle button in the lower right corner. It says Legacy image positioning (by WikiTraccs). Toggle this and the images move right where they belong:
This SharePoint Framework solution adds the little toggle button to the lower right corner.
Note that around mid 2023 Microsoft introduced other formatting changes as well, e.g. paragraphs have been played with. Thus the different spacing. But that is another story.
The whole background story can be read here: Broken inline image positioning in SharePoint..
Putting images next to each other is a vital feature for authors. So it is not acceptable that this is not possible anymore.
This is the new CSS selector that prevents images from being put next to each other:
div.containerPlugin, div.imagePlugin {
clear: both;
}This SharePoint Framework Solution changes that to:
div.containerPlugin, div.imagePlugin {
clear: none;
}Note: This is a modification to the SharePoint user interface that is not officially supported by Microsoft. So this could break. That's why this solution allows authors to selectively switch this feature on, for pages they edit. An alternative would be to manually restructure the page.
WikiTraccs is a Confluence to SharePoint migration tool. It is used by clients worldwide to migrate hundreds of thousands of pages to SharePoint. Changes in pages directly affect those migration results. And this latest change affects them negatively.
- Download the SPFx solution wikitraccs-sp-page-companion.sppkg from Releases
- Upload wikitraccs-sp-page-companion.sppkg to the tenant app catalog, just install, don't activate for all sites
- Open a site you want to use the solution in
- Add the app via New > App > WikiTraccs Page Companion
Now, when editing a migrated modern SharePoint page, the toggle button should appear.
Get your own free development tenant by subscribing to Microsoft 365 developer program
| Version | Date | Comments |
|---|---|---|
| 1.0 | October, 2023 | Initial release |
THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.
- Clone this repository
- Ensure that you are at the solution folder
- in the command-line run:
- npm install
- npm run serve
Note: this solution uses spfx-fast-serve.