The image shortcode displays a picture on your page or post. This shortcode has a lot of settings for you to configure as you wish – image size, alignment, lightbox and so on.
In this article, we’ll explain how to configure the image shortcode.
Displaying the Image Shortcode
To add the shortcode:
| Setting | Description |
|---|---|
| Upload Your Image | Upload your image or select one from the media library. |
| Custom URL | Links the image to the provided URL. You’ll need to add http:// to the beginning of the URL. If you leave it blank, by default upon clicking on the image, a lightbox will appear, showing a larger version of the image. |
| Custom URL Target | Opens the link in the same window or a new one. Use this option if you set the Image Link. |
Configuring the Image Settings
There are a few general settings that allow you to configure the image shortcode to your needs. If you want to change the image size, add a caption or set other stylings, you can edit the options described below.
Configuring the Image Styling
| Setting | Description |
|---|---|
| Image Width | Sets the image width. |
| Image Height | Sets the image height. |
| Image Cropping? | Enable this option to use width and height for the image. If you disable this option the width option value will be used as max-width property and image will shrink in smaller window sizes. |
| Image Circular? | Enable this option if you want your image to be rounded using CSS code. |
| Hover Style | Use this option to set a style of the image on mouse over. Available options are: Style 1, Style 2 click here to see a live representation of hover styles. |
| Align | Sets the alignment of the image. Available options are Left, Right, and Center. |
| Margin Bottom | Sets the spacing under the image. |
Configuring the Lightbox Settings
If you want to zoom in on an image in a frame, you can use the lightbox options below:
| Setting | Description |
|---|---|
| Lightbox | Allows the lightbox to appear upon clicking on the image, which will show a bigger representation of the image. |
| Custom Lightbox URL | Adds a custom URL to the lightbox instead of the default behavior of showing the same image. You can add a URL of a video or another image. You’ll need to add http:// to the beginning of the URL. |
| Lightbox Group Rel | If you use the image shortcode more than once and you want to have the lightbox version of those images shown as a combined lightbox feature with arrows to move between images, add the same value in this option for all image shortcodes of the page. |
| Lightbox iFrame Mode | If you use the Custom LightBox URL option and the content of the URL is a webpage, Google Maps or Flash, then please enable this option. |
Configuring the Visibility for Devices
The Visibility for Devices field in the settings pop-up allows you to configure the visibility of the shortcode on different devices.
You can read the Configuring the visibility for devices article for further explanation.
Adding an Entrance Animation
The Viewport Animation field in the settings pop-up allows you to hide the shortcode initially and make it visible with animation when you scroll through the browser.
You can read the Configuring a shortcode’s entrance animation article for further explanation.
Adding an Extra Class Name
The Extra Class Name field in the settings pop-up allows you to add an extra class name to the shortcode. It’s useful when you need to target the shortcode in a stylesheet or JavaScript file.
You can read the Adding a custom CSS class to a shortcode article for further explanation.
