Support

Using Plugins

Installing the Plugin

Smart Search

Follow these steps to install the plugin. You need admin access to the Zendesk Help Center to be able to perform the installation process.

Presently, there isnít an automatic process to follow the instructions carefully. Itís not complicated and only should take a couple of minutes.

• Unzip the file you downloaded from Diziana.

  

• Login as admin into your Zendesk instance.

  (eg: https://yoursubdomain.zendesk.com/hc/en-us)

• Click Customize design in the Tools panel on the lower-right side of the page.

  

• Under the Theme section of the panel, click Edit theme.

  

• Click and select “document.head”.
• Copy paste the following at bottom of the your document.head editor.

  

  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/0.9.9/jquery.magnific-popup.min.js">

• Click the CSS tab in the Theme editor.
• Open the downloaded file “Lightbox_CSS.txt” in a text editor.
• Copy and paste the full contents of the file in the code view after all the existing code.

  

• Click the JS tab in the Theme editor.
• Open the downloaded file Lightbox_JS.txt in a text editor.
  Copy and paste the full contents of the file in the code view after all the existing code.

  

• Click the Assets tab in the Theme editor.
• Open the downloaded folder assets and upload the image file “zoom-image-popup.png”
• Copy the full image path for eg. “//p3.zdassets.com/hc/theme_assets/701504/200119982/zoom-image-icon.png”

  

• Click CSS tab and find the line

  a.image-popup {
  /* Required to update the background image path with the uploaded image path */
  	background: url('assets/zoom-image-icon.png') no-repeat scroll center #000;
  	display: inline-block;
  }

  

• Replace the path ‘assets/zoom-image-icon.png’ with the copied path.
  i.e

  a.image-popup {
  /* Required to update the background image path with the uploaded image path */
   background: url('assets/zoom-image-icon.png') no-repeat scroll center #000;
   display: inline-block;
  }
  with
  a.image-popup {
  /* Required to update the background image path with the uploaded image path */
   background: url('//p3.zdassets.com/hc/theme_assets/701504/200119982/zoom-image-icon.png') no-repeat scroll center #000;
   display: inline-block;
  }
  

• To save your changes, click the Save button at the top of the sidebar.

  

How to Use the Plugin when Authoring

This section explains how to use the plugin when authoring.

• Open the Zendesk Help Center article for editing.
• Insert the image you want to show as a pop-up.
• Click the Source code button in the Content toolbar.
• Find the inserted graphic that will look something like this:

   
  <img src="/path/name.png" alt="" />

  

• Replace the line above with the following. You will need to use the same path and file name in the new code.

  <a href="INSERTED-IMAGE-Full-PATH" class="image-popup">
  	<img src="INSERTED-IMAGE-PATH" width="YOUR-THUMB-IMAGE-WIDTH" height="YOUR-THUMB-IMAGE-HEIGHT" />
  </a>
  				

  

  In our case, if we want our thumbnail picture to have a height of 100 pixels and width of 50 pixels, the line would show as this:

  <a href="INSERTED-IMAGE-Full-PATH" class="image-popup">
  	<img src="INSERTED-IMAGE-PATH" width="50" height="100" />
  </a>
  				 

  You only need to specify either width or height to resize the thumbnail.
  The top line contains the link to the picture that will show in the Lightbox.
  The second line, with the “src”, is the thumbnail picture. Normally it’s the same picture. You have the option of putting another picture there.

• Update your article

   
  <img src="/path/name.png" alt="" />

  

  

To show images in gallery

• Open the Zendesk Help Center article for editing.
• Insert the image you want to show as a pop-up.
• Click the Source code button in the Content toolbar.
• Find the inserted graphic that will look something like this:

  <p><img src="/path/name.png" alt="" /></p> 
  <p><img src="/path/name.png" alt="" /></p> 
  <p><img src="/path/name.png" alt="" /></p> 
  <p><img src="/path/name.png" alt="" /></p> 
  				

• Replace the line above with the following. You will need to use the same path and file name in the new code.

  <div class="gallery-image-popup">
    <a href="INSERTED-IMAGE-PATH" title="TITLE-DISPLAY-JUST-BELOW-THE-IMAGE-1">	
    	<img src="INSERTED-IMAGE-PATH" width="YOUR-THUMB-IMAGE-WIDTH" height="YOUR-THUMB-IMAGE-HEIGHT" />
    </a>	
  </div>
  <div class="gallery-image-popup">
    <a href="INSERTED-IMAGE-PATH" title="TITLE-DISPLAY-JUST-BELOW-THE-IMAGE-1">
  	<img src="INSERTED-IMAGE-PATH" width="YOUR-THUMB-IMAGE-WIDTH" height="YOUR-THUMB-IMAGE-HEIGHT" />
    </a>
  </div>
  <div class="gallery-image-popup">
    <a href="INSERTED-IMAGE-PATH" title="TITLE-DISPLAY-JUST-BELOW-THE-IMAGE-1">
  	<img src="INSERTED-IMAGE-PATH" width="YOUR-THUMB-IMAGE-WIDTH" height="YOUR-THUMB-IMAGE-HEIGHT" />
    </a>
  </div>
  <div class="gallery-image-popup">
    <a href="INSERTED-IMAGE-PATH" title="TITLE-DISPLAY-JUST-BELOW-THE-IMAGE-1">
  	<img src="INSERTED-IMAGE-PATH" width="YOUR-THUMB-IMAGE-WIDTH" height="YOUR-THUMB-IMAGE-HEIGHT" />
    </a>
  </div>
  			

• Update your article

   
  <img src="/path/name.png" alt="" />