Adding Images to Your Impact Site

Adding Images to Your Impact Site

Add, Replace, or Delete

This article explains how to add a new image or photo to your Impact website. If you wish to replace an existing image, go here. If you wish to delete an existing image, go here.

Overview: You first need to find the website page that you want to add the image to, add an Image block to that page, and indicate which image to add. The following instructions will guide you through this process.

Which Admin Area

Orgill’s Impact eCommerce system has two Admin areas (Elastic Path and Builder.io). All content edits, such as image changes, happen in Builder.io. If you don’t have a Builder.io login yet, refer to Requesting a Builder.io Login.

Finding the Website Page

Log into Builder.io and navigate to: Content > Content Type > Page models > Page. You will see an area with a list of all your website pages on the right.



Click on the name of the page you’d like to edit to open the Visual Editor.



Below are the instructions on how to use the Visual Editor to add images to your page.

Image Block

In order to work with images in Builder.io, you need to use an Image block.



Here's how to add an Image block to the current page.
  1. Drag an Image block from the Basics insert tab and drop it onto the work area.
  2. Click on the Image block in the work area to select it.
  3. Go to the Options tab.
  4. Click Choose Photo.
  5. Select a photo from the Asset Library or upload your own. If you upload an image, make sure each image is smaller than 100MB.
  6. Once the image is added and/or chosen, select [Publish Update] in the top right corner.
Optionally, watch a short video from Builder.io for a visual demonstration: https://www.builder.io/c/docs/images#add-an-image 

Images and Accessibility

Whenever you add an image to your site, always add Alt Text to images. Alt Text is a phrase that you provide with the image so that screen readers and search engines know what the image depicts.

To add Alt Text to an image in Builder.io:
  1. Select the Image block in the work area.
  2. Click the Options tab.
  3. Add text to the Alt text field.
The image below shows where the Alt text field is located within the Options tab. Remember that images serve as visual enhancements and should not be the only source of the information.

Delayed Update

It might take a while for the changes to appear on your public website. Due to caching, you might still see an old version of the public content for a few hours or a day, even though the updated version can be seen within the Builder.io admin area.

Visual Editor Documentation

See Builder.io documentation to learn more about the Visual Editor: https://www.builder.io/c/docs/visual-editor 

    Emerge2 is here to help with website and ecommerce enhancements, marketing, and support services.

    These articles were created by Emerge2 Digital and are part of our Emerge2 Knowledge Base.