Images with style
cool effects, transformations, frames and more

This works in the Haddock Template.

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#

original

light

dark

grayscale

invert

sepia

contrast-2

contrast-10

saturate-2

saturate-8

hue-rotate-1

hue-rotate-2

hue-rotate-3

brightness

blur

Flip#

original

fliph

flipv

fliphv

Blend#

original

---

blend

---

blend2

Frames#

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

Original

---

rounded

---

circle

---

img-thumbnail

raised

---

rounded raised

---

circle raised

---

img-thumbnail raised

Captions#

With the Image Plugin you can add a caption to an image. It can be styled as a text balloon (%%caption-arrow) or overlayed on top of the image (%%caption-overlay) . Note that the %%caption- style must be set around the Image.

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

---

No caption

---

Default caption

bear

---

Caption-arrow

bear

---

Caption-overlay

bear

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
/%

No caption

---

Default caption

Dalmation

---

Caption-arrow

Dalmation

---

Caption-overlay

Dalmation

No caption

---

Default caption

Bear

---

Caption-arrow

Bear

---

Caption-overlay

Bear

Magnify#

Add a magnifying glass to reveal details of a cropped image. Hover the mouse above the image to see the effect.

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

Or set a page-style at the top of the page to add the magnifier to all the images of the page.

[{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 Burns

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

---

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

Summary#

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