Clickable Image

If you’re displaying screenshots or other complex images in your documentation, use the jhdocs-clickable-image shortcode.

This shortcode helps in two important ways:

1. It constrains the image width to a reasonable value.
   • This keeps the image size proportional with the rest of the documentation.
2. It displays the image full-size in a new browser tab when clicked.
   • This is important since constraining the image size may make more complex images more difficult to see.
   • Being able to see the image full-screen in its own tab helps users get the most out of your images.

This shortcode takes the following parameters:

• src: The path to the image in your site
• alt: The alternate text to display for the image
• size: Relative image size. One of:
  • x-small: The image has a maximum width of 200 pixels
  • small: The image has a maximum width of 300 pixels
  • medium: The image has a maximum width of 500 pixels
  • large: The image has a maximum width of 700 pixels
  • x-large: The image has a maximum width of 900 pixels
• cssWidth: If you need to get the image width to a precise value, use the cssWidth parameter instead of the size parameter to specify an exact CSS width for the image, using CSS notation appropriate for the CSS “width” attribute. Any size parameter value is ignored when you specify a cssWidth.
• round-corners: Set this to a value of “yes” for rounded corners on your clickable images; set to a value of “no” for square corners. The default value is “yes”.
• border: Set this to a value of “yes” to display a border around your clickable images; set to a value of “no” for no border. The default value is “no”.
• margin: Set this to a value of “yes” to display margin around your clickable images; set to a value of “no” for no margin. The default value is “yes”.

Regardless of the size value you specify, each clickable image’s has a maximum width of 100% at mobile size, ensuring that the image always full displays on smaller devices.

Example

Below is an example of a clickable image with a size of medium. The image width is constrained to a maximum of 500 pixels. This constraint is good for layout, but it also means you can’t really see all the detail in the image.

It can be helpful to display a caption above the clickable image, as shown below:

{{< jhdocs-caption >}}
Click the image below to see it displayed in a new tab.
{{< /jhdocs-caption >}}

{{< jhdocs-clickable-image src="../../../images/clickable-image-example.png" alt="Example image" size="medium" >}}

Here is the rendered result of this markdown: