Your HarmonySite comes with a slideshow in the middle of the homepage, which displays a selection of pictures and automatically rotates through them. We also call these pictures "banners".


There's a page in your HarmonySite which lets you manage these "banners". Here's how to find it:


  1. Click on the "Admin" link in the top-right of your screen.
  2. On your Admin dashboard, look for the Website Content section.
  3. Click on the link which says Banners (home page).


To change the order in which the pictures appear, you can actually drag-and-drop the banners on this page. This is much easier than working out the "Display rankings" yourself!


You can click Deactivate to stop a picture from appearing on the homepage (but still keep it in the system in case you need it later).


If you want to get rid of it permanently, you can click Delete.


Now for the most important information...


Uploading a new banner picture


You need to know which theme you're using, as this changes how the banner photos work! I'll show you the three most common styles here.


#1: Most people (as of 2023) are using the normal "Stockholm" theme, which looks like this:



#2: Some people are using the "Stockholm" theme with full-screen slideshow, which looks like this:



#3: And some people are using the new "Mercury" theme, which we just introduced in 2023:





If you're using #1: normal "Stockholm" theme or #3: new "Mercury" theme, then follow these steps to add a new banner:


  1. Click Add new banner in the upper-right.
  2. Then, enter a name for this banner. (This is just for your reference; it doesn't appear anywhere.)
  3. Choose a photo to upload.
  4. Enter a "Display ranking" for this banner photo. (As mentioned above, you can easily re-order the photos on the previous page, so this number isn't too important.)
  5. Finally, click "Save".


If you're using #2: "Stockholm" theme with full-screen slideshow, then follow these steps:


  1. Click Add new banner in the upper-right.
  2. Look for the yellow box near the top which says Note: If this HarmonySite uses the "Stockholm" theme, and this banner is to be used in a "full-screen slideshow"... Click the link which says "this form".
  3. Enter a name for this banner.
  4. Choose a photo to upload.
  5. Enter a "Display ranking".
  6. Finally, click "Save".


Can I use a video instead of a picture?


Yes, you can! To do this:

  1. First, upload the video to YouTube. (If you don't want the video to appear when people search YouTube, then you can set the video as "unlisted".)
  2. Then, copy the video's URL, which looks like this:
  3. Now, add a new banner. This time, instead of uploading a photo, paste in this URL into the box which says YouTube Video URL.


How can I make the pictures exactly the right size?


You may notice that there's a yellow box telling you the dimensions you need for the photo:


  • If you're using #1: the normal "Stockholm" theme, it will say exactly 1150 x 448 pixels.

  • If you're using #2: the "full-screen slideshow" variant, or #3: the "Mercury" theme, it will say approx. 1200 x 800 pixels.


#2 and #3 are more relaxed – the picture just needs to be approximately in the right ratio, and it will look fine, filling the whole page.


#1, the normal "Stockholm" theme, is more strict. In this case, the picture needs to be exactly 1150 by 448 pixels in size.


Why do we say this? It's because the picture needs to fit in the correct space on the page. If it's too tall, for example, then it will spill under your homepage's content just below the photo.


However, making a photo to be these exact dimensions can be tricky. People frequently ask us for help with this – we are perfectly happy to do this, of course! But you may wonder how we do it...


We can't just type in 1150 by 448 into our image program, because then it would make the picture stretched or squashed. It takes a couple of steps of both cropping and resizing to get the picture into the right dimensions, without squashing it.


Some general guidelines are:


  • If the picture is too wide, then try resizing it to be 448px tall first. Then, crop the sides until it's 1150px wide.
  • If the picture is too tall, then try resizing it to be 1150px wide. Then cut off the top and bottom until it's 448px tall. This is less likely to work, however, so see the next point...
  • If there's no way to resize the picture without cutting off something important, then you can add some blank space. This often happens with photos that are more square-ish. In this case, I usually add some white rectangles to the left and right, so that the image file can be the correct dimensions.
  • Depending on where the important things or people are in the picture, you might have to adjust these steps – it can be a game of trial-and-error.


What software do I need to do this?


Any image editing software should be able to do this. Your computer might have something basic installed already – however, if you need recommendations:



How can I make the slideshow change faster/slower?


There's a setting in your HarmonySite configuration to do just this! Here's how to change it:


  1. Click the "cog" icon in the top-right.
  2. Click the "cog" icon on the line which says "HarmonySite".
  3. Now in your HarmonySite configuration, click the tab which says Appearance.
  4. You'll see a box which says Timing for home-page slideshow.
    • Type in a number of seconds here – this is how long each picture will appear for.
    • 5 seconds will be a fast slideshow; 10 seconds will be pretty slow.
  5. Once you've made your change, scroll to the bottom of the page and click Save.


Quote boxes


These allow you to add some text which will appear on top of the photo. When you add a new banner, you'll see an area near the bottom of the page, where you can write this text for the "Quote Box":



Again, there are some points which apply for the normal "Stockholm" theme:

  • With this style, you can customise where the quote box appears for each picture. To do this, on the main Banners page, look for the links which say Adjust Quote Box.
  • However, by default, these quote boxes don't appear when you visit your site on a phone.
  • We can enable this for you, if you drop us a message to ask. (This involves adding some CSS code to your site.)