Skip to main content
All CollectionsFor All AdminsWebsite Design
How to Add a Generic Photo or Ad Banner
How to Add a Generic Photo or Ad Banner
Updated over 5 months ago

Permissions are required to edit the website. Click here to learn how to view your permissions.

When you want to add an image somewhere on a page without using a full-blown content editor, use the Generic Photo component. This is handy for ad banners when you want to feature a sponsor with a larger image than what is possible in the Sponsors & Partners area.

Helpful Tip: Once you receive the Safe Sport badge from USA Swimming, use the steps below to add it to your website header.

How to Add a Generic Photo Component

  1. Click the Layout Section overlay where you want to add the photo.

  2. Click Select component(s) to add.

  3. Click the Generic Photo checkbox.

  4. Click Select.

  5. Drag the Generic Photo component bar to where you want it to appear among the other components if desired.

  6. Click Save.

How to Add the Image

  1. Click the Generic Photo overlay.

    Generic Photo overlay
  2. If desired, click Download Stock Images on the right to open a site where you can download a zip file of images by sport, then unzip the file to access them for the next step.

  3. Drag and drop an image (up to 2000x2000 pixels) onto the Upload Photo dotted line area, or click the area and then double-click the desired image.

  4. Display mode — Leave as Relative to let the system resize the image for different screen sizes. It will generally expand to fill the size of the image container. Select Absolute to enter specific sizes for each format if you want more control.

    Display mode/Display sizes
  5. Display sizes — There are two pieces to this.

    • When you uncheck any of the boxes for Desktop, Tablet, and Phone, it will hide the image when the page is viewed on that device type. This allows you to add multiple Generic Photo components in the same Layout Section and upload a customized image for each device type. Uncheck the box(es) for devices on which the image is to be hidden.

    • When Absolute is selected above, you can enter the dimensions for each checked device type. Click the Unit dropdown to choose whether the dimensions are in Pixels, %, or Characters.

  6. Alternate text — Type a short image description (such as a sponsor name) to be read aloud by screen readers for the visually impaired and crawled by search engines for SEO.

  7. Horizontal alignment — If the Generic Photo container is wider than the image, you can set the image to be in the container's Left, Center, or Right part.

  8. Vertical alignment — If the Generic Photo container is taller than the image, you set the image to be in the container's Top, Center, or Bottom part.

  9. Click Link to — Navigate to a page or URL when the user clicks the image. This is where you would enter the URL of a sponsor's website. Set Open Link in to New Window if it's an external website.

  10. Click Save.

Did this answer your question?