Components Gen2



πŸ“ŽImage Blocks


dcalfine.jpg

PoI-0007-A surveillance photo. c. 2018




This component allows you to insert photos with captions into your pages. To use it, paste the following:

[[include :scp-wiki:component:image-block name=filename/url|caption=content|width=###px]]

There are a couple of alternatives to Image Block, which can be found below:

πŸ“ŽImage Block Peppo

imagepeppo.png

This component automatically aligns the right side of the block to the flush edge instead of to the rating module, as well as formatting images if the reader is on mobile. To use it, paste the following:

[[include :scp-wiki:component:image-block-peppo
|name=file url
|caption=caption
|width=###px (300px is recommended)
]]

πŸ“ŽImage Block Quoted

imagequoted.png

This component allows the image to serve as a link. To use it, paste the following:

[[include :scp-wiki:component:image-block-quoted name=file|caption=text|link=link|width=300px]]

πŸ“ŽSunnyParallax Image Block

imagesunny.png

This component is mostly used by SunnyClockworkSunnyClockwork. It automatically puts the image in a collapsible and sets the caption as a title before it. As such, it's incredibly useful for displaying large amounts of artwork on a single page. To use it, paste the following:

[[include :scp-wiki:component:sp-image caption=caption|src=file url|width=###]]

πŸ“ŽWide Image Sizer

With component:

with-component.png

Without component:

without-component.png

This component scales a wide image to a 215px height and appropriate width. This allows you to have a wide image as a header without having to precisely crop the image.

To use it, paste this at the top of your page:

[[include :scp-wiki:component:wide-image-sizer]]

Then for the image paste the following:

[[include :scp-wiki:component:image-block
name=https://scp-wiki.wikidot.com/local--files/(REST OF LINK TO YOUR IMAGE) |
caption=(YOUR CAPTION HERE) |
align=center |
width=100%
]]



πŸ“ŽImage Carousel


This component allows you to cycle through different images in just one single image block. To use it, paste the following:

[[include :scp-wiki:component:carousel
| images=photograph.png,old-map.png,jumpscare.gif
| caption=A selection of images.
| interval=5
| wiki=scp-wiki
| page=SCP-173
| width=300px
| height=240px
| position=right
| no-caption=false
| background=white
| options=yes
]]

Further information on what each field in the component does can be found on its component page.

You can see this component in action in SCP-5800.



πŸ“ŽImage Features


This component allows you to modify Image Blocks with a wide range of features.

Hover Blur blurs an image until it is hovered over or tapped. To use it, paste the following:

[[include :scp-wiki:component:image-features-source |blur-reveal=--]
|blur-amount=Number
|speed=Number
|float=true/false
|align=left/right
|width=px/rem/vw/%
|url=url
|add-caption=true/false
|caption=text
]]

Hover Blur Change changes the image shown when it is hoverd over or tapped. It works best when both images have the same width to height ratio. To use it, paste the following:

[[include :scp-wiki:component:image-features-source |image-change=--]
|blur-amount=Number
|speed=Number
|float=true/false
|align=left/right
|width=px/rem/vw/%
|start-url=url
|hover-url=url
|add-caption=true/false
|caption=text
]]

Hover Slide Blur will remove the blur from an image by sliding it away fromdirection chosen. To use it, paste the following:

[[include :scp-wiki:component:image-features-source |slide-blur-reveal=--]
|blur-amount=Number
|slide-direction=left/right/top/bottom
|float=true/false
|align=left/right
|speed=Number
|width=px/rem/vw/%
|url=url
|add-caption=true/false
|caption=text
]]

Hover Slide Block will remove a black-box over the image by sliding it. To use, paste the following:

[[include :scp-wiki:component:image-features-source |slide-block-reveal=--]
|block-color=hex/rgb/hsl
|slide-direction=left/right/top/bottom
|speed=Number
|float=true/false
|align=left/right
|width=px/rem/vw/%
|url=url
|add-caption=true/false
|caption=text
]]

