Adding images with PnP/Powershell

Oh, hello! Welcome back to our guest blogger series. This is your chance to learn a little something about the men and women behind the screen and discover what drives them.
Today we welcome back our Senior Web Developer Corrie Haffly for another trip into the world of Powershell and PnP. When we last left off, we learned how to build a basic site provisioning package and deploy it. But where else can we go? Enjoy part 2 of our look into Powershell and PnP.


In this article, we’ll be extending the simple deployment package from Get Started with PnP/Powershell! by adding our own images.
As a reminder, here is what the file structure looks like in the deployment package:
Folder structure of simple deployment package
Adding your own images will involve two steps:

  1. Add the image files into the folder.
  2. Add the image references to the XML.

Let’s get started!

Add the image files into the folder.

In Windows Explorer, copy some of your own image files into the pageimages folder.
Adding images to folder

Add the image references to the XML.

Open simple.xml for editing.

1
2
3
4
5
6
7
8
9
10
11
12
<!--?xml version="1.0"?-->
<pnp:provisioning xmlns:pnp="http://schemas.dev.office.com/PnP/2016/05/ProvisioningSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemalocation="http://schemas.dev.office.com/PnP/2016/05/ProvisioningSchema https://raw.githubusercontent.com/OfficeDev/PnP-Provisioning-Schema/master/OfficeDevPnP.ProvisioningSchema/ProvisioningSchema-2016-05.xsd">
    <pnp:preferences generator="OfficeDevPnP.Core, Version=1.6.915.0, Culture=neutral, PublicKeyToken=null">
    <pnp:preferences generator="OfficeDevPnP.Core, Version=1.6.915.0, Culture=neutral, PublicKeyToken=null">
    <pnp:templates id="CONTAINER-TEMPLATE-3231B31CFF0449948888AFFF43F57101">
        <pnp:provisioningtemplate id="TEMPLATE-3231B31CFF0449948888AFFF43F57101" version="1">
            <pnp:files>
                <pnp:file folder="PublishingImages" overwrite="true" src="pageimages\sample-photo.jpg"></pnp:file>
            </pnp:files>
        </pnp:provisioningtemplate>
    </pnp:templates>
</pnp:preferences></pnp:preferences></pnp:provisioning>

Look for the line of code that contains the image reference.

1
<pnp:file folder="PublishingImages" overwrite="true" src="pageimages\sample-photo.jpg"></pnp:file>

Copy and paste.

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--?xml version="1.0"?-->
<pnp:provisioning xmlns:pnp="http://schemas.dev.office.com/PnP/2016/05/ProvisioningSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemalocation="http://schemas.dev.office.com/PnP/2016/05/ProvisioningSchema https://raw.githubusercontent.com/OfficeDev/PnP-Provisioning-Schema/master/OfficeDevPnP.ProvisioningSchema/ProvisioningSchema-2016-05.xsd">
    <pnp:preferences generator="OfficeDevPnP.Core, Version=1.6.915.0, Culture=neutral, PublicKeyToken=null">
    <pnp:preferences generator="OfficeDevPnP.Core, Version=1.6.915.0, Culture=neutral, PublicKeyToken=null">
    <pnp:templates id="CONTAINER-TEMPLATE-3231B31CFF0449948888AFFF43F57101">
        <pnp:provisioningtemplate id="TEMPLATE-3231B31CFF0449948888AFFF43F57101" version="1">
            <pnp:files>
                <pnp:file folder="PublishingImages" overwrite="true" src="pageimages\sample-photo.jpg"></pnp:file>
                <pnp:file folder="PublishingImages" overwrite="true" src="pageimages\sample-photo.jpg"></pnp:file>
            </pnp:files>
        </pnp:provisioningtemplate>
    </pnp:templates>
</pnp:preferences></pnp:preferences></pnp:provisioning>

