[image] shortcode arguments
classes:
Size -
[mini|tiny|small|medium|large|big|huge|massive]
Variation -
[bordered|rounded|circular]
Alignment -
[left aligned|center aligned|right aligned]
Float -
[left floated|right floated]
Other -
[fluid|disabled|spaced|avatar]
src:
Optional: image link (image can also be specified inside the shortcode, using an HTML <img> tag).
alt:
Optional: alternative text (only used when src argument is specified).
caption:
Optional: image caption (only used when src argument is specified).
caption_classes:
Optional: caption classes [center aligned|right aligned] (only used when src argument is specified).
href:
The href/url/link argument can be used to specify a link. If the image has "zoomable" class then the link will be used as the full-size image.
Image
<image>{lt}img src="//placehold.it/350x220" /{gt}</image>
Notes
Image shortcode can contain an HTML <img> tag which may be wrapped in an HTML <a> tag or even WordPress CAPTION shortcode. The intention is that anything generated by the Add Media button above the WordPress editor should be good to use.
Image argument
Image
Placeholder image
Placeholder image
Placeholder image
<image src="//placehold.it/150x120" alt="Image">
<image src="//placehold.it/150x120" href="#">
<divider>
<image tiny zoomable src="//placehold.it/150x150">
<image tiny zoomable src="//placehold.it/150x150" url="//placehold.it/500x500.png">
Notes
The image's link can also be supplied as an argument.
<image small>{lt}a href="#"{gt}{lt}img src="//placehold.it/350x220" /{gt}{lt}/a{gt}</image>
<image small href="#">{lt}img src="//placehold.it/350x220" /{gt}</image>
Image with a caption
Caption
Caption
Using arguments
Caption
Caption
<images small>
  <image><caption>{lt}img src="//placehold.it/350x220" /{gt} Caption</caption></image>
  <image><caption align="aligncenter">{lt}img src="//placehold.it/350x220" /{gt} Caption</caption></image>
  <image src="//placehold.it/350x220" alt="Using arguments" caption="Caption" caption_classes="center aligned"></image>
  <image><caption align="alignright">{lt}img src="//placehold.it/350x220" /{gt} Caption</caption></image>
</images>
Notes
Caption is a standard WordPress shortcode.
Right floated image
Avatar 1
<image small rounded right floated>...</image>
<divider hidden clearing>
Zoomable image
Avatar 2
<image small bordered left aligned zoomable>...</image>
Notes
Viewer.js (lightbox alternative) will be attached to images with 'zoomable' class.
Zoomable center aligned image
<image medium center aligned zoomable>
  <caption align="alignright">{lt}a href="//placehold.it/1024x1024.png"{gt}{lt}img src="//placehold.it/512x512.png" /{gt}{lt}/a{gt} Center aligned + link + caption</caption>
</image>
Notes
Caption text must be separated from the a/img element with a space.
Maecenas ultricies lectus orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc quis ex pellentesque, rutrum lorem eu, suscipit dolor. Duis rhoncus imperdiet arcu, eget faucibus mauris blandit non. Nulla quam mauris, blandit ac quam id, porttitor vehicula enim. Vivamus ac sem a sem porttitor aliquet. Donec tincidunt dapibus ligula. Vestibulum sapien mauris, venenatis feugiat tincidunt et, placerat eu mauris. Vestibulum at erat dictum, consectetur tortor ut, fringilla mi. Nulla maximus mi tempus hendrerit tempus. Mauris non dapibus justo. Sed justo urna, ultricies nec dictum semper, mollis sit amet eros. Etiam laoreet, ante in suscipit dapibus, justo justo posuere sem, a aliquam elit diam quis leo. Quisque bibendum congue blandit. Nam nec lectus nec ligula cursus sodales id vel purus. Donec euismod erat vel venenatis congue. Donec vitae hendrerit sapien. Aliquam erat volutpat. Sed maximus non nunc ac elementum. Quisque pulvinar sem non nisl efficitur placerat. Proin lobortis condimentum efficitur. Etiam luctus a nibh ac eleifend. Duis consectetur aliquet bibendum. Pellentesque eget nibh et massa ultrices iaculis at eget ante. Aliquam erat volutpat. Sed maximus non nunc ac elementum. Quisque pulvinar sem non nisl efficitur placerat. Proin lobortis condimentum efficitur. Etiam luctus a nibh ac eleifend. Duis consectetur aliquet bibendum. Pellentesque eget nibh et massa ultrices iaculis at eget ante.
Fluid image
Fluid images expand to fill their container
Fluid images expand to fill their container
<image fluid>...</image>
Disabled image
Avatar 6
<image tiny disabled>...</image>
Circular image
Avatar 7
<image circular>...</image>
Spaced image
Te eum doming eirmod, nominati pertinacia
argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.
Te eum doming eirmod, nominati pertinacia <image mini spaced>...</image> argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.

Leave a comment

Your email address will not be published. Required fields are marked *