Slide Image Revealer changes the image with a user-controlled slider. To use it, paste the following:

[[include :scp-wiki:component:image-features-source |slide-revealer=--]
|block-color=hex/rgb/hsl
|float=true/false
|align=left/right
|width=px/rem/vw/%
|left-url=url
|right-url=url
|slider-start-percent=0-100
|slider-color=hex/rgb/hsl
|slider-circle-size=px/rem/vw/%
|add-caption=true/false
|caption=text
]]

Hover Fractal Noise Reveal removes a fractal effect on an image to reveal it. To use it, paste the following:

[[include :scp-wiki:component:image-features-source |noise-reveal=--]
|fractal-size=1-999
|speed=Number
|float=true/false
|align=left/right
|width=px/rem
|background=color/url("")/gradient
|url=url
|add-caption=true/false
|caption=text
]]

Hover Pixelate Reveal removes a pixelation effect on an image to reveal it. To use it, paste the following:

[[include :scp-wiki:component:image-features-source |pixel-reveal=--]
|pixel-res=Number
|speed=Number
|float=true/false
|align=left/right
|width=px/rem
|url=url
|add-caption=true/false
|caption=text
]]

Hover Enlarge enlarges an image when it is hovered over or tapped. To use it, paste the following:

[[include :scp-wiki:component:image-features-source |hover-enlarge=--]
|enlarge-amount=Number
|speed=Number
|float=true/false
|align=left/right
|width=px/rem/vw/%
|url=url
|add-caption=true/false
|caption=text
]]

Click & Hold Fullscreen increases an image to be fullscreen, with its caption at the bottom. To use it, paste the following:

[[include :scp-wiki:component:image-features-source |click-fullscreen=--]
|speed=Number
|float=true/false
|align=left/right
|width=px/rem/vw/%
|url=url
|add-caption=true/false
|caption=text
]]

Examples of all of these can be found on the component's page.



πŸ“ŽInfo Bar



This is the collapsible info bar. To use it, copy and paste the following:

[[include :scp-wiki:component:info-ayers
|lang=en
|page=component:info-ayers
|authorPage= Link here
|comments=Look at me! I'm an info module! Yay!
]]

You can see an example of this component on its component page.

This component is a info button, next to your rating module which shows the authors, and other information. To use it, copy and paste the following:

[[include :scp-wiki:info:start]]
**SCP-XXXX:** TITLE
**NAME OF TALE/GOI-FORMAT**
**Author:** [[*user AUTHOR]]
**Original:** LINK TO ORIGINAL
**Translator:** [[*user TRANSLATOR]]
**Image:** Put any licensing information for images here
Add anything else you'd like the reader to know
[[include :scp-wiki:info:more]]
More, optional info that appears in a new window. Remove the "[[include :scp-wiki:info:more]]" if you > don't want this
[[include :scp-wiki:info:end]]

πŸ“ŽInfo Module Content Warning

rating: 0+x
⚠️ content warning

If the article calls for it, you can also add a component that lets readers know that this page has a content warning. To use it, paste the following under your Info Module:

[[include :scp-wiki:component:info-cw]]


This component allows you to have in-line collapsibles on pages. To use it, paste the following on your page:

[[div class="inline-colmod"]]
Text before collapsible block
[[include :scp-wiki:component:inline-colmod show=Text displayed before clicking | content=Text displayed after clicking]]
Text after collapsible block
[[/div]]

Make sure that the actual [[include]] is on a separate line from what comes before and after it.

Ain't that neat?



LaRueTitle.png

La Rue Macabre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis lorem et justo hendrerit posuere. Donec in massa in eros hendrerit luctus. Aliquam condimentum sapien sed mauris condimentum, at porttitor metus ultricies. Cras vulputate aliquet lacus, ac aliquam felis ornare id. Quisque suscipit vel felis sed finibus. Vivamus fringilla lacus sed ligula egestas, vitae tincidunt nulla aliquam. Donec pulvinar enim fermentum magna gravida volutpat. Sed elementum interdum ex, ut maximus massa condimentum sed. Morbi nisi eros, aliquet et nisi vel, lacinia fermentum massa. Curabitur scelerisque mauris justo, in vulputate arcu imperdiet eget.

