Creating Banner Images for Browse
Banner images can be displayed in Browse when browsing product classifications: sectors, ranges and groups. Banners can be sourced from suppliers or can be created by your design team. HorizonWeb Plus customers can ask our Digital Services team to make banners for their sites as part of the service.
Guidelines for Creating Banners
Banners must be graphics files that can be displayed by a web browser (see Common Image Formats (external link)). Note that they are not "HTML5 banners" which are created by applications like Google Web Designer and have additional code to manage animation, responsive design and feedback.
Your designer should choose a size that works with your design. We don't scale the image automatically. For the examples below, click each image to see the full size, depending on the device you are using.
- To work with the out-of-the-box HorizonWeb template, an image width of 640px works well.
- The Interactive Advertising Bureau (IAB, a trade organization) have defined banner sizes for advertisers. You may find that banners sourced from suppliers will use those sizes, so your designer could take that into consideration.
Uploading Your Banner
After a banner has been created, it should be uploaded to make it available for inclusion in your web pages.
Uploading to Content Delivery Networks
Some designers prefer using a Content Delivery Networks (CDN) for hosting images, as they spread the load on servers which can improve performance. Your image will have an address (or URL). In this case, the full, or absolute, address should be used when configuring Product Ranges and Groups in Horizon.
Uploading to HorizonWeb
You can upload new images to your HorizonWeb site.
- Click Admin > HorizonWeb Designer > File Manager. The File Manager window opens.
- Click Browse… . The Open window opens.
- Browse to the file you want to upload. Click the file to select it, then click Open.
- The file-name is added to the Browse box. Click Upload.
Note: You can only upload files that are less than 2MB in size. A warning is displayed if the file is too large.
- The files are sorted by alphabetical order. To view the file in a browser, use the address: <site address>/images/<imagefile>, for instance, http://www.horizon-web.co.uk/images/Add.png .
When configuring Product Ranges and Groups in Horizon, you can use the end of the address, a relative address, because your HorizonWeb site knows where the images folder is. The Banner Image URL can be: /images/<imagefile>, for example /images/Add.png .