Image
Image shortcode arguments
| Classes |
| ||||||||||
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.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 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 with a link
<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
Caption
Caption
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.
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 align="alignnone">{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
<image small rounded right floated>...</image>
<divider hidden clearing>Zoomable image
<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.
Fluid image
Fluid images expand to fill their container
<image fluid>...</image>Disabled image
<image tiny disabled>...</image>Circular image
<image circular>...</image>Raised image
<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
<image lazyload fluid src="//placehold.co/720x480">Image spacing - divided image
By default Semantic UI images don't have additional margin:
By using the divided class the image can have additional 1rem of margin above and below it:
If the element above the image also has bottom margin (such as paragraph) then the block class can be used to collapse the margins.
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.