Changing Secondary Page Hero Image

Image Requirements

In order for an image to look good in this space, it needs to be of a certain size and orientation.

Image Sizing

Because this image stretches all the way across the page, it needs to be of a size that doesn’t look blurry on larger screens. While the height may vary a bit (though should be at least 300-400px high), the width should be at least 1600px wide for best look. (However, we don’t want it to be too much larger than that, either – if it’s above 1900px wide, we should try to size it down or have design size it down appropriately for us, otherwise it will cause longer loading times.)

Example:

 

A low res photo causes artifacting and looks blurry/unprofessional. The image provided in the example was about 400px wide.

 

Open

 

Open

 

A high-res photo like this is HUGE in filesize (48.3 MB!) and will cause slow loading times, not to mention it is much wider than the appropriate filesize. We’ll want to size this down.

Placement of Elements on Images

Because this image is functioning as a “background” rather than being an image that is placed directly on the page, this means that not all parts of the image will always show, and there shouldn’t be any text or parts that need to be read. If the dealer wants to place an image that has specific text that needs to be read, then this should be an Image Rotator instead of the hero image.

Example:

Orientation of Image Elements

Because this image is being placed in a horizontally-oriented space, an image with a more vertical composition is not likely to look good in this space or be easily parsed.

Example:

Adding New Image

Once you have your optimal image in the appropriate size, it’s time to place it on the page. However, unlike some images on pages in ICC, you cannot simply click on the image and replace it by uploading another one, so we’ll have to follow a slightly different technique. (You may also skip the uploading step if you have FTP access and can simply place the image in the images folder for the dealer!)

Uploading the New Image

First, we will need to upload the new image that is replacing the current one. We can do this anywhere we want on the page, but we should be careful to ensure we don’t accidentally interrupt any content on the page in some way. If you add a placeholder at the top or bottom of the page, that will work just fine. Hit “Ok” on the code editor once you’ve done so.

Once you add the placeholder, highlight it and click the Insert Image button. This will prompt you to give the image a title – doesn’t matter what it is, just fill it out and let it upload the image.

Replacing the URL

Now that you have a URL for your new image, you’re going to transplant it from where you uploaded it on the page to the appropriate spot in the hero area. Hop into the Code Editor and copy the image URL only.

(You don’t need to keep the ?modified= stuff after the .jpg; you can for ease of use, but you can also delete this part off.)

Once you have that, you’ll want to paste it in the spot where the old image’s URL is at the top. Take care not to disturb any of the characters around the code as you do this (i.e. the (' or ');”>).

Next, we’ll need to delete the extra image we added in the last step.

Deleting the Extra Image

Now that you have the new image in place at the top, make sure you delete the code for where you uploaded it earlier from the page before you click “Ok” on the code editor.

You’ll now see the new image you uploaded in the “background” area at the top of the page.

And you’ll want to double check that you don’t see it again wherever you put your placeholder, before hitting Save & Publish.

Adjusting Standard Subhero Styling

The subhero by default has a dark overlay on the image so that the text that is placed on the hero can be easily read. Because of this, darker images may be difficult to see. We can adjust the overlay if needed, or the color of the text in the CSS – but we should only do this if the new changes are going to apply to all secondary pages, for better support going forward.

All of the below adjustments can be found in the section of the CSS called “Subpage Hero”.

Overlay

On the subpage hero section of the CSS, there will be a section called .subpage-hero:after that contains the rules for the overlay on the image.

Example:

The only properties we should need to edit here are the background and the opacity properties.

The background property tells the overlay what color to be. In this example, it is set to black (#000), but if you wanted to change the overlay color to blue, for example, you could use a blue hex code in place of the #000, changing it to background: #7393B3; instead.

The opacity property tells the overlay how transparent to be. The default is usually set to .6 (aka 60%), but this can be moved up or down depending on what you need to accomplish (does the dealer want to be able to see the photo MORE? Turn it down. Or is the text to hard to read? Turn it up.). 0.1 is almost barely visible, where 0.9 is almost entirely opaque.

Text Size & Color

On the subpage hero section of the CSS, there will be a section called .subpage-hero which contains the text color of the header.

Example:

In this section, we have a property called color which controls the color of the font. By default, this will be set to #fff (white), but can be changed to another hex code color. Be careful not to choose a color that is not legible against the background.

You may also change the size of the text in the .subpage-hero h1 section. This may not contain specific overrides in it, so I will explain how to add them.

Example:

Currently, this contains no information about the font size or alignment. If we wanted to add that, we could use the following and place it inside of the {} brackets:

font-size:#px;

Ex: font-size: 38px; The # would change the size of the font. If the font is too small on the subpage-hero, we could make this a larger number to ensure the font was big. However, you should be cautious with this as the font being too big could cause it to display improperly on smaller devices. This field can also accept other forms of sizing, such as vh/vw units (which measure the size of the font based on the window size).

Background Size/Position

Under the subpage-hero section you will find some parameters which control the positioning of the background image. You may find it helpful in some circumstances to adjust these.

Example:

The parameters we want to look at here are background-size, background-position, and background-repeat.

background-size changes how the background interacts with the size of the container. See here for example & parameters you can use. The default is cover, but there may be reasons to use others.

background-position controls what part of the image is going to show in the container. The images we use for these subhero areas are not the same size as the container, so it needs some instructions for what part of the image to focus on. See here for example and parameters you can use. The default is center, but there may be reasons to use others.

background-repeat decides if the background image is going to repeat and how. If background-size is set to cover, then you don’t need the background to repeat as the background will cover the whole container. However, if we were to place a small tile that needed to repeat for a pattern, we may want to use background-repeat instead. See here for example and parameters you can use. The default is no-repeat.