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.

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.
• Alt Text is Recommended! All images have an |alt=alt|alt-text=Image Description Here option. This can be omitted but it is recommended to add it for accessibility. The alt-text should describe the image being shown.
• 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 Woedenaz. 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

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
|alt=alt|alt-text=Image Description Here
|add-caption=true/false
|caption=text
]]

---

Hover Blur Change Image

Tap Blur Change Image on Mobile

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.
|alt1=alt|alt1-text=Image 1 Description Here
|alt2=alt|alt2-text=Image 2 Description Here
|add-caption=true/false
|caption=text
]]

---

Hover Slide Blur Reveal

Tap Slide Blur Reveal on Mobile

Firefox supported blur slide code provided by EstrellaYoshte!

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
|alt=alt|alt-text=Image Description Here
|add-caption=true/false
|caption=text
]]

---

Hover Slide Block Reveal

Tap Slide Block Reveal on Mobile

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
|alt=alt|alt-text=Image Description Here
|add-caption=true/false
|caption=text
]]

---

Slide Image Revealer

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.
|alt1=alt|alt1-text=Left Image Description Here
|alt2=alt|alt2-text=Right Image Description Here
|add-caption=true/false
|caption=text
]]

---

Hover Fractal Noise Reveal

Tap Fractal Noise Reveal on Mobile

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
|alt=alt|alt-text=Image Description Here
|add-caption=true/false
|caption=text
]]

---

Hover Pixelate Reveal

Tap Pixelate Reveal on Mobile

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
|alt=alt|alt-text=Image Description Here
|add-caption=true/false
|caption=text
]]

---

IMAGE ZOOMS

Hover Enlarge

Tap Enlarge on Mobile

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
|alt=alt|alt-text=Image Description Here
|add-caption=true/false
|caption=text
]]

---

Click & Hold Fullscreen

Tap Fullscreen on Mobile

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
|alt=alt|alt-text=Image Description Here
|add-caption=true/false
|caption=text
]]