Image Replacement Widget

Owned by Danny Gibas
Last updated: Jul 15, 2022
2 min read

Some resorts that are set up on Theme Designer may want the ability to update their hero images on their own. For this we provide this NOP HTML Widget.

Caveats for use

  1. The replacement images must be the same size as the image being replaced. Please refer to the theme documentation for information on image sizing.

  2. It is strongly recommended that image file sizes for replacement images do not exceed 400Kb for performance reasons.

  3. Resorts must have access to a service where they can upload and host images and the image must be accessible via URL.

  4. This widget is only intended for use with Theme Designer sites. Your success on using this with non Theme Designer sites may vary.

  5. IMPORTANT: If the site is set up to use the dynamic hero option, then you cannot use this widget to set the main category hero as the image will be pulled from the category images instead. The other images can be changed with the widget, but not the main hero. The main hero image swap will only work if the site uses the static hero option.

TIP: For a free tool for reducing image sizing go to https://tinypng.com. It can often be used with no noticeable degradation in quality to reduce an image size.

Installation

From within the clients NOP Admin, go to NOP-Templates → PLUGINS → HTML WIDGETS → Manage HTML Widgets

  1. Add new HTML Widget

  2. Name the new widget “Hero Replacement”

  3. Under HTML Content, go to Tools → Source Code

  4. Add this HTML Snippet and update the content as needed for the resort.

    1. Replace the CAPITALIZED TEXT in the CSS with the full path to the replacement image. Example: background-image: url(https://www.brandsite.com/images/image.jpg);

    2. DO NOT wrap the URL in quotes

    3. IMPORTANT! Remove the CSS from the widget for those images you are not replacing or the default image will break. Only include the CSS for the image(s) you are replacing.

      #body #hero-image is for replacing the main hero if dynamic hero is not enabled
      #body #hero-image.half-hero-default is for replacing the half hero (My Account)
      #unity-checkout:before is for replacing the background image in checkout
      .html-login-page .base-contentHeader .background-image is for replacing the Login page background

<style><!-- #body #hero-image { background-image: url(URL FOR CATEGORY HERO IMAGE GOES HERE); } #body #hero-image.half-hero-default { background-image: url(URL FOR MY ACCOUNT IMAGE GOES HERE); } #unity-checkout::before { background-image: url(URL FOR CHECKOUT BACKGROUND IMAGE GOES HERE); } .html-login-page .base-contentHeader .background-image { background-image: url(URL FOR LOGIN BACKGROUND IMAGE GOES HERE); } --></style>

5. Click Save and Continue Edit

6. Select the Widget Zone tab, and Add New Record.

7. Assign to Widget Zone: body_start_html_tag_after