Billboard Image

How to Change Your Homepage Banner Image

By default, the Push Button Upgrade templates embed a single image into the homepage as you work through your skin configuration before you go live. Once you launch, you can take advantage of device-specific images, and load different images to display on varying screen sizes - one for mobile, one for tablet, and one for desktop.

Create new images and save them as small.jpg, medium.jpg, large.jpg and upload them to: "YOURDOMAIN/wwwroot/Skins/Skin_#/images/home-image" via FTP. This will overwrite your current images, so be sure to take a backup if you already have files of the same name in place.

The recommended sizes for each skin are:

Why do you need three separate images?

Because your site is responsive, the size of the banner image will change based on the size of the screen being used to see it (as seen in the image at the top of this page). If you only have a single image, it will scale down and, if your image includes promotional text, this could condense the text on the image to an unreadable state. By having multiple image sizes, when your site is displayed on a smaller screen the image with the best dimensions is displayed automatically and the text will be preserved.

How to Change Your Billboard Image Link

1. In the admin console, navigate to Content > Manage Topics
2. Edit topic: 0-home-billboard-image
   (You can search for Home in search bar to narrow results.)
3. Click the <>HTML button on the bottom of the text editor window to view the page in HTML.

You should see code similar to this:

<div class="billboard-wrapper">
<figure>
<picture>
<source srcset="(!SkinPath!)/images/home-image/large.jpg" src="(!SkinPath!)/images/home-image/large.jpg" media="(min-width: ###px)"></source>
<source srcset="(!SkinPath!)/images/home-image/medium.jpg" src="(!SkinPath!)/images/home-image/medium.jpg" media="(min-width: ###px)"></source>
<source srcset="(!SkinPath!)/images/home-image/small.jpg" src="(!SkinPath!)/images/home-image/small.jpg" media="(min-width: ###px)"></source>
<img srcset="(!SkinPath!)/images/home-image/medium.jpg" src="(!SkinPath!)/images/home-image/medium.jpg" alt="Homepage Image" />
</picture>
</figure>
</div>

In order to make this image a link, you must add the following bit of HTML code just above the Figure tag like below. Ensure that the </a> closing tag is placed below the </figure> tag at the bottom of the text editor. This is telling your site that the image is a clickable link that takes them to the page you want.

<a href="YOUR URL HERE">
<figure>
...Code For Image Goes Here...
</figure>
</a>

After adding image link, you should see something similar to this:
(That added link code is in red.)

 
<div class="billboard-image">
<a href="YOUR URL HERE">
<figure>
<picture>
<source srcset="(!SkinPath!)/images/home-image/large.jpg" src="(!SkinPath!)/images/home-image/large.jpg" media="(min-width: ###px)"></source>
<source srcset="(!SkinPath!)/images/home-image/medium.jpg" src="(!SkinPath!)/images/home-image/medium.jpg" media="(min-width: ###px)"></source>
<source srcset="(!SkinPath!)/images/home-image/small.jpg" src="(!SkinPath!)/images/home-image/small.jpg" media="(min-width: ###px)"></source>
<img srcset="(!SkinPath!)/images/home-image/medium.jpg" src="(!SkinPath!)/images/home-image/medium.jpg" alt="Homepage Image" />
</picture>
</figure>
</a>
</div>

If you want to edit the image link after adding it in, go back to 0-home-billboard-image and change the URL within the parenthesis after <a href= to the new location.

 
<div class="billboard-image">
<a href="THIS IS WHERE THE LINK GOES">
<figure>
<picture>
<source srcset="(!SkinPath!)/images/home-image/large.jpg" src="(!SkinPath!)/images/home-image/large.jpg" media="(min-width: ###px)"></source>
<source srcset="(!SkinPath!)/images/home-image/medium.jpg" src="(!SkinPath!)/images/home-image/medium.jpg" media="(min-width: ###px)"></source>
<source srcset="(!SkinPath!)/images/home-image/small.jpg" src="(!SkinPath!)/images/home-image/small.jpg" media="(min-width: ###px)"></source>
<img srcset="(!SkinPath!)/images/home-image/medium.jpg" src="(!SkinPath!)/images/home-image/medium.jpg" alt="Homepage Image" />
</picture>
</figure>
</a>
</div>

NOTE: The redundant "src" parameter is added for compliance with Internet Explorer 11