The image shortcode allows you to display an image. The options for this shortcode are shown below. See examples here.
| Option | Default | Example | Description |
|---|---|---|---|
| src | (empty) | src="http://www.example.com/path/to/image.png" | The URL of the image to display. Use the Browse button to select an image from your Media Library or upload a new one. |
| width | (empty) | width="200" | Set the image to the given width. |
| height | (empty) | height="150" | Set the image to the given height. |
| align | (empty) | align="right" | Image alignment:
|
| hover_animation | (empty) | hover_animation="hvr-shrink" | Add an animation when the image is hovered, use the shortcode generator to see available options. |
| animation | (empty) | animation="fadeIn" | Add an animation when the block comes into view, use the shortcode generator to see available options. |
| animation_delay | (empty) | animation_delay="1500" | The animation will not start until this number of milliseconds after the element comes into view (1000 milliseconds = 1 second). |
| animation_offset | (empty) | animation_offset="200" | If the number is positive, the animation will start when the element is this number of pixels below the viewport. If the number is negative, the animation will not start until the element is this number of pixels inside the viewport. |
| custom_margin | 0 | custom_margin="1" | Enable the custom margin options. |
| margin_top | (empty) | margin_top="10" | Add a pixel value for the CSS margin-top value. |
| margin_right | (empty) | margin_right="10" | Add a pixel value for the CSS margin-right value. |
| margin_bottom | (empty) | margin_bottom="10" | Add a pixel value for the CSS margin-bottom value. |
| margin_left | (empty) | margin_left="10" | Add a pixel value for the CSS margin-left value. |
| alt | (empty) | alt="My image" | The alt attribute of the img tag. |
| title | (empty) | title="My image" | The title attribute of the img tag. |
| id | (empty) | id="my_image" | The id attribute of the img tag. |
| class | (empty) | class="my_class" | The class attribute of the img tag. |
| href | (empty) | href="http://www.example.com" | Link the image to this URL. |
| link_popup | 0 | link_popup="1" | Open link in new tab. |
| image_hover | (empty) | link_popup="1" | Image hover effect:
|
| a_icon | (empty) | a_icon="fa-info-circle" | Link icon:
|
| use_caption | 0 | use_caption="1" | Use caption overlay. |
| icon | (empty) | icon="fa-heart" | Choose the caption icon. |
| caption_title | (empty) | caption_title="My title" | Set the caption title text. |
| caption_subtitle | (empty) | caption_subtitle="My subtitle" | Set the caption subtitle text. |
| caption_overlay | hover-prime | caption_overlay="hover-dark" | Caption overlay color:
|
| caption_type | cap-slide-out | caption_type="cap-fade-out" | Caption overlay color:
|
| frame | none | frame="style2" | The image frame style:
|
Examples
[image src="http://www.example.com/image.png" alt="My image"]
[image src="http://www.example.com/image.png" alt="My image" width="200" height="150"]