PnP Page Provisioning Images are not imported in the new provisioned site.

[4lexius4 world]

Hi there,

I'm trying to provision a custom page from one site to another using: 

Apply-PnPProvisioningTemplate -Path c:\temp\myPage.pnp

all custom webpart are correctly added but the images (like Image webpart see screen-shot) are blank and no path under site asset is created.

Test done in both modern site (Communication and Team site), same problem.

I also updated PnP PS with latest version but the problem is still there.

Could you please help?

Thanks in advance.

Alessio

p.s. to export the pnp page I used : Export-PnPClientSidePage

[#2]

No news/reply so far. Could someone help in case to suggest the appropriate place to submit case like that? GitHub?

[#3]

Hey @4lexius4 world ,

When you generate a site template using PnP, usually the files do not come with it. Probably the Image webpart has kept the reference to the image(its URL), but the image itself isn't there. Can you generate a .xml template instead of a .pnp? This way we can see the properties of the Image webpart. Just change the .pnp in the Out parameter to .xml.

[#4]

Hi @Carlos_Marins , thanks for your answer.

FYI when I provision a Site collection using a generated Site Template (.pnp) the images are correctly replaced, the issue I'm facing is only in the PnP Page Provisioning.

[#5]

Hey @4lexius4 world , no problem.

So you're saying the images are being uploaded to the new site you provisioned, but it doesn't show in the page?

Did you generate the XML template?

[#6]

@Carlos_Marins 

Here is the xml file generated (easy page with image):

<pnp:Provisioning xmlns:pnp="http://schemas.dev.office.com/PnP/2020/02/ProvisioningSchema">
<pnp:Preferences Generator="OfficeDevPnP.Core, Version=3.18.2002.0, Culture=neutral, PublicKeyToken=5e633289e95c321a" />
<pnp:Templates ID="CONTAINER-TEMPLATE-E5234353766A42E1BDA63E0978BB736A">
<pnp:ProvisioningTemplate ID="TEMPLATE-E5234353766A42E1BDA63E0978BB736A" Version="0" Scope="Undefined">
<pnp:ClientSidePages>
<pnp:ClientSidePage PromoteAsNewsArticle="false" PromoteAsTemplate="false" Overwrite="true" Title="CoolPage" ThumbnailUrl="" PageName="CoolPage.aspx">
<pnp:Header Type="Custom" ServerRelativeImageUrl="{site}/SiteAssets/SitePages/CoolPage/92504-thumbnailAF.png" TranslateX="50.1305483028721" TranslateY="92.1428571428571" LayoutType="FullWidthImage" TextAlignment="Center" ShowTopicHeader="false" ShowPublishDate="false" TopicHeader="" AlternativeText="" Authors="[&#xD;&#xA; {&#xD;&#xA; &quot;id&quot;: &quot;i:0#.f|membership|alessio@stmdevelop.onmicrosoft.com&quot;,&#xD;&#xA; &quot;upn&quot;: &quot;Alessio@stmdevelop.onmicrosoft.com&quot;,&#xD;&#xA; &quot;name&quot;: &quot;4lexius4 world&quot;,&#xD;&#xA; &quot;role&quot;: &quot;O365 Expert&quot;&#xD;&#xA; }&#xD;&#xA;]" AuthorByLine="[&#xD;&#xA; &quot;i:0#.f|membership|alessio@stmdevelop.onmicrosoft.com&quot;&#xD;&#xA;]" AuthorByLineId="-1" />
<pnp:Sections>
<pnp:Section Order="1" Type="OneColumn">
<pnp:Controls>
<pnp:CanvasControl WebPartType="Image" JsonControlData="{&quot;id&quot;: &quot;d1d91016-032f-456d-98a4-721247c305e8&quot;, &quot;instanceId&quot;: &quot;3ddf86b3-0dcc-46bf-a630-cf7fb0a4211e&quot;, &quot;title&quot;: &quot;Image&quot;, &quot;description&quot;: &quot;Show an image on your page&quot;, &quot;dataVersion&quot;: &quot;1.8&quot;, &quot;properties&quot;: {&quot;imageSourceType&quot;:2,&quot;captionText&quot;:&quot;&quot;,&quot;altText&quot;:&quot;&quot;,&quot;linkUrl&quot;:&quot;&quot;,&quot;overlayText&quot;:&quot;&quot;,&quot;fileName&quot;:&quot;cappello.jpg&quot;,&quot;siteId&quot;:&quot;{sitecollectionid}&quot;,&quot;webId&quot;:&quot;{siteid}&quot;,&quot;listId&quot;:&quot;{listid:Site Assets}&quot;,&quot;uniqueId&quot;:&quot;f30fd372-b76b-4ab4-97d6-c0b02d3c8966&quot;,&quot;imgWidth&quot;:736,&quot;imgHeight&quot;:432,&quot;alignment&quot;:&quot;Center&quot;,&quot;fixAspectRatio&quot;:false}, &quot;serverProcessedContent&quot;: {&quot;htmlStrings&quot;:{},&quot;searchablePlainTexts&quot;:{},&quot;imageSources&quot;:{&quot;imageSource&quot;:&quot;{site}/SiteAssets/SitePages/CoolPage/69316-cappello.jpg&quot;},&quot;links&quot;:{},&quot;customMetadata&quot;:{&quot;imageSource&quot;:{&quot;siteId&quot;:&quot;{sitecollectionid}&quot;,&quot;webId&quot;:&quot;{siteid}&quot;,&quot;listId&quot;:&quot;{listid:Site Assets}&quot;,&quot;uniqueId&quot;:&quot;f30fd372-b76b-4ab4-97d6-c0b02d3c8966&quot;,&quot;width&quot;:736,&quot;height&quot;:432}}}, &quot;dynamicDataPaths&quot;: {}, &quot;dynamicDataValues&quot;: {}}" ControlId="d1d91016-032f-456d-98a4-721247c305e8" Order="1" Column="1" />
<pnp:CanvasControl WebPartType="List" JsonControlData="{&quot;id&quot;: &quot;f92bf067-bc19-489e-a556-7fe95f508720&quot;, &quot;instanceId&quot;: &quot;68a40094-25b1-421a-98a5-50215c6fd281&quot;, &quot;title&quot;: &quot;Document library&quot;, &quot;description&quot;: &quot;Add a document library&quot;, &quot;dataVersion&quot;: &quot;1.0&quot;, &quot;properties&quot;: {&quot;isDocumentLibrary&quot;:true,&quot;selectedListId&quot;:&quot;{listid:Documents}&quot;,&quot;selectedListUrl&quot;:&quot;{site}/Shared Documents&quot;,&quot;webRelativeListUrl&quot;:&quot;/Shared Documents&quot;,&quot;webpartHeightKey&quot;:4}, &quot;serverProcessedContent&quot;: {&quot;htmlStrings&quot;:{},&quot;searchablePlainTexts&quot;:{&quot;listTitle&quot;:&quot;Documents&quot;},&quot;imageSources&quot;:{},&quot;links&quot;:{}}, &quot;dynamicDataPaths&quot;: {}, &quot;dynamicDataValues&quot;: {&quot;filterBy&quot;:{}}}" ControlId="f92bf067-bc19-489e-a556-7fe95f508720" Order="2" Column="1" />
<pnp:CanvasControl WebPartType="News" JsonControlData="{&quot;id&quot;: &quot;8c88f208-6c77-4bdb-86a0-0c47b4316588&quot;, &quot;instanceId&quot;: &quot;de6a2463-87f0-47cd-b5e5-1dbefa6d6978&quot;, &quot;title&quot;: &quot;News&quot;, &quot;description&quot;: &quot;Display recent news.&quot;, &quot;dataVersion&quot;: &quot;1.11&quot;, &quot;properties&quot;: {&quot;carouselSettings&quot;:{&quot;autoplay&quot;:false,&quot;autoplaySpeed&quot;:5,&quot;dots&quot;:true,&quot;lazyLoad&quot;:true,&quot;metadata&quot;:true,&quot;swipe&quot;:true,&quot;useStockItems&quot;:false},&quot;showChrome&quot;:true,&quot;showNewsMetadata&quot;:{&quot;showSocialActions&quot;:true,&quot;showAuthor&quot;:true,&quot;showDate&quot;:true},&quot;layoutId&quot;:&quot;GridNews&quot;,&quot;prefetchCount&quot;:4,&quot;filters&quot;:[{&quot;filterType&quot;:1,&quot;value&quot;:&quot;&quot;,&quot;values&quot;:[]}],&quot;newsDataSourceProp&quot;:1,&quot;dataProviderId&quot;:&quot;news&quot;,&quot;newsSiteList&quot;:[],&quot;renderItemsSliderValue&quot;:4,&quot;webId&quot;:&quot;{siteid}&quot;,&quot;siteId&quot;:&quot;{sitecollectionid}&quot;,&quot;pinnedItems&quot;:[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],&quot;serializedFilterQuery&quot;:&quot;&lt;Where&gt;&lt;Eq&gt;&lt;FieldRef Name=\&quot;FSObjType\&quot; /&gt;&lt;Value Type=\&quot;Integer\&quot;&gt;0&lt;/Value&gt;&lt;/Eq&gt;&lt;/Where&gt;&quot;}, &quot;serverProcessedContent&quot;: {&quot;htmlStrings&quot;:{},&quot;searchablePlainTexts&quot;:{},&quot;imageSources&quot;:{},&quot;links&quot;:{&quot;baseUrl&quot;:&quot;{hosturl}{site}&quot;},&quot;componentDependencies&quot;:{&quot;layoutComponentId&quot;:&quot;ef1147f9-e3f4-4844-b4fe-ab7e6c1f3a10&quot;}}, &quot;dynamicDataPaths&quot;: {}, &quot;dynamicDataValues&quot;: {}}" ControlId="8c88f208-6c77-4bdb-86a0-0c47b4316588" Order="3" Column="1" />
<pnp:CanvasControl WebPartType="Custom" JsonControlData="{&quot;id&quot;: &quot;62cac389-787f-495d-beca-e11786162ef4&quot;, &quot;instanceId&quot;: &quot;2afc723f-5ad0-48b1-a431-8442bc5c6403&quot;, &quot;title&quot;: &quot;Countdown Timer&quot;, &quot;description&quot;: &quot;This web part is used to allow a site admin to count down/up to an important event.&quot;, &quot;dataVersion&quot;: &quot;2.1&quot;, &quot;properties&quot;: {&quot;showButton&quot;:false,&quot;countDate&quot;:&quot;Fri Feb 21 2020 17:00:00 GMT+0100 (W. Europe Standard Time)&quot;,&quot;title&quot;:&quot;&quot;,&quot;description&quot;:&quot;&quot;,&quot;countDirection&quot;:&quot;COUNT_DOWN&quot;,&quot;dateDisplay&quot;:&quot;DAY_HOUR_MINUTE_SECOND&quot;,&quot;buttonText&quot;:&quot;&quot;,&quot;buttonURL&quot;:&quot;&quot;}, &quot;serverProcessedContent&quot;: {&quot;htmlStrings&quot;:{},&quot;searchablePlainTexts&quot;:{},&quot;imageSources&quot;:{},&quot;links&quot;:{}}, &quot;dynamicDataPaths&quot;: {}, &quot;dynamicDataValues&quot;: {}}" ControlId="62cac389-787f-495d-beca-e11786162ef4" Order="4" Column="1" />
<pnp:CanvasControl WebPartType="Custom" JsonControlData="{&quot;id&quot;: &quot;50256fc2-a28f-4544-900e-32724d32bc7f&quot;, &quot;instanceId&quot;: &quot;5a7dc925-9da5-4356-b813-10c8f5d01158&quot;, &quot;title&quot;: &quot;Stock Information&quot;, &quot;description&quot;: &quot;Stock information&quot;, &quot;dataVersion&quot;: &quot;1.0&quot;, &quot;properties&quot;: {&quot;demo&quot;:true,&quot;stockSymbol&quot;:&quot;STM&quot;,&quot;autoRefresh&quot;:true}, &quot;serverProcessedContent&quot;: {&quot;htmlStrings&quot;:{},&quot;searchablePlainTexts&quot;:{},&quot;imageSources&quot;:{},&quot;links&quot;:{}}, &quot;dynamicDataPaths&quot;: {}, &quot;dynamicDataValues&quot;: {}}" ControlId="50256fc2-a28f-4544-900e-32724d32bc7f" Order="5" Column="1" />
</pnp:Controls>
</pnp:Section>
</pnp:Sections>
</pnp:ClientSidePage>
</pnp:ClientSidePages>
</pnp:ProvisioningTemplate>
</pnp:Templates>
</pnp:Provisioning>

[#7]

Hey @4lexius4 world ,

In this case, I think you need to download the image you're using as a Banner for the page - with the name "92504-thumbnailAF.png", keep it in the same directory as your XML, and add the following code after "</pnp:ClientSidePages>":

<pnp:Files>
<pnp:File src="./92504-thumbnailAF.png" Folder="SiteAssets/SitePages/CoolPage" Overwrite="true" Level="Published" />
</pnp:Files>

[#8]

@Carlos_Marins  Dear Carlos first of all thanks a lot for your answers, really appreciated.

Unfortunately it doesn't work I'm getting error: Apply-PnPProvisioningTemplate : Template is not valid, when I add the pnp file section as suggested by you.

Adding also that this is a workaround with a manual action, if we have to implement an automatic Site and Page provisioning for n sites/pages changing all the template manually doesn't make any sense, do you agree?

Thanks!

Alessio

[#9 · Accepted solution]

@Carlos_Marins 

Problem solved! thanks to the great @Paolo Pialorsi , who provided us with the solution.
Sharing below the solution in case it can be useful in similar cases:

1) First Export the client side page using the -PersistBrandingFiles attribute.

Export-PnPClientSidePage -Identity "TestPage.aspx" -Out .\single-page.xml -PersistBrandingFiles

2) Convert the xml and related content in an unique file pnp.
Convert-PnPFolderToProvisioningTemplate -Folder .\ -Out c:\temp\single-page.pnp

3) Then connect to target site and apply the page provisioning.

Thanks Carlos for your time, and thank Paolo for the solution!

Cheers,

Alessio