Image

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:

  • (empty) = None
  • center = Center
  • left = Left
  • right = Right
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:

  • (empty) = None
  • slide-effect = Slide up
  • zoom-effect = Zoom
a_icon (empty) a_icon="fa-info-circle" Link icon:

  • (empty) = None
  • fa-arrow-circle-o-right = Arrow right
  • fa-link = Link
  • fa-envelope-o = Mail
  • fa-info-circle = Information
  • fa-play-circle-o = Play
  • fa-map-marker = Map
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:

  • hover-prime = Primary color
  • hover-dark = Dark color
  • hover-light = Light color
caption_type cap-slide-out caption_type="cap-fade-out" Caption overlay color:

  • cap-slide-out = Slide out on hover
  • cap-slide-in = Slide in on hover
  • cap-fade-out = Fade out on hover
  • cap-fade-in = Fade in on hover
frame none frame="style2" The image frame style:

  • none = No image frame
  • style1 = Frame
  • style2 = Frame style one
  • style3 = Frame style two
  • style4 = Frame style three
  • round-img = Creates a circular image
  • grid = No gaps

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"]

Still having trouble? Head over to the forums.

Forums