Image Features

NOTICE:

This is a component page used internally by the SCP Wiki. It is intended to be used and included on other pages.

rating: +40+x

What is this?

A collection of alternative [image blocks] that provide extra interactivity to the images in your Articles, SCPs, Tales, or whatever the heck you want!

How to use

Most are self-explanatory but there are a few shared features:

  • THESE WORK ON BOTH SIGMA-9 AND BLACK HIGHLIGHTER
  • Any true/false options must be included.
  • Images can be floated. This means text will wrap around them. If you chose |float=true you also need to pick |align=left/right. This will choose what side of the screen the image will float on.
  • Width is max-width. On mobile, images will always be max-50% screen width. If you want to change this, you'll have to edit CSS values:

    .scp-image-block[data-feature="image-feature"] {
    max-width: [add width here] !important;
    }

  • Captions are optional! If you chose |add-caption=false, you do not need to include a |caption=text.
  • Fractal Noise Reveal and Pixelate Reveal both use HTML in iframes which are… a little odd on Wikidot. They should work but there is certainly a chance they will bug out.
  • If you have any more questions or requests feel free to contact WoedenazWoedenaz. No guarantee that I'll respond quickly but I'll try!

Multi-Line Captions

You can have multi-line captions.
You just need to format the code like so:

|add-caption=true
|caption=This is a super duper long caption that is eventually going to have a line break. _
You just need to add a space WITH an underscore after. _
Remember the space or it will not work. _
Adding a space after the underscore will also cause it not to work.

IMAGE REVEALS

Hover Blur Reveal

Tap Blur Reveal on Mobile

noodle.jpg
Lots of blur might end up looking really odd
[[include :scp-wiki:component:image-features-source |blur-reveal=--]
|blur-amount=Number 1.5 - 5 Recommended. Higher number = More blur!
|speed=Number Animation speed in milliseconds
|float=true/false
|align=left/right
|width=px/rem/vw/% All measurement types work here.
|url=url
|add-caption=true/false
|caption=text
]]

Hover Blur Change Image

Tap Blur Change Image on Mobile

noodle.jpg
scp-4378-noodleverse.png
This works best if both images share the same width to height ratio.
[[include :scp-wiki:component:image-features-source |image-change=--]
|blur-amount=Number 1.5 - 5 Recommended. Higher number = More blur!
|speed=Number Animation speed in milliseconds
|float=true/false
|align=left/right
|width=px/rem/vw/% All measurement types work here.
|start-url=url URL of image BEFORE hover.
|hover-url=url URL of image AFTER hover.
|add-caption=true/false
|caption=text
]]

Hover Slide Blur Reveal

Tap Slide Blur Reveal on Mobile

Firefox supported blur slide code provided by EstrellaYoshteEstrellaYoshte!

noodle.jpg
noodle.jpg
The slide direction means it will move AWAY that direction.
[[include :scp-wiki:component:image-features-source |slide-blur-reveal=--]
|blur-amount=Number 5 - 10 Recommended. Higher number = More blur!
|slide-direction=left/right/top/bottom Direction slide will move AWAY from.
|float=true/false
|align=left/right
|speed=Number Animation speed in milliseconds
|width=px/rem/vw/% All measurement types work here.
|url=url
|add-caption=true/false
|caption=text
]]

Hover Slide Block Reveal

Tap Slide Block Reveal on Mobile

noodle.jpg
This slide direction is not different.
It moves AWAY from that direction also.
[[include :scp-wiki:component:image-features-source |slide-block-reveal=--]
|block-color=hex/rgb/hsl All color inputs work here.
|slide-direction=left/right/top/bottom Direction slide will move AWAY from.
|speed=Number Animation speed in milliseconds
|float=true/false
|align=left/right
|width=px/rem/vw/% All measurement types work here.
|url=url
|add-caption=true/false
|caption=text
]]

Slide Image Revealer


noodle.jpg
The slider button arrows will change
from black to white
depending on the slider-color!
[[include :scp-wiki:component:image-features-source |slide-revealer=--]
|block-color=hex/rgb/hsl All color inputs work here.
|float=true/false
|align=left/right
|width=px/rem/vw/% All measurement types work here.
|left-url=url This is the URL for the left image.
|right-url=url This is the URL for the right image.
|slider-start-percent=0-100 % from the left where the slider will start.
|slider-color=hex/rgb/hsl All color inputs work here.
|slider-circle-size=px/rem/vw/% All measurement types work here.
|add-caption=true/false
|caption=text
]]

Hover Fractal Noise Reveal

Tap Fractal Noise Reveal on Mobile

noodle.jpg
Lower fractal sizes can look super neat.
Try it out!
[[include :scp-wiki:component:image-features-source |noise-reveal=--]
|fractal-size=1-999 Larger # means smaller fractal.
|speed=Number Animation speed in milliseconds
|float=true/false
|align=left/right
|width=px/rem vw/% WILL NOT WORK.
|background=color/url("")/gradient Any sort of background input will work here.
|url=url
|add-caption=true/false
|caption=text
]]

Hover Pixelate Reveal

Tap Pixelate Reveal on Mobile

noodle.jpg
This is all done in iframes.
It's best to only use one per page, if possible.
[[include :scp-wiki:component:image-features-source |pixel-reveal=--]
|pixel-res=Number Larger # means larger pixels. (4-32 suggested)
|speed=Number Animation speed in milliseconds
|float=true/false
|align=left/right
|width=px/rem vw/% WILL NOT WORK.
|url=url
|add-caption=true/false
|caption=text
]]

IMAGE ZOOMS

Hover Enlarge

Tap Enlarge on Mobile

noodle.jpg
enlarge-amount=6 means it will grow to 1.6 times its original size.
enlarge-amount=20 means 3.0 times larger.
[[include :scp-wiki:component:image-features-source |hover-enlarge=--]
|enlarge-amount=Number Higher number: Larger Expand. (5-20 Recommended)
|speed=Number Animation speed in milliseconds
|float=true/false
|align=left/right
|width=px/rem/vw/% All measurement types work here.
|url=url
|add-caption=true/false
|caption=text
]]

Click & Hold Fullscreen

Tap Fullscreen on Mobile

noodle.jpg
noodle.jpg
The speed here refers to how quickly
the image will fade into the center of the screen
when you click/tap.
[[include :scp-wiki:component:image-features-source |click-fullscreen=--]
|speed=Number Animation speed in milliseconds
|float=true/false
|align=left/right
|width=px/rem/vw/% All measurement types work here.
|url=url
|add-caption=true/false
|caption=text
]]
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License