This component enables you to use a special div for your la Rue Macabre GoI Formats. To use it, paste the following at the top of your page:

[[module css]]
@import url('https://fonts.googleapis.com/css?family=Gochi+Hand|Source+Sans+Pro&display=swap');

.rmpostcontainer
{
    background-image: url('http://firedawnfolder.wikidot.com/local--files/component:larueposting/LaRueDesk.png');
    background-repeat: no-repeat;
    width: 100%; max-width: 660px;
    height: 980px;
    margin: 0px;
        padding: 60px 20px 0px 60px;
}

.rmpostcontent
{
    font-family: 'Source Sans Pro', sans-serif;
    font-family: 'Gochi Hand', cursive;
    font-style: normal;
    font-size: 1.30em;
    color: #000;
    width: 530px;
    height: 880px;
    padding: 30px;
    margin: 0px;
    margin-top: -8px;
}

.rmpostmobiletitle
{
    display: none;
}

.scribble
{
    font-style: bold;
    font-size: 1.30em;
    color: #000;
    width: 300px;
    padding: 0px 0px 0px 20px;
    margin: 0px;
    margin-top: -8px;
    -ms-transform: rotate(20deg); /* IE 9 */
    transform: rotate(12deg); /* Standard syntax */
}

@media only screen and (max-width: 600px) {

    .rmpostcontainer {
        background-image: url("http://firedawnfolder.wikidot.com/local--files/component:larueposting/LaRueMobile.png");
        background-size: 100%;
        background-repeat: repeat;
        width: 100%;
        height: auto;
        padding: 0px;
        padding-top: 0px;
    }

    .rmpostcontent {
        font-size: 14pt;
        width: 85%;
        height: auto;
        padding: 10px 10px 0px 30px;
    }

    .rmposttitle {
        width: auto;
        height: auto;
        padding: 0px 20px 0px 70px;
    }

}

[[/module]]

Then, for every page you want to be on the page, paste the following:

[[div class="rmpostcontainer"]]
@@ @@
@@ @@
[[div class="rmposttitle"]]
[[image https://scp-wiki.wdfiles.com/local--files/component:laruepost/LaRueTitle.png]]
[[/div]]
[[div class="rmpostmobiletitle"]]
La Rue Macabre
[[/div]]
[[div class="rmpostcontent"
]]
content
[[/div]]
[[/div]]

You can exclude the [[div]]s for the title if this isn't the first La Rue page on the page.


This component automatically updates your page, and offers support for international and co-authored pages. To use it, paste the following:

[[include :scp-wiki:component:mega-cool-author-page-tool |inc-list= --]
|language= en/ru/ko/cn/fr/pl/es/th/jp/de/it/ua
|order= name/title/rating/created_at
|perpage= 1-250
|background-image= url
|shadow= yes/no
]]

For co-authored pages that you didn't post, do the following:

[[include :scp-wiki:component:mega-cool-author-page-tool |inc-coauthor-header= --]]]

[[include :scp-wiki:component:mega-cool-author-page-tool |inc-coauthored= —]
|name= slug (this page's slug would be components-hub
|feat= co-authors
|language= en/ru/ko/cn/fr/pl/es/th/jp/de/it/ua
]]


This component allows you to customize practically the entirety of the ACS Component. With the exception of the last option, paste these after your include for ACS.

Please refer to the component page for usage instructions.


This component allows you to nest collapsibles within each other. To use it, paste the following as your first level of collapsibles:

[[include :scp-wiki:component:coltop
| show=+ show block
| hide=- hide block
]]
Text to show inside the collapsible
[[include :scp-wiki:component:colend]]

Paste this again within itself to nest them.


