Website Design: Generic Photo / ad banner
Admin Level - Webmaster
When you want to simply add an image somewhere on a page (usually the home 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.
Add Generic Photo component
- Click the Layout Section overlay where you want to add the photo.
- Click Select component(s) to add.
- Click the Generic Photo checkbox.
- Click Select.
- Drag the Generic Photo component bar to where you want it to appear among the other components if desired.
- Click Save.
- Click the Generic Photo overlay.
- 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.
- 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.
- Display mode — Leave as Relative to let the system take care of resizing 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 sizes — There are two pieces to this.
- When you uncheck any of the boxes for Desktop, Tablet, and/or 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 different image customized 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 also enter dimensions for each checked device type. Click the Unit dropdown to select whether the dimensions are in Pixels, %, or Characters.
- 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.
- Horizontal alignment — If the Generic Photo container is wider than the image, you can set the image to be in the Left, Center, or Right part of the container.
- Vertical alignment — If the Generic Photo container is taller than the image, you set the image to be in the Top, Center, or Bottom part of the container.
- On Click Link to — Navigates 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.
- Click Save.