PhotoShelter Hosted & Embedded Content

Table of Contents:
 

• Create an Embed Code for an Image or Video

• Embedding the Asset

• Resizing an Embedded iFrame

• Create a Direct Link to any Asset
  
  + Embed & Direct Link Permissions

  + Embed & Direct Link Versions
   

Create an Embed Code for an Image or Video
 

• Select an image or video file and look for the Embed & Link 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
• 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. 

Create a Direct Link to any Asset

In addition to image or video embeds, you can create a direct link to any original asset in your account:

• Select any asset and open the Embed & Link accordion in the right pane
• If an asset has not previously been linked, click Get Direct Link to generate the link
• Once a link is generated, it is static and can be copied by anyone with Library access. 
• You can also revoke the direct link for an asset using the trash icon

Embed & Direct Link Permissions

Embed Codes and Direct Links are entirely separate from how assets are shared on your portal. As such, embeds and direct links will be visible to anyone with access to the website (or document) where they are used regardless of the sharing 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 (or by revoking a direct link). 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.

 

Embed & Direct Link Versions

Images in PhotoShelter are able to be related to earlier and later versions of themselves using the Image File Versioning feature. Embeds and Direct Links 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.