Item #: SCP-4444
Object Class: Esoteric Class Ticonderoga
Site Responsible: USMILA Site-19
Director: Tilda Moose
Research Head: K. P. Crow
Assigned Task Force: N/A
Level 4/4444
Classified

This component serves as a header for your page. To use it, paste the following at the top of your page:

[[include :scp-wiki:component:object-class-bar-source
|item-num=XXXX
|obj-classobject_class
|site-resp=Site/Area-##
|director=name
|rsch-head=name
|task-force= MTF [NAME]-## ("[CODENAME]")
|colorbar-bg-color=rgb(0,0,0)
|colorbar-bg-img=optional
|colorbar-one=full/half/none
|colorbar-two=full/half/none
|colorbar-three=full/half/none
|colorbar-four=full/half/none
|colorbar-five=full/half/none
|colorbar-six=full/half/none
|level=1/2/3/4/5/6
|secrecy=unrestricted/restricted/classified/secret/top-secret/other
]]


BY ORDER OF THE OVERSEER COUNCIL
The following file is Level 4/2935 Classified
Unauthorized access is forbidden.
2935

This component allows you to add an in-universe warning box to your page. To use it, paste the following:

[[include :scp-wiki:component:object-warning-box-source
|bg-image=https://thisisaurl.com
|bg-opacity=0.15
|bg-size=105% 105%
|text-top=BY ORDER OF THE OVERSEER COUNCIL
|text-bottom=The following file is Level #/XXXX Classified
Unauthorized access is forbidden.
|object-number=XXXX
]]


This component alters tabs via CSS to give them a vintage feel. It is recommended you use shorter tab titles with this component. To use it, paste the following:

[[include :scp-wiki:component:chicago-spirit]]

It should also be noted that this component was built for Sigma-9. While it still works on BHL, it doesn't look the best on it.



πŸ“ŽPage Preview


This component adds invisible text at the beginning of your page for use as previews. To use it, paste the following at the top of your page:

[[include :scp-wiki:component:preview
|text=text]]


This component allows you to import custom divs that emulate the look of paper. Despite the name, the component is only capable of emulating paper pages at the moment. To use it, paste the following on your page:

[[include :scp-wiki:component:pages
| medium=vintage-book/pain
| style=
css
| contents=
this text will appear handwritten
]]


This component is used to make a Parawatch forum post, which can be used in your GoI Formats or Parawatch SCPs. The component will only properly work if used alongside the Creepypasta or Anon themes. To use it, copy and paste the following:

[[include :scp-wiki:component:parawatch-forum-post
color=color name or #rrggbb here |
username=account name of person | ← prefix with "πŸ—Ώ " if a moderator
date=MM/DD/YY (DOW) HH:MM:SS | ← DOW is day of week, first three letters
postno=8digitnumber | ← should increase with time of creation
depth=0/1/2/3/4… | ← how many layers deep this post is
content=The actual forum post content goes here. ← if it spans across multiple lines, each must end with a space
]]

You can see this component in action in michael the kiler.

This component allows you to easily add Pride icons to your page. You can see this component in action at the top of this page. Please refer to the component page for instructions on how to use it.

Despite the name, Pride Highlighter works on both Sigma-9 and BHL.



πŸ“ŽRatio Bar


ratio1.png

run-time error: division by zero%
(+0)
run-time error: division by zero%
(-0)
-%
(+0)
-%
(-0)

This component allows you to add a ratio bar to your rating modules, showing how many upvotes you've gotten in comparison to downvotes. To use it, paste the following:

[[include :scp-wiki:component:ratio-bar base=--]]

The above [[include]] will modify any existing rating modules to show the ratio bar. The component also has a standalone piechart that can be included without modifying any rating modules. To use it, paste the following:

[[include :scp-wiki:component:ratio-bar pie=--]]

It's recommended to put this inside info modules.


redzonehead.png

This component allows you to use the header for Redzone GoI Formats, a group closely associated with Prometheus Labs. To use it, paste the following:

