Inline Images

Last edited 9/2/2022
Image Galleries are great for sharing images with our preset layout options and are a great way to set up most pages. While these have a lot of options for setting up dynamic pages, you can also embed images in your main website content, outside of the galleries, with just a few extra steps.

 

For intermediate to advanced website editors, Tentaroo supports embedding responsive inline images. This is an intermediate to advanced technique because it requires:

  1. Some knowledge of HTML.
  2. Setting up a separate "DRAFT" page to host your photos.
  3. Optional use of other advanced features such as responsive columns.

How to Embed Inline Images

  1. Host your image online.
    • Add your image to a gallery. We recommend setting up a DRAFT Photos page (or several if you have lots of images and multiple categories) to host photos. These DRAFT pages will be omitted from search results. 
      • Note: This process works from any gallery, including those on published pages.
    • Set the gallery layout to Gallery Grid.
    • View the page in a new tab.
  2. Copy the link.
    • On your DRAFT Photos page, right click on the image and select Copy Image Address.
    • For a higher resolution image, first left click on the image to load the carousel, then right click and select Copy Image Address from there.
  3. Embed the image.
    • In the content editor of the page you are adding the image to, switch to Source view.
    • Find the location you wish to add the image and paste this code:
      • <img class="img-responsive" src="LINK" />
    • Highlight the word LINK and paste the image URL between the quotation marks. 
  4. Save and preview your page.

Additional Options

The above instructions are simply to post an image within the content. To enhance the page, there are a few other features you can use. 

  1. Responsive Columns - Use these to place your image beside text or to reduce the displayed size of the image while still fitting mobile screens.
  2. Hyperlink the Image - Using the same image link, add a hyperlink to the displayed image so a user can click on it and open it larger for viewing. Setting the link to open in a new window or tab ensures they don't lose your website.

 

We are always happy to assist with training.

Contact Tentaroo
Schedule a Training