Adding Images to Your Site + Video

Watch the video

Images can be added to any text area using the HTML Editor. On all public pages, Admin and Chair users will see an Edit link or icon, which opens the HTML Editor tool.

Uploaded images must be in .png, .jpg, or .gif format.

Note: One-step upload buttons are provided throughout the software for features with integral images (Homepage, Catalog Items etc).

Images Must First be Uploaded to the Site:

Go to: Site Settings > Customize Your Site > Look and Feel > Custom Images/Files.

  1. Click Choose File button, select a .png, .jpg, or .gif image file from your computer or cloud storage.
  2. Click Upload button.
  3. Click Save.
  • To copy the image link, right-click the Right Click to Copy URL button and copy the link address. Then paste the URL into any HTML Editor text area on your site.

To Add an Image, go to the HTML Editor on the Page You Want to Place the Image On:

Note: You can add images to any text area that uses the HTML Editor. Just click any Edit Text button to open the editor and access the toolbar.

To add an image to the Online Registration page, log in as an Admin or Chair, go to Tickets > Sell a Ticket, and click the Edit Text link at the top of the page.

  • When you’re logged in as an Admin or Chair, edit tools appear on most public pages. These tools indicate areas where a text box with an HTML editor is available, allowing you to add custom text or images to that space.(see example of Catalog page below)
  • Place your cursor where you want the image to appear in the text box, then click the Image icon (shown below).

Paste Path for Image into Page:

  1. After Pasting the URL into the URL field and the image is uploaded, it will appear as its original size. If the image is wider than the viewer’s screen, users may need to scroll to see the entire image.

    You can adjust the image size by entering a specific width in Pixels or as a Percentage (%) of the screen width. Using a percentage is recommended to ensure the image displays correctly on smartphones and other smaller devices.
     
  2. The locked padlock icon preserves the image’s height-to-width ratio, so you only need to set one dimension and the other will adjust automatically.
     
  3. The Alignment field controls how text flows around the image. Choose Left or Right alignment, and the existing text will wrap on the opposite side of the image.

Make Sure to Save Your Edit:

  • The image will appear in the HTML editor immediately, but you must click Save for it to appear on the live page.

Check Result and Adjust, if Necessary:

You can add a hyper-link to images when you add the image or later as an edit.