Transform SharePoint Classic Pages to Modern Pages - Images appears only in EDIT mode

[GopalTiwari007]

Hello

I have been working to convert SharePoint 2013 classic publishing page to SharePoint online Modern pages. I am following below article and using PnP framework to transform the pages.

https://pnp.github.io/script-samples/modernize-classic-pages-from-publishing-sites/README.html?tabs=pnpps

I have tried two approaches
Approach # 1. Directly converting the pages from on-prem to SPO modern pages using below sample code:
ConvertTo-PnPClientSidePage -Identity "Challenging-Spirit-on-Display-at-Convention.aspx" -PublishingPage -TargetConnection $spOnlineConn -Connection $sp13Conn
-Overwrite -PageLayoutMapping "C:\temp\Demo\525\custompagelayoutmapping-0c687c95-c46f-48a8-84c3-1e4b53244eb6-challenging-spirit-on-display-at-convention.xml"
-KeepPageCreationModificationInformation -DisablePageComments
-LogType File `
-LogFolder "C:\Temp\Logs"

With this approach, I am able to convert the classic page to Modern page but Images in transformed pages only visible in EDIT mode, they don't show up in normal view mode.

Approach # 2
I used third party migration tool "ShareGate" to copy classic page from on-prem environment to SharePoint online site's PAGES (classic pages) library.
Then, used PnP script to transform the page to Modern page using below code:
ConvertTo-PnPClientSidePage -Identity "Challenging-Spirit-on-Display-at-Convention.aspx" -PublishingPage -TargetConnection $spOnlineConn
-Overwrite -KeepPageCreationModificationInformation
-TargetPageName "SPOPnP_Challenging-Spirit-on-Display-at-Convention.aspx" -TargetWebUrl $TargetWebURL
-DisablePageComments -LogType File
-LogFolder "C:\Temp\Logs"

with this approach, Images appear properly in VIEW mode, but the moment I go to EDIT mode, all images disappear from the page.

Source site has "Content Editor Web part" which contains text and Images in the page. Content Editor web part also uses "HTML Table" to display the images in tabular format.

So, In my case, both approaches (Direct migration from on-prem to SPO, Using Third Party Migration tool ShareGate), both does not seem to be working.

Any help will be appreciated.

[GopalTiwari007]

@pkbullock @VesaJuvonen Paul, Vesa, any help will be greatly appreciated. Is it a bug with PnP Transformation
code or a usage error on my part? I have to migrated thousands of pages from On-Prem SP 2013 to SPO Modern pages and desperately looking for a solution to this.

[pkbullock]

Hi @GopalTiwari007 - in the short term, I cannot help, I had VMs for testing this locally, they are not operational as they cannot run on my new ARM64 device. Ill look to see if I can host them somewhere. Also MS took away my dev tenant (it was only one that they couldn't let continue running) that contained a classic site test rig, so I need to rebuild that too.

There are a lot of changes recently in Modern pages and wondering if this would break something, it is worth using the PnP Page Cmdlets to see what the differences before and after the EDITs are made, see if the JSON schema gets "upgraded" then create a post conversion script to upgrade the webparts accordingly. Id be interested to see what the differences would be.

[pkbullock]

Hi @GopalTiwari007 - are you still seeing this issue? I have a test rig now and have done some testing with a scenario with an image in a table (created by the SP2013 Edit controls) and when transforming the image is placed outside the table at the bottom of the page.

This outcome is different to what you describe. If possible are you able to supply the source HTML for the table to better replicate.

[GopalTiwari007]

Hi @pkbullock , Thank you so much for your response. I truly appreciated it.

yes, I am still seeing this issue. I am attaching the source HTML as an attachment Source_HTML.txt.

Source Page has a "content editor web part", which is using HTML TABLE and it has multiple images in the TABLE.

After the migration, In normal view mode, none of the images appear. I can see the images only in EDIT mode. When I re-associate the images (by browsing to the Site assets folder) and re-publish the page, images start to appear.

The surprising part is in the normal mode, Images are available (when I use with developer tool) but images' height and width is set to "0". I have no idea what's sets the image height and weight to 0 and why.

I can probably show it to you in live meeting if you can space few minutes to have a quick teams meeting :-)

Let me know if you need any other information.

Regards,
Gopal Tiwari