Forum Discussion
HaroldvandeKamp
Aug 05, 2017Bronze Contributor
Changing a Page Banner Image inside a Modern Page using PnP
How can I change the picture in the banner on top of a Modern Page? Using https://msdn.microsoft.com/en-us/pnp_articles/modern-experience-customizations-customize-pages I managed to create modern...
- Sep 01, 2017
My initial Regular Expression works only when banner is not set. So it will not work for the pages with banner.
Below is the code to process any pages:
var ctx = SP.ClientContext.get_current(); // SP context var web = ctx.get_web(); // current web var list = web.get_lists().getByTitle('Site Pages'); // pages library var items = list.getItems(SP.CamlQuery.createAllItemsQuery()); // all items ctx.load(items); // loading items from server... ctx.executeQueryAsync(function() { var item = items.get_item(7); // here I'm working with single item by index. But you can iterate through all pages here var layoutWebpartsContent = item.get_item('LayoutWebpartsContent'); // getting content console.log(layoutWebpartsContent); // let's display the content var dataAttrContent = /data-sp-controldata="([^"]+)"/gmi.exec(layoutWebpartsContent); // getting data-sp-controldata content if (dataAttrContent.length) { // we found the attribute. // Let's unescape and parse it to JSON // the content of the attribute is a 'group' in RegExp result. It will be located as second entry (with index 1) var unescaped = unescape(dataAttrContent[1]) // unescape //unescaped = unescape(unescaped); var content = JSON.parse(unescaped.replace(/:/gmi, ':')); // replace : with : // // changing imageSource // if (!content.serverProcessedContent) { content.serverProcessedContent = {}; } if (!content.serverProcessedContent.imageSources) { content.serverProcessedContent.imageSources = {}; } content.serverProcessedContent.imageSources.imageSource = '/sites/documents-aggregator/SiteAssets/SitePages/1200px-MarvelLogo.svg.png'; // // Changing imageSourceType // if (!content.properties) { content.properties = {}; } content.properties.imageSourceType = 2; // // escaping back and updating item // debugger; var newContent = JSON.stringify(content); newContent = escape(newContent); // escaping newContent = newContent.replace(/%3A/gmi, ':').replace(/%2C/gmi, ','); // we need to replace %3A (:) with : and %2C (,) with , layoutWebpartsContent = layoutWebpartsContent.replace(dataAttrContent[1], newContent); item.set_item('LayoutWebpartsContent', layoutWebpartsContent); item.update(); ctx.executeQueryAsync(function() { console.log('success'); }, function() { console.log('fail'); }); } });
HaroldvandeKamp
Bronze Contributor
Thank you for the detailed hack / work around Aleksei!
Aleksei Terentiev
Sep 01, 2017Copper Contributor
My initial Regular Expression works only when banner is not set. So it will not work for the pages with banner.
Below is the code to process any pages:
var ctx = SP.ClientContext.get_current(); // SP context var web = ctx.get_web(); // current web var list = web.get_lists().getByTitle('Site Pages'); // pages library var items = list.getItems(SP.CamlQuery.createAllItemsQuery()); // all items ctx.load(items); // loading items from server... ctx.executeQueryAsync(function() { var item = items.get_item(7); // here I'm working with single item by index. But you can iterate through all pages here var layoutWebpartsContent = item.get_item('LayoutWebpartsContent'); // getting content console.log(layoutWebpartsContent); // let's display the content var dataAttrContent = /data-sp-controldata="([^"]+)"/gmi.exec(layoutWebpartsContent); // getting data-sp-controldata content if (dataAttrContent.length) { // we found the attribute. // Let's unescape and parse it to JSON // the content of the attribute is a 'group' in RegExp result. It will be located as second entry (with index 1) var unescaped = unescape(dataAttrContent[1]) // unescape //unescaped = unescape(unescaped); var content = JSON.parse(unescaped.replace(/:/gmi, ':')); // replace : with : // // changing imageSource // if (!content.serverProcessedContent) { content.serverProcessedContent = {}; } if (!content.serverProcessedContent.imageSources) { content.serverProcessedContent.imageSources = {}; } content.serverProcessedContent.imageSources.imageSource = '/sites/documents-aggregator/SiteAssets/SitePages/1200px-MarvelLogo.svg.png'; // // Changing imageSourceType // if (!content.properties) { content.properties = {}; } content.properties.imageSourceType = 2; // // escaping back and updating item // debugger; var newContent = JSON.stringify(content); newContent = escape(newContent); // escaping newContent = newContent.replace(/%3A/gmi, ':').replace(/%2C/gmi, ','); // we need to replace %3A (:) with : and %2C (,) with , layoutWebpartsContent = layoutWebpartsContent.replace(dataAttrContent[1], newContent); item.set_item('LayoutWebpartsContent', layoutWebpartsContent); item.update(); ctx.executeQueryAsync(function() { console.log('success'); }, function() { console.log('fail'); }); } });
- kevmcdonkSep 01, 2017MVPNot got my code handy but I believe you can set the bannerimageurl property on the page.