!!! Overview
[{$pagename}]
%%information
We are not on the latest [Haddock Template] so these may not work
%%
[{SET page-styles='prettify-nonum'}]
%%center.raised.bg-maroon.rounded
[{Image src='Image Styles/haddock.jpg' class='bg contain blend'}]
%%lead
%%text-white Images with style/%\\
cool effects, transformations, frames and more \\
\\
/%
This works in the [Haddock Template].
/%
[{TableOfContents }]
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>'}]
}}}
Note: most images styles can also be used on [background images |Background Styles].
!!Basic styles
%%small Note: hover your mouse of the image for a smooth transition to the original image. /%
%%poppy
[{Image src='poppy-small.jpg' class='' caption='original' }]
[{Image src='poppy-small.jpg' class='light' caption='light' }]
[{Image src='poppy-small.jpg' class='dark' caption='dark' }]
[{Image src='poppy-small.jpg' class='grayscale' caption='grayscale' }]
[{Image src='poppy-small.jpg' class='invert' caption='invert' }]
[{Image src='poppy-small.jpg' class='sepia' caption='sepia' }]
[{Image src='poppy-small.jpg' class='contrast-2' caption='contrast-2' }]
[{Image src='poppy-small.jpg' class='contrast-10' caption='contrast-10' }]
[{Image src='poppy-small.jpg' class='saturate-2' caption='saturate-2' }]
[{Image src='poppy-small.jpg' class='saturate-8' caption='saturate-8' }]
[{Image src='poppy-small.jpg' class='hue-rotate-1' caption='hue-rotate-1' }]
[{Image src='poppy-small.jpg' class='hue-rotate-2' caption='hue-rotate-2' }]
[{Image src='poppy-small.jpg' class='hue-rotate-3' caption='hue-rotate-3' }]
[{Image src='poppy-small.jpg' class='brightness' caption='brightness' }]
[{Image src='poppy-small.jpg' class='blur' caption='blur' }]
/%
!!Flip
Flip the image vertically or horizontally (or both).
%%poppy
[{Image src='poppy-small.jpg' class='' caption='original' }]
[{Image src='poppy-small.jpg' class='fliph' caption='fliph' }]
[{Image src='poppy-small.jpg' class='flipv' caption='flipv' }]
[{Image src='poppy-small.jpg' class='fliphv' caption='fliphv' }]
/%
!!Blend
Blend the image color with the background.
%%columns.bg-yellow.poppy
\\
[{Image src='Image Styles/haddock.jpg' width='200px' class='' align='center' caption='original' }]
----
\\
[{Image src='Image Styles/haddock.jpg' width='200px' class='blend' align='center' caption='blend' }]
----
\\
[{Image src='Image Styles/haddock.jpg' width='200px' class='blend2' align='center' caption='blend2' }]
/%
!!Frames
Frames (rounded, circle) can be used flat or raised. (with shadow)
%%columns
[{Image src='Image Styles/woman-face.jpg' width='150' class='' caption='Original'}]
----
[{Image src='Image Styles/woman-face.jpg' width='150' class='rounded' caption='rounded'}]
----
[{Image src='Image Styles/woman-face.jpg' width='150' class='circle' caption='circle'}]
----
[{Image src='Image Styles/woman-face.jpg' width='150' class='img-thumbnail' caption='img-thumbnail'}]
/%
%%columns
[{Image src='Image Styles/woman-face.jpg' width='150' class='raised fliph' caption='raised'}]
----
[{Image src='Image Styles/woman-face.jpg' width='150' class='rounded raised fliph' caption='rounded raised'}]
----
[{Image src='Image Styles/woman-face.jpg' width='150' class='circle raised fliph' caption='circle raised'}]
----
[{Image src='Image Styles/woman-face.jpg' width='150' class='raised img-thumbnail' caption='img-thumbnail raised'}]
/%
!!Captions
%%columns.sm
With the [Image Plugin|Image] 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>' }]
/%
}}}
----
%%columns.bg-silver
No caption
[{Image src='Image Styles/bear-big.jpg'}]
----
Default caption
[{Image src='Image Styles/bear-big.jpg' caption='bear' }]
----
Caption-arrow
%%caption-arrow [{Image src='Image Styles/bear-big.jpg' caption='bear' }] /%
----
Caption-overlay
%%caption-overlay [{Image src='Image Styles/bear-big.jpg' caption='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|Image] as well as for inline attachment images.
%%columns
{{{
%%caption
[{Image src='<image>' }]
More __caption__ content
/%
}}}
----
{{{
%%caption
[<wiki-page>/<inline image attachment>]
More __caption__ content
/%
}}}
/%
%%columns.bg-silver
No caption
[{Image src='https://static.pexels.com/photos/36436/dalmatians-dog-animal-head.jpg' }]
----
Default caption
%%caption
[{Image src='https://static.pexels.com/photos/36436/dalmatians-dog-animal-head.jpg'}]
Dalmation %%icon-heart /%
/%
----
Caption-arrow
%%caption-arrow
[{Image src='https://static.pexels.com/photos/36436/dalmatians-dog-animal-head.jpg' }]
Dalmation %%icon-heart /%
/%
----
Caption-overlay
%%caption-overlay
[{Image src='https://static.pexels.com/photos/36436/dalmatians-dog-animal-head.jpg' class='blur'}]
Dalmation %%icon-heart /%
/%
/%
%%columns.bg-silver
No caption
[Image Styles/bear-big.jpg]
----
Default caption
%%caption
[Image Styles/bear-big.jpg]
%%icon-star /% [Bear|https://en.wikipedia.org/wiki/Bear]
/%
----
Caption-arrow
%%caption-arrow
[Image Styles/bear-big.jpg]
%%icon-star /% [Bear|https://en.wikipedia.org/wiki/Bear]
/%
----
Caption-overlay
%%caption-overlay
[Image Styles/bear-big.jpg]
%%icon-star /% [Bear|https://en.wikipedia.org/wiki/Bear]
/%
/%
!!Magnify
%%columns
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'}]
}}}
----
[{Image src='https://source.unsplash.com/-g4dgdOExsw/' width='200' class='magnify img-thumbnail' align='center'}]
/%
!!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|https://en.wikipedia.org/wiki/Ken_Burns|class='slimbox-link']
%%columns
{{{
%%kenburns [<wiki-page>/<inline image attachment>] /%
}}}
%%kenburns [Image Styles/poppy-small.jpg] /%
----
{{{
[{Image src='<image>' class='kenburns' }]
}}}
[{Image src='https://source.unsplash.com/-g4dgdOExsw/' class='kenburns' }]
/%
!!Summary
Note: you need to include [Instagram Filters] for the %%info additional image effects /%.
%%columns.list-unstyled.border
* light
* dark
* invert
* grayscale
* blur
* caption
* caption-arrow
* caption-overlay
----
* rounded
* circle
* raised
* img-thumbnail
* fliph
* flipv
* fliphv
* kenburns
----
* blend, blend2
* sepia
* brightness
* saturate-2, saturate-8
* contrast-2, contrast-10
* hue-rotate-1, hue-rotate-2, hue-rotate-3
----
%%bg-info
* aden
* brooklyn
* clarendon
* earlybird
* gingham
* hudson
* inkwell
* lark
* lofi
* mayfair
* moon
/%
----
%%bg-info
* nashville
* perpetua
* reyes
* rise
* slumber
* toaster
* walden
* willow
* xpro2
* Y1997
/%
/%
%%add-css
/* simple image grid with hover effect to show original image*/
.poppy img:not([[width]) { width:200px;}
.poppy table {float:left; margin-right:.5em; }
.poppy + * {clear:both;}
.poppy td:hover{
filter:none !important;
transform:none !important;
mix-blend-mode:normal !important;
}
.poppy td:hover:before,
.poppy td:hover:after { opacity:0; }
.poppy td {transition: 1s all;}
/%
----
See also [Haddock Template], [Haddock Styles], [Instagram Filters], [Background Styles]
!! More Information
There might be more information for this subject on one of the following:
[{ReferringPagesPlugin before='*' after='\n' }]