Image

Image shortcode arguments
Classes
Sizemini tiny small medium large big huge massive
Variationbordered rounded circular
Alignmentleft aligned center aligned right aligned
Floatleft floated right floated
Otherfluid disabled spaced avatar lazyload
srcOptional: image link (image can also be specified inside the shortcode, using an HTML <img> tag).
altOptional: alternative text (only used when src argument is specified).
captionOptional: image caption (only used when src argument is specified).
caption_classesOptional: caption classes [center aligned|right aligned] (only used when src argument is specified).
hrefThe 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.co/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.co/150x120" alt="Image">
<image src="//placehold.co/150x120" href="#">
<divider>
<image tiny zoomable src="//placehold.co/150x150">
<image tiny zoomable src="//placehold.co/150x150" url="//placehold.co/500x500">
Notes
The image's link can also be supplied as an argument.
<image small>{lt}a href="#"{gt}{lt}img src="//placehold.co/350x220" /{gt}{lt}/a{gt}</image>
<image small href="#">{lt}img src="//placehold.co/350x220" /{gt}</image>
Image with a caption
Placeholder image
Caption
Placeholder image
Caption
Placeholder image
Caption
<images small>
  <image src="//placehold.co/350x220" caption="Caption">
  <image src="//placehold.co/350x220" caption="Caption" caption_classes="center aligned">
  <image src="//placehold.co/350x220" caption="Caption" caption_classes="right aligned">
</images>
Notes
The [image] shortcode can accept caption argument directly.
Image with a caption (WordPress shortcode)

Using the markup generated by the WordPress Add media button directly is also supported.

Image with caption

The output can also be wrapped in the [image] shortcode to convert to Semantic UI styled captions.

Caption
Caption
Caption
<caption id="attachment_5696" width="256">{lt}img src="//placehold.co/256x256" alt="" width="256" height="256" class="size-medium wp-image-5696" /{gt} Image with caption</caption>

<images small>
  <image><caption>{lt}img src="//placehold.co/350x220" /{gt} Caption</caption></image>
  <image><caption align="aligncenter">{lt}img src="//placehold.co/350x220" /{gt} Caption</caption></image>
  <image><caption align="alignright">{lt}img src="//placehold.co/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.co/1024x1024"{gt}{lt}img src="//placehold.co/512x512" /{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>
Raised image
Avatar 7
<image raised>...</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.
Lazy loaded image
Placeholder image
<image lazyload fluid src="//placehold.co/720x480">
Image spacing - divided image

By default Semantic UI images don't have additional margin:

Placeholder image

By using the divided class the image can have additional 1rem of margin above and below it:

Placeholder image

If the element above the image also has bottom margin (such as paragraph) then the block class can be used to collapse the margins.

Placeholder image

In summary, an .ui.divided.block.image can be used to give an image consistent spacing between paragraphs.

<p>By default Semantic UI images don't have additional margin:</p>
<image src="//placehold.co/320x128">
<p>By using the {lt}code{gt}divided{lt}/code{gt} class the image can have additional {lt}code{gt}1rem{lt}/code{gt} of margin above and below it:</p>
<image divided src="//placehold.co/320x128">
<p>If the element above the image also has bottom margin (such as paragraph) then the {lt}code{gt}block{lt}/code{gt} class can be used to collapse the margins.</p>
<image divided block src="//placehold.co/320x128">
<p>In summary, an {lt}code{gt}.ui.divided.block.image{lt}/code{gt} can be used to give an image consistent spacing between paragraphs.</p>
Notes
divided and block are not original Semantic UI classes, they are custom classes added by the theme.

Leave a comment

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