Change the name of the image file to match one of your new image files. Repeat this for each new image that you want to add.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--?xml version="1.0"?-->
<pnp:provisioning xmlns:pnp="http://schemas.dev.office.com/PnP/2016/05/ProvisioningSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemalocation="http://schemas.dev.office.com/PnP/2016/05/ProvisioningSchema https://raw.githubusercontent.com/OfficeDev/PnP-Provisioning-Schema/master/OfficeDevPnP.ProvisioningSchema/ProvisioningSchema-2016-05.xsd">
    <pnp:preferences generator="OfficeDevPnP.Core, Version=1.6.915.0, Culture=neutral, PublicKeyToken=null">
    <pnp:preferences generator="OfficeDevPnP.Core, Version=1.6.915.0, Culture=neutral, PublicKeyToken=null">
    <pnp:templates id="CONTAINER-TEMPLATE-3231B31CFF0449948888AFFF43F57101">
        <pnp:provisioningtemplate id="TEMPLATE-3231B31CFF0449948888AFFF43F57101" version="1">
            <pnp:files>
                <pnp:file folder="PublishingImages" overwrite="true" src="pageimages\sample-photo.jpg"></pnp:file>
                <pnp:file folder="PublishingImages" overwrite="true" src="pageimages\computer.jpg"></pnp:file>
                <pnp:file folder="PublishingImages" overwrite="true" src="pageimages\woman-on-computer.jpg"></pnp:file>
            </pnp:files>
        </pnp:provisioningtemplate>
    </pnp:templates>
</pnp:preferences></pnp:preferences></pnp:provisioning>

This current schema will upload the overwrite the files and check them in as a draft. If you would like to publish the files, add the Level="Published attribute to each File element, like this:

1
<pnp:file folder="PublishingImages" overwrite="true" src="pageimages\woman-on-computer.jpg" level="Published"></pnp:file>

Save your file.

Provision the site and see your changes.

If you are continuing on from the previous tutorial, you can skip to step 4.

  1. Open Windows Powershell as an admin (right-click on Powershell and choose Run as administrator).
  2. CD to the folder that contains simple.ps1:
    cd: "C:\yourdirectory"
  3. Add in your credentials.
    1. $creds = Get-Credential
    2. Enter your credentials.
  4. Run the simple.ps1 file (with the URL to your own site, of course):
    .\simple.ps1 -TargetWebUrl "https://yoursite.com/sites/sitecollection" -Credentials $creds
  5. Wait. You will see a bar across the top which shows the progress of the deployment. This may take a few minutes, so grab a snack.
    Powershell screenshot
  6. When it is complete, go to your site in the browser, go to the Images folder, and you’ll see that the images have been added to your site!
    New images added

Additional notes

  • You can re-provision your site as many times as you want. Adding files with PnP will rewrite the existing version of the file that is already up, so if, for example, you want to replace the computer.jpg image with an updated version, you can replace the computer.jpg image in your folder structure with a new version, and then redeploy the script. PnP/Powershell will push the new version of the image up to the site.
  • PnP/Powershell provides a way to easily reproduce site structures across site collections. You can easily deploy this to a different site collection, as many times as you want, and it will do the same thing every time. As you think about how PnP/Powershell can deploy content types, list structure, page layouts, and more, you can appreciate even more the powerful site templates that you can create with a PnP/Powershell solution.

Leave a Comment

Your email address will not be published. Required fields are marked *

Enter Code *

Filed Under

Related

Anyone who has 'attended' a physical meeting by 'conferencing in' in knows the frustrations & limitations that come from not being in the room. You're the voice in the ceiling & not equally represented in the conversation.

This is no longer acceptable.

http://ow.ly/EmFK50Fqqhu

Today, we find ourselves facing the “hybrid work paradox.”

Employees are keen to retain flexibility. At the same time, human-to-human collaboration remains important.

To marry the best of both, hone your strategy, spaces, & tech to suit employee needs.

http://ow.ly/JtVO50Fn8qX

It's the day of the show, y'all!

Join the #PixelMillWebinars this morning at 11am PST for a live panel discussion about what the #digitalworkspace looks like for a #hybrid team, & how #Microsoft365 can empower your users no matter where they're working.

http://ow.ly/q81i50FhITy

IT'S WEBINAR WEEK!

Join the #PixelMillWebinars this Thursday as we welcome key players from @OrchestrySoft, @KieferConsult, and @AP_Mortgage to discuss the hybrid work paradox and how #Microsoft365 can empower your users no matter where they're working.

http://ow.ly/2uc550FfqO6

We've all been itching to get "back to normal," but what does that mean? Are we missing out on valuable lessons learned by trying to return to something that perhaps wasn't working before?

Join us next week for a live panel discussion on the new normal.

http://ow.ly/CfsU50FdQXv

Subscribe to PixelMill's
E-news

* indicates required

Let's Talk Digital
Workspaces Today

Get In Touch