Image shortcode

Last Updated on

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 configuring the image shortcode.

Image Shortcode - demo

In this article


Displaying the image shortcode

To add the shortcode:

1
Add a new page or edit an existing page.
2
From the Visual Composer screen, click on the + button.

Image Shortcode - visual composer screen

3
In the Add Element pop-up screen, search for Image and click on it to be added to the page.

Image Shortcode - add element

4
When the shortcode is added, a new pop-up screen called Image Settings will opens that allows you to configure the shortcode settings.

 

5
Configure the settings as required. More settings are explained in next sections.
SettingDescription
Heading TitleAdds a title for your image.
Upload Your ImageUpload your image or select one from media library.
Image LinkLinks 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.
TargetOpens the link in the same window or a new one. Use this option if you set the Image Link.
6
Click on Save Changes and publish or update the page to check the result.

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

SettingDescription
Image SizeAdjusts the thumbnails of the image shortcode. Setting the Crop and Resize option will activate the bfi_thumb plugin and will crop the images using the PHP code. If you don’t want to have that plugin activated, select one of the other options. Available options are: Resize & Crop, Original Size, Large Size, and Medium Size.
Image WidthSets the image width.
Image HeightSets the image height.
SVG Enable?If enabled, the max-width property will be added to the image tag. You should enable this option if you are using the SVG format in the image shortcode.
Image Frame StyleSets the frame around the image.
AlignSets the alignment of image. Available options are: Left, Right, and Center.
Margin Bottom Sets the spacing under the image.
Drop ShadowEnable this option to add custom shadow feature.
Parallax ScrollEnable this option to add parallax scroll for this 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
LightboxAllows the lightbox to appear upon clicking on the image, which will show a bigger representation of the image.
Custom Lightbox URLAdds 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 RelIf 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.

Adding an image caption

There are 3 settings that allow you to add image caption and set it inside or outside the image.

Setting Description
Image Caption TitleAdds a caption title for your image shortcode.
Image Caption DescriptionAdds a caption description for your image shortcode.
Image Caption LocationSets the caption inside or outside the image.

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.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket