Share:
ClickHelp Documentation

Image Preview - Lightense

 

In ClickHelp, you can have clickable images that show up in a larger size. To do this, you should use the Lightense library. The instruction is below.

  • Go to the Lightense library page and download the library zip archive. It is covered by the MIT license, which means anybody can use it for free, and even re-distribute it if they keep the original license text included.
  • Unpack the zip archive.
  • Take the lightense.min.js file from the package and upload the file to the Scripts tab of the File Manager.

  • Once the file has been uploaded, select it, and you will see its full URL at the bottom of the File Manager window.

  • Open your project settings, and navigate to the Topic Master Page screen.

  • On that screen, add the below code to the Topic Footer HTML
    HTML
    <script src="/resources/Scripts/lightense.min.js"></script>

    <script>
    // Init Lightense
    window.addEventListener('load', function () {
    Lightense('img.lightense:not(.no-lightense)');
    }, false);
    </script>

  • Then navigate to the Basic settings screen and open your project CSS file.

  • When the file is opened, click Lock&Edit, and add the following class definition at the end of the file:
    HTML
    .lightense
    {
    max-width: 300px;
    }

This class does two things - first, it sets the maximum image width (you can change it in the class definition), and second, it will tell the Lightense library which images to handle when a topic opens.

Now, after you insert an image to a topic, the only thing you need to do is assign the lightense class to it:

  • Click on your inserted image, then click Image Properties...

  • Set the Size option to the Original image size value to make sure the custom inline styling won’t conflict with CSS lightense styles and the image will be displayed properly:

  • Choose Style Settings and assign the lightense class to the image.

  • Click OK.

You've learned how to make clickable images.