Skip to content
PathcoreScholar User Manual

Embedding an Image


The embed feature of share links may be used to create interactive experiences with images on your own web pages or to simply show notable images and annotations. To embed an image into a webpage, copy the HTML snippet provided in the share link properties dialog into your own website. Image embedding uses the HTML <iframe> tag and behaves like embedded maps that are commonly used on many websites.

Embedded images are powered by share links and have the same restrictions and behave in a similar fashion. The embed code retrieved from the Viewer provides additional flexibility — primarily the ability to control the recipient's initial view. However, the initial view for embedded images may be affected by the size of the <iframe> window that renders the image.

Embedded images may not work in browsers that restrict third-party cookies.
To retrieve the embed code for an image from the Repository

  1. Navigate to any folder in the Repository (click on the Folder Repository button from the left-hand sidebar then navigate to a folder)

  2. Right-click on the image to bring up the context menu

  3. Click Share

  4. In the popup dialog, click on the name of the share link or click on the New Share Link button to create a new one

  5. Click on the Embed Image tab

  6. (Optional) Configure the embedded image settings

    1. (Optional) Set the Width (may include units such as % and px)
    2. (Optional) Set the Height (may include units such as % and px)

  7. Click on the Copy to Clipboard button to the right of the HTML snippet to copy it to the clipboard

  8. Paste the HTML snippet into your webpage

To retrieve the embed code for an image from within the Viewer

  1. If the left sidebar is not displayed, toggle it by clicking on the Menu > button at the bottom left of the Viewer

  2. Hover or click on the Share button in the left sidebar

  3. Click on the name of the share link or click on the New Share Link button to create a new one

  4. Click on the Embed Image tab

  5. (Optional) Configure the embedded image settings

    1. (Optional) Set the Width (may include units such as % and px)
    2. (Optional) Set the Height (may include units such as % and px)
    3. (Optional) Enable the Start at current location toggle to use the current view as the initial view for the embedded image

  6. Click on the Copy to Clipboard button to the right of the HTML snippet to copy it to the clipboard

  7. Paste the HTML snippet into your webpage