How to Update HTML Banner Block

Site:	Harman Professional Training
Course:	HTML Block Documentation
Book:	How to Update HTML Banner Block

Printed by:	Guest user
Date:	Thursday, May 15, 2025, 4:57 AM

Intro
Add HTML Block
Configure Block Settings
Add Images
Custom Code

Intro

The purpose of this documentation is to walk through the process of updating the HTML Block designed for the top area of the page.

This HTML block has a scrolling banner set of images as well as smaller block image links to Online Courses, Instructor Led Courses, Certifications, Webinars, and Product Videos.

Add HTML Block

From the desired site/course page, use the following steps to add the HTML Block:

Select Turn editing on to enable the editing features of the page
Select the Add a block plus icon in the top block region
Scroll or search to find the HTML block option
Select the HTML block option to add it to the page

Click or touch for a larger view

Configure Block Settings

Use the following steps to set up the new HTML block:

Select the Edit icon to open the menu
Select Configure (new HTML block) block
Under Common block settings, unmark the Allow block hiding option so that learners do not inadvertently hide the block
Under Block appearance, unmark Show header so that the block does not have an unnecessary header area above the scrolling banner images

Add Images

Before working with the HTML Block code, it is necessary to add all the desired images into the block using the HTML editor.

This is a critical step as it will provide the image URLs needed within the custom code.

Prepare Images
Upload Images

Prepare Images

Prior to uploading, it is recommended to crop the images to the following width for optimal display:

Scrolling Banner images: at least 1920 pixels wide
Grid link images: at least 600 pixels wide
The height of the images can be whatever is desired to control the shape and overall height of the interface. "Taller" images will be scaled to fill the space of the container and result in larger (taller) block.

Upload Images

When the images are ready, scroll to the Content area within the Custom block settings.

Select the Image button in the HTML editor area
Select the option to Browse repositories
Use the familiar File picker to select the image from the saved location
Continue this process until all images are added to the block

Custom Code

After all images are added in the block, it is time to get into the code!

Code View
Updating Images
Updating Links

Code View

Use the < > HTML code view button on the HTML editor to view the code.

Place cursor after all the images, then copy and paste the following:

<div id="rotator" class="rotator rein-plugin">
    <div id="photo_1" class="photo">
        <img src="addBannerImage1URL" alt="" role="presentation" class="img-responsive">
    </div>
    <div id="photo_2" class="photo">
        <img src="addBannerImage2URL" alt="" role="presentation" class="img-responsive">
    </div>
    <div id="photo_3" class="photo">
        <img src="addBannerImage3URL" alt="" role="presentation" class="img-responsive">
    </div>
</div>

<div id="" class="gridboxes">
    <a class="gridboxlink" href="AddOnlineCoursesLink">
        <img class="gridimg" src="AddOnlineCoursesImageURL"><span class="gridtxt">Online Courses</span>
    </a>
    <a class="gridboxlink" href="AddInstructorLedLink">
        <img class="gridimg" src="AddInstructorLedImageURL"><span class="gridtxt">Instructor Led</span>
    </a>
    <a class="gridboxlink" href="AddCertificationsLink">
        <img class="gridimg" src="AddCertificationsImageURL"><span class="gridtxt">Certifications</span>
    </a>
    <a class="gridboxlink" href="AddWebinarsLink">
        <img class="gridimg" src="AddWebinarsImageURL"><span class="gridtxt">Webinars</span>
    </a>
    <a class="gridboxlink" href="AddProductVideosLink">
        <img class="gridimg" src="AddProductVideosImageURL"><span class="gridtxt">Product Videos</span>
    </a>
</div>

Updating Images

Use the following steps to update the custom code with the images and ensure that everything will display properly:

Highlight the desired Image URL from the top of the HTML area
Paste the Image URL into place in the provided custom code
Save changes to confirm that the images are displaying properly

Note: When all Image URLs are added in the custom code, delete the image codes from the top of the HTML area. This leaves only the custom code with the desired images in place.

<div id="rotator" class="rotator rein-plugin">
    <div id="photo_1" class="photo">
        <img src="AddBannerImage1URL" alt="" role="presentation" class="img-responsive">
    </div>
    <div id="photo_2" class="photo">
        <img src="AddBannerImage2URL" alt="" role="presentation" class="img-responsive">
    </div>
    <div id="photo_3" class="photo">
        <img src="AddBannerImage3URL" alt="" role="presentation" class="img-responsive">
    </div>
</div>

<div id="" class="gridboxes">
    <a class="gridboxlink" href="AddOnlineCoursesLink">
        <img class="gridimg" src="AddOnlineCoursesImageURL"><span class="gridtxt">Online Courses</span>
    </a>
    <a class="gridboxlink" href="AddInstructorLedLink">
        <img class="gridimg" src="AddInstructorLedImageURL"><span class="gridtxt">Instructor Led</span>
    </a>
    <a class="gridboxlink" href="AddCertificationsLink">
        <img class="gridimg" src="AddCertificationsImageURL"><span class="gridtxt">Certifications</span>
    </a>
    <a class="gridboxlink" href="AddWebinarsLink">
        <img class="gridimg" src="AddWebinarsImageURL"><span class="gridtxt">Webinars</span>
    </a>
    <a class="gridboxlink" href="AddProductVideosLink">
        <img class="gridimg" src="AddProductVideosImageURL"><span class="gridtxt">Product Videos</span>
    </a>
</div>

Updating Links

After adding all the images, adding links will seem simple!

Use the following steps to add links to the desired places:

Select the < > HTML button to return to the code view
Copy the desired page URL (Online Courses, Certifications, Webinars, etc.)
Paste the page URL in the appropriate place
Save changes to confirm that everything is displaying and working properly


<div id="" class="gridboxes">
    <a class="gridboxlink" href="AddOnlineCoursesLink">
        <img class="gridimg" src="AddOnlineCoursesImageURL"><span class="gridtxt">Online Courses</span>
    </a>
    <a class="gridboxlink" href="AddInstructorLedLink">
        <img class="gridimg" src="AddInstructorLedImageURL"><span class="gridtxt">Instructor Led</span>
    </a>
    <a class="gridboxlink" href="AddCertificationsLink">
        <img class="gridimg" src="addCertificationsURL"><span class="gridtxt">Certifications</span>
    </a>
    <a class="gridboxlink" href="AddWebinarsLink">
        <img class="gridimg" src="AddWebinarsImageURL"><span class="gridtxt">Webinars</span>
    </a>
    <a class="gridboxlink" href="AddProductVideosLink">
        <img class="gridimg" src="AddProductVideosImageURL"><span class="gridtxt">Product Videos</span>
    </a>
</div>