[[include :scp-wiki:component:redzone-advisory
|title=Redzone RedDB Archive Asynchronous Copy Vulnerability
|id=redzone-sa-########-[shorter title]
|updated=YYYY-M-DD
|published=YYYY-M-DD
|version=version
|impact=number from 0.0 to 10.0
|worknd=true/false
|bugs=RZux#####
RZux####
|cve=CVE-YYYY-####
|cwe=CWE-###
CWE-###
]]


Sex
Height
Weight/Build
Race
Hair
Eyes
Identifying Attributes
Male
70in
Slender
Caucasian
Black
Brown/Star-shaped Pupils
Cordial disposition
Female
61in
Thin
East Asian
Black
Pale Green
Flamboyantly dressed

This component includes a custom table that formats itself to still be readable on different screen/tab sizes.

For instructions on how to use this component, please refer to its component page.


πŸ“ŽText Style


John Jacob Jingleheimer Schmidt

Now testing messages.

Wow, really?
That's so cool!
And is this a multiline message?

You really think so?
That's great!
Yup, that has multiple lines!

Yeah!
Thanks, JaonHax!
Wait, did I break its scrolling ability somehow?

Yup.
I think you did.

Ah, well.
I guess JaonHax will just have to make sure that this thing has an infinite maximum height, huh?

Yeah, I guess so.
Anyway, we should probably let the awesome individual who's reading this move on with their day.

Bye, Awesome Person!

Yeah, bye!

This component allows you to emulate the look and feel of SMS messaging. To use it, paste the following at the top of your page:

[[include :scp-wiki:component:text-style]]

Then, for the actual text messages, add the following:

[[div class="text-container-wrap"]]
+++ Your Sender's Name Here
[[div class="text-container"]]
[[div class="sent/recv"]]
[[span class="text"]]this is a single text[[/span]]
[[div class="sent/recv"]]
[[span class="text"]]this is a[[/span]]
[[span class="text"]]series of attached texts[[/span]]
[[/div]]
[[/div]]
[[/div]]
[[/div]]

Note that the component currently does not support embedding files or images.


This component allows you to show a time that is converted into a user's timezone. For example:

To use it, paste the following:

[[include :scp-wiki:component:tz
| time=##:##, must be in 24 hour format
| tz=default is UTC
| date=YYYY-MM-DD, default is today
| text_before=default is ${time} ${tz} is
| text_after=default is "."
]]

Everything besides the time parameter is optional.



πŸ“ŽVaf Links


This component is meant for use with the Wondertainment Theme. It adds links at the bottom for series navigation and adds a link to turn the theme on or off. To use it, paste the following:

[[include :scp-wiki:component:vaf-links
| position=middle
| previous-page=
| previous-page-name=
| next-page=
| next-page-name=
]]

You can see this component in action on ...And I Think to Myself.



1_Troll.jpg


Coal 14
⁂malov13

bad take, u suck + ratio ⁂BottomDownOver #owned
  • ECHOES 150
  • HUMS 2.3k

25:67 31 Feburary 3 AD

This component allows you to include a div formatted to look like a post on Void. Void is an in-universe Twitter analogue used by anomalous communities. To use it, paste the following:

[[include :scp-wiki:component:void-post
|profile-pic= Recommended File Width: ≀150px
|username=
|handle=
|void-msg= Suggested Length: ≀280 characters; Any Length OK
|echoes= Retweets
|hums= Likes
|time-and-date= Suggested Format: H:MM AM/PM - D Month YYYY
]]



πŸ“ŽWikimodule


This component allows you to display 15 random SCPs and Tales that you have posted at the bottom of your page. It is mandatory that you put this above the Licensebox and wikiwalk footers, but suggested to have it after your footnoteblock. To use it, paste the following on your page:

[[include :scp-wiki:component:wikimodule |normal= --]]]

If you want it to show ratings alongside the articles, paste the following instead:

[[include :scp-wiki:component:wikimodule |ratings= --]]]



Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License