Handling of inline images in text web part broken on export
Nobody has claimed this yet.
- Dominant language
- C#
- Stars
- 259
- Forks
- 161
- Avg merge
- 10h 33m
- Merged PRs (30d)
- 1
Description
Using the PowerShell function to export a page and then importing the same template file again (e. g. with another page name), I've noticed that inline images in text parts still seemed somehow broken afterwards.
Here are some screenshots to show the effect:
This is the 'orginal' page I've then exported using PnP.PowerShell's Cmdlet Export-PnPPage:
I've then modified page name and title and imported the page to the same site with PnP.PowerShell Cmdlet Invoke-PnPSiteTemplate. Now the inline image will be shown twice: Once above the rte web part (where it's technically located in the page structure) and the second timer where it's supposed to be shown (inside the rte web part, where the image web part's corresponding placeholder resides):
I'm currently having the same issues adding inline images directly using PnP.PowerShell commands and having more or less the same issues. Despite setting the cross-reference from the HTML placeholder in the rich text content back to the instance id of the image web part and having the image web part having the instance id of the rte web part and being tagged as "InlineImage" I've still the same outcome. That's no big surprise, because for my researches I was of course relying on the web part properties returned by PnP ...
I guess there must be something else that PnP.Framework is missing out on, that will do the trick. Unfortunately I've no clue how to proceed here as comparing the web part properties shows no difference between the original page and the "broken" re-import.
The rte web part text content looks like this. Relevant attribute here seems to be the "data-instance-id" referencing the acutal image web part to be shown "inline":
<p>Lorem ipsum ...</p>
<div tabindex="-1" data-cke-widget-wrapper="1" data-cke-filter="off" class="cke_widget_wrapper cke_widget_block cke_widget_inlineimage cke_widget_wrapper_webPartInRteInlineImage cke_widget_wrapper_webPartInRteAlignCenter cke_widget_wrapper_webPartInRte" data-cke-display-name="div" data-cke-widget-id="2" role="region" aria-label="Inlinebild in RTE. Verwenden Sie ALT+F11, um zur Symbolleiste zu wechseln. Verwenden Sie ALT+P, um den Eigenschaftenbereich zu öffnen.">
<div data-webpart-id="image" class="webPartInRte webPartInRteAlignCenter webPartInRteInlineImage cke_widget_element" data-cke-widget-data="%7B%22classes%22%3A%7B%22webPartInRteInlineImage%22%3A1%2C%22webPartInRteAlignCenter%22%3A1%2C%22webPartInRte%22%3A1%7D%7D" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="inlineimage" data-instance-id="70afffa9-d190-4548-acf8-12709bc58b51" title=""></div>
</div>
<p>Lorem ipsum ...</p>
I already found out, that the inline images json extracted by PnP.Framework obviously needs some other additional parameter "rteInstanceId", defining the reference to the rte web part where it's supposed to be displayed. This looks then e. g. like that:
{
"id": "d1d91016-032f-456d-98a4-721247c305e8",
"instanceId": "70afffa9-d190-4548-acf8-12709bc58b51",
"title": "Bild",
"description": "Fügen Sie Ihrer Seite ein Bild oder Foto hinzu, einschließlich Textüberlagerungen und der Möglichkeit, Bilder zuzuschneiden und ihre Größe zu ändern.",
"dataVersion": "1.9",
"properties": {
"id": "d8945a5c-2e09-454f-a6dd-e27f614d8c1e",
"linkUrl": "",
"isInlineImage": true,
"alignment": "Center",
"siteId": "{sitecollectionid}",
"webId": "{siteid}",
"listId": "{listid:Site Assets}",
"uniqueId": "40786ce2-50d6-4db1-9cf3-a59289a97b9b",
"imgHeight": 960,
"imgWidth": 1280,
"imageSourceType": 2,
"fileName": "Png-logo.png",
"fixAspectRatio": false,
"overlayText": "",
"altText": ""
},
"serverProcessedContent": {
"htmlStrings": {},
"searchablePlainTexts": {},
"imageSources": {
"imageSource": "{site}/SiteAssets/SitePages/Inline-Image-Test/1269131529-Png-logo.png"
},
"links": {},
"customMetadata": {
"imageSource": {
"siteId": "{sitecollectionid}",
"webId": "{siteid}",
"listId": "{listid:Site Assets}",
"uniqueId": "40786ce2-50d6-4db1-9cf3-a59289a97b9b",
"width": 1280,
"height": 960
}
}
},
"dynamicDataPaths": {},
"dynamicDataValues": {},
"rteInstanceId": "1212fc8d-dd6b-408a-8d5d-9f1cc787efbb"
}
Unfortunately this still seems to be missing something. In view mode we still have the "double image". In edit mode it looks just fine on the first glance, but there are issues like misplaced border for resizing and such, if you try to edit the inline-image:
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the issue through the Export-PnPPage and Invoke-PnPSiteTemplate entry points, comparing the rich-text content and inline-image JSON between the original and imported pages. Trace how instanceId and rteInstanceId are handled during export and import; done means inline images appear only inside the rich-text web part and remain correctly positioned in edit mode.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- csharp, powershell
- Domain
- tooling
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100