Forum Discussion

HaroldvandeKamp's avatar
HaroldvandeKamp
Bronze Contributor
Aug 05, 2017

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...
  • Aleksei Terentiev's avatar
    Aleksei Terentiev
    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');
            });
        }
    });

Resources