Changing Homepage Hero Image
- Kayla Ingersoll
This article will explain how to change out the hero image for the homepage of a site in a couple different scenarios. There may be sites that do not follow these rules, but generally, most sites should fall under one of these “types” of hero images.
Homepage Hero “Background”
The majority of our sites with hero images are set up to implement the image as a ”background”. What this means is that the container that holds the hero section of the site is styled in the CSS to have a background image that sits inside of it. You will not find this image in the “content” section of the homepage in ICC – rather, you will need to edit this by changing the CSS.
As you can see from the example above, there is no image URL to be found to change out, unlike with the subpage hero area. Instead, the URL is contained in the CSS stylesheet.
To find the correct image in the stylesheet, we can go to the homepage in our browser, and use the Inspect tool to determine the name of the class of the container this image is in.
By right clicking the hero area, it’s brought me immediately to the relevant CSS in the Inspect tool. You can double check if this is the correct spot by hovering over or clicking on the image URL under the background: section.
We can copy this image URL and Ctrl+F to find it in the CSS stylesheet. (If this image is used in multiple places, make sure you confirm the class it’s referring to matches what’s at the top – in this example, .homepage #top-search-container.
Now, to replace the image, you can use one of two methods to add the new image to the site.
(Note: it is best if the file for the hero image adheres to a naming convention that includes the dealer name and “hero”-- i.e. rvdealer-hero.jpg – and is 1600px wide in size. Additionally, the image should not contain text that needs to be read like a banner advertisement – this should be reserved for a Image Rotator, not a hero section.)
If you have FTP access, you can simply open up Filezilla, go to the dealer’s folder, and drag and drop the new image into the images folder.
If you do not have FTP access, it is a little more complicated. You will need to pop into a page (any page, doesn’t matter which) and use the Add Image button to add an image to the page.
Once you’ve added the image to the page, you can hop into the Code Editor, find where the image was placed, and copy the URL from there. Do not save the page – you will want to leave it without saving so that the image does not stay on the page in question.
Once you have the image uploaded and the correct URL, we can go to the CSS tab and swap out the URL for the hero.
Navigate to the spot we found earlier, either by Ctrl+F the old image URL or the class itself. Once we’ve found the spot that designates the background image URL, we will replace it with the correct one.
Hit “Save and Publish” at the bottom, and you should be all set!
Homepage Hero Video
Typically, a homepage hero video is set up already with a Youtube embed code, similar to the one you might be able to copy off of the page when you hit the “Share” button on Youtube.
Fortunately, that code already being there makes swapping this out very easy!
The image example underlines the area in the video code that we need to change – the ID. We need to change BOTH spots where the ID is located, to ensure that the video repeats and continues playing for as long as the user is on the page.
To obtain the ID of the video, simply follow the Youtube link provided.
At the top of the page, you’ll see the URL for the Youtube video. This contains the exact ID you need to grab.
Once you’ve copied the combination of letters and characters after the “v=” in the URL, you can simply paste it into the existing infrastructure on the page. Be careful not to delete any other characters out of the formatting (there MUST be a ? after the first iteration of the ID to separate it from other instructions in the URL).
Some information about the additional breakdown of the URL is coming soon.
Homepage Hero Slideshow
Coming soon