This page (revision-1) was last changed on 29-Nov-2024 16:16 by UnknownAuthor

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Page revision history

Version Date Modified Size Author Changes ... Change note

Page References

Incoming links Outgoing links
Image Styles
Image Styles

Version management

Difference between version and

At line 1 added 331 lines
!!! 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' }]
This page (revision-1) was last changed on 29-Nov-2024 16:16 by UnknownAuthorTop