Images

Prepare to take your photographs to the next level with X! Many themes give you the ability to add frames or styles to your images, but we didn’t feel like stopping there. Easily add links to your images, or a popover or tooltip if you need to add some extra information to your photograph to give a little more information on it. Easily stack your images inside of other shortcodes like accordions, tabs, block grids, and more, to see what sort of exciting combinations you come up with! Scroll down the page and make sure to hover over the images to see which ones have popover info.

Example 
[image type="rounded" src="https://yourdomain.com/image.jpg" alt="Text"]
Example 
[image type="circle" src="https://yourdomain.com/image.jpg" alt="Text"]
Example 
[image type="thumbnail" src="https://yourdomain.com/image.jpg" alt="Text"]
Example 
[image type="circle" src="https://yourdomain.com/image.jpg" alt="Text"]
Example 
[image type="thumbnail" src="//theme.co/media/x-img-demo-2.jpg" link="true" href="#example" info="popover" info_place="top" info_trigger="hover" info_content="Add in a little extra information here to describe the story behind your photographs!" title="Extra Information" alt="Example"]
  • Text
  • Text
  • Text
  • Text
[block_grid type="two-up"] [block_grid_item] [image type="thumbnail" src="https://yourdomain.com/image.jpg" link="true" href="#example" info="tooltip" info_place="right" info_trigger="hover" title="Hey There!" alt="Text"] [/block_grid_item] [block_grid_item] [image type="thumbnail" src="https://yourdomain.com/image.jpg" link="true" href="#example" info="tooltip" info_place="bottom" info_trigger="hover" title="Hey There!" alt="Example"] [/block_grid_item] [block_grid_item] [image type="thumbnail" src="https://yourdomain.com/image.jpg" link="true" href="#example" info="tooltip" info_place="top" info_trigger="hover" title="Hey There!" alt="Example"] [/block_grid_item] [block_grid_item] [image type="thumbnail" src="https://yourdomain.com/image.jpg" link="true" href="#example" info="tooltip" info_place="left" info_trigger="hover" title="Hey There!" alt="Example"] [/block_grid_item] [/block_grid]

Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: “rounded,” “circle,” or “thumbnail.”
  • float: “left” or “right.”
  • src: the path to your image.
  • alt: alt text for your image.
  • link: input “true” to wrap the image in an anchor tag.
  • href: the URL that you want the image to link to.
  • title: the title of the link.
  • target: input “blank” to have the link open in a new window.
  • info: “popover” or “tooltip.”
  • info_place: “top,” “right,” “bottom,” or “left.”
  • info_trigger: “hover,” “click,” or “focus.”
  • info_content: extra content for the popover.