Image Shortcodes

Image Shortcodes

2 Types of Image Shortcodes

  • Image-Shadow: Images with cool shadow effects using pure-CSS3
  • Image: Images with optional caption and lightboxed image or video

There are TinyMCE buttons in the editor to help you with this


Image-Shadow Shortcode Usage

[image_shadow effect="image-inset-left" The type of shadow effect to use on the image, check below for
                                        a list of possible effects
              src=""                    The URL of the image
              link=""                   An optional link to go to when the image is clicked
              newwindow="false"         If true, the link will open in a new window
/]

Possible values for the effect parameter:
    shadow-sides, shadow-mid, image-inset-left, image-inset-right, image-inset


Examples

[image_shadow src="myimage.jpg" effect="shadow-sides"]

[image_shadow src="myimage.jpg" effect="shadow-mid"]

[image_shadow src="myimage.jpg" effect="image-inset-left"]

[image_shadow src="myimage.jpg" effect="image-inset-right"]

[image_shadow src="myimage.jpg" effect="image-inset"]

Image Shortcode Usage

[image src=""            The URL of the image
       caption=""        The caption to display on the image. This will appear on mouse hover, an icon
                         will also be displayed on the image
       link=""           An optional link to open when the image is clicked. If the link is an image,
                         video, YouTube or Vimeo link, the link will be opened in a lightbox.
       newwindow="false" If true, the link will open in a new window. This only applies to links to
                         webpages
       width=""          An optional height of the image
       height=""         An optional width of the image
       ogv=""            The OGV formatted video. Use this to display an HTML5 video in a lightbox when
                         the image is clicked.
       webm=""           The Webm formatted video. Use this to display an HTML5 video in a lightbox
                         when the image is clicked.
       mp4=""            The mp4 formatted video. Use this to display an HTML5 video in a lightbox when
                         the image is clicked.
/]

In the link parameter, you can put any of the following URLs:

  • Another webpage
  • A YouTube video page
  • A Vimeo video page
  • An image
  • A video (mp4, m4v or flv)
  • An SWF Flash file

You can use the ogv, webm and mp4 parameters to display an HTML5 video on a lightbox when the image is clicked.


Examples

[image src="myimage.jpg" 
caption="This is a caption with a <a href='/'>link</a>" 
width="400" height="300" ]
test
This is a caption with a link

[image src="myimage.jpg" 
caption="This is a caption with a <a href='/'>link</a>" 
width="400" height="300"
link="anotherimage.jpg"]
test
This is a caption with a link

[image src="myimage.jpg" 
caption="This is a caption with a <a href='/'>link</a>" 
width="400" height="300"
link="http://awebsite.com"]

[image src="myimage.jpg" 
caption="This is a caption with a <a href='/'>link</a>" 
width="400" height="300"
link="http://www.youtube.com/watch?v=eOrNdBpGMv8"]
test
This is a caption with a link

[image src="myimage.jpg" 
caption="This is a caption with a <a href='/'>link</a>" 
width="400" height="300"
link="http://vimeo.com/14952332"]
test
This is a caption with a link

[image src="myimage.jpg" 
caption="This is a caption with a <a href='/'>link</a>" 
width="400" height="300"
link="http://path/to/an-swf.swf"]
test
This is a caption with a link

[image src="myimage.jpg" 
caption="This is a caption with a <a href='/'>link</a>" 
width="400" height="300"
link="http://path/to/an-flv.flv"]
test
This is a caption with a link

[image src="myimage.jpg" 
caption="This is a caption with a <a href='/'>link</a>" 
width="400" height="300"
link="http://path/to/video.mp4"]
test
This is a caption with a link

[image src="myimage.jpg" 
caption="This is a caption with a <a href='/'>link</a>" 
width="400" height="300"
ogv="http://path/to/video.ogv" 
webm="http://path/to/video.webm" 
mp4="http://path/to/video.mp4"]
test
This is a caption with a link