Image styles allow you to add special effects, transformations, animation, frames, captions etc. to photographs and images. It is also possible to combine multiple styles with the . separator.

Markup:

%%<style1>.<style2> [<wiki-page>/<image attachment>]/%
%%<style1>.<style2> [{Image src='<image url>' }]/%
[{Image src='<image url>' class='<style1> <style2>'}]

Basic styles#

Flip#

Blend#

Frames#

Frames (rounded, circle) can be used flat or raised. (with shadow)

Captions#

%%caption-arrow
[{Image src='<image>' caption='<caption content>' }] 
/%

Normally, caption content can only consist of text. If you need more freedom to the type of content and the styles you want to put in a caption, use the %%caption style. Put the caption content right after the image. This is supported both for the Image Plugin as well as for inline attachment images.

%%caption
[{Image src='<image>' }] 
More __caption__ content
/%

%%caption
[<wiki-page>/<inline image attachment>] 
More __caption__ content
/%

Magnify#

%%magnify <your image> /%
[{Image src='<image>' class='magnify'}]

[{SET page-styles='magnify'}]

Animation#

The animated %%kenburns effect is a type of panning and zooming effect used in video production from still imagery. The name derives from extensive use of the technique by the American documentarian Ken BurnsContent unavailable! (broken link)https://jspwiki-wiki.apache.org/images/out.png

%%kenburns [<wiki-page>/<inline image attachment>] /%

[{Image src='<image>' class='kenburns' }]

Summary#

Note: you need to include Instagram Filters for the additional image effects .