Embedding Images and Videos on Websites

If you'd like to share an image or video on an external website without downloading it from PhotoShelter and uploading it to another server, PhotoShelter offers a convenient embedding feature. This article will guide you through the process of embedding your media and provide useful tips for optimizing your embeds. 

Getting Started

• Select an image or video file and look for the Embed Code accordion in the right pane
• If an asset has not previously been embedded, click to generate the Embed code
• Once a code is generated, it is static and can be copied by anyone with Library access simply by clicking Copy in this accordion. 
• You can also disable the embed code for an asset using the toggle in the Embed accordion

Embedding the Asset

The HTML code includes a link to a webpage where the asset is hosted and viewable contained inside an iFrame.

After you've generated the Embed code, you can paste the iFrame into the HTML editor on your external website. 

Resizing an Embedded iFrame

You may notice that some embeds have a gray border around the asset. Our iFrame will make a best-guess estimate on an embedded asset's size and scale its proportions based on the aspect ratio and orientation of the asset. In some cases, you may need to modify the width and height dimensions of the iFrame to fit your particular image or scenario. 

To do that, adjust the width and height dimensions of the iFrame inside the copied HTML embed code:

We recommend adjusting these dimensions in increments of 50px until you reach your desired fit. 

Embeds and Permissions

Embedding is considered an entirely separate action from however an asset is configured to be displayed in your Portal. As such, an embed will be visible to whoever visits the website it is embedded into regardless of the privacy settings for the gallery the asset lives in.

However, you can still control the accessibility of an asset in an embed by enabling or disabling the embed. Inside the "Embed Code" accordion, for any asset that has had its embed code generated, there is a toggle to Enable or Disable the embed. When this toggle is on, then the asset will be viewable anywhere it is embedded. When this toggle is off, then, regardless of where the asset is enabled, it will no longer be visible. Images will display the standard "Missing Asset" image for PhotoShelter and videos will display a black screen with a message indicating that the asset is not able to be viewed via an embed at this time.

Note: If an asset is embedded somewhere and is enabled, should that asset be moved into the Trash inside your PhotoShelter library, it will automatically disabled the embed.

Note: Images may often be cached in your browser's local memory, so disabling an image might cause the image to disappear right away if you already have the webpage its embedded on open. Clearing your browser cache will immediately solve this.

Embeds and Versions

Images in PhotoShelter are able to be related to earlier and later versions of themselves using the Image File Versioning feature. Embeds of images respect this feature, so that you never have to update an embedded image's code in your website if you update the version of the asset in PhotoShelter.

As soon as you add a new version to an image or activate an older version, you'll first see this warning modal alerting you to the potential impact of this action on external instances of the asset. 

If you accept this modal and activate a new version of an asset, then your image will automatically update to the active version in any locations where it is embedded.

Note: Images may often be cached in your browser's local memory, so disabling an image might cause the image to disappear right away if you already have the webpage its embedded on open. Clearing your browser cache will immediately solve this.