Microsoft Sharepoint

Embedding an Image in a PixieBrix Panel

Open the file in Sharepoint and click the "3-dot menu" and then click "Embed"

Click Copy embed code:

That will copy an embed code to your clipboard. For example:

<iframe 
  src="https://pixiebrixoffice-my.sharepoint.com/personal/todd_pixiebrixoffice_onmicrosoft_com/_layouts/15/embed.aspx?UniqueId=43f4044d-69bc-4daf-890b-1623cc32e75e" 
  width="640" 
  height="360" 
  frameborder="0" 
  scrolling="no" 
  allowfullscreen 
  title="7-cat-png-image-download-picture-kitten.png">
</iframe>

In the PixieBrix Document Builder, add a "Brick"

Paste the embed code into the Document Builder. Then, add an HTML Renderer Brick:

Toggle "Allow IFrames" ON, and paste the Sharepoint Embed Code

If you don't toggle on "Allow IFrames", the HTML Renderer brick will strip out the iframe tag(s) from the HTML

If you're embedding the image in the sidebar and the image width is larger than 400px, change the width to 100% to prevent the image from extending off the edge of the sidebar.

<iframe 
  src="https://pixiebrixoffice-my.sharepoint.com/personal/todd_pixiebrixoffice_onmicrosoft_com/_layouts/15/embed.aspx?UniqueId=43f4044d-69bc-4daf-890b-1623cc32e75e" 
  width="100%" 
  height="360" 
  frameborder="0" 
  scrolling="no" 
  allowfullscreen 
  title="7-cat-png-image-download-picture-kitten.png">
</iframe>