Picture Frame Component

Link to article: Picture Frame Component.

Module Styles

• img{
      max-width:300px
  }

• 
  /* Frame Base (NOTE: Black is Default) */
  .queerframe {
      pointer-events: none;
      box-shadow: 0 0 5px 0 rgba(0, 0, 0, .25) inset, 0 5px 10px 5px rgba(0,0,0,.25);
      box-sizing: border-box;
      display: inline-block;
      margin:10px 10px;
      padding:5vmin;
      position: relative;
      text-align: center;
      
      max-width: 700px;
  
      background-color: var(--frame-bg-color, #373737);
      border: solid 5vmin var(--frame-border-color, #2e2e2e);
      border-radius:2px;
      border-top-color: var(--frame-top, #000);
      border-left-color: var(--frame-sides, #191919);
      border-right-color: var(--frame-sides, #191919);
      border-bottom-color: var(--frame-bottom, #202020);
  }
  
  /* Frame Moulding */
  .queerframe::before{
      pointer-events: none;
      border-radius:2px;
      bottom:-2vmin;
      box-shadow:0 2px 5px 0 rgba(0,0,0,.4) inset;
      content:"";
      left:-2vmin;
      position: absolute;
      right:-2vmin;
      top:-2vmin;
  }
  
  .queerframe::after{
      pointer-events: none;
      border-radius:2px;
      bottom:-2.5vmin;
      box-shadow: 0 2px 5px 0 rgba(0,0,0,.4);
      content:"";
      left:-2.5vmin;
      position: absolute;
      right:-2.5vmin;
      top:-2.5vmin;
  }
  
  /* Picture Edges */
  .queerframe > img {
      border:solid 2px;
      border-bottom-color:#ffe;
      border-left-color:#eed;
      border-right-color:#eed;
      border-top-color:#ccb;
      max-height:100%;
  }
  
  /* Color Schemes */
  .white{
      --frame-bg-color: #ddc;
      --frame-border-color: eee;
      --frame-bottom: #fff;
      --frame-sides: #eee;
      --frame-top: #ddd;
  }
  .black {
      --frame-bg-color: #373737;
      --frame-border-color: #2e2e2e;
      --frame-bottom: #202020;
      --frame-sides: #191919;
      --frame-top: #000;
  }
  .wood {
      --frame-bg-color: #665;
      --frame-border-color: #4f3b1b;
      --frame-bottom: #553e22;
      --frame-sides: #473216;
      --frame-top: #39280e;
  }
  .gold {
      --frame-bg-color: #ccb;
      --frame-border-color: #CFB53B;
      --frame-bottom: #e5ca46;
      --frame-sides: #CFB53B;
      --frame-top: #ad9525;
  }
  .silver {
      --frame-bg-color: #575757;
      --frame-border-color: #C0C0C0;
      --frame-bottom: #cfcfcf;
      --frame-sides: #C0C0C0;
      --frame-top: #a1a1a1;
  }

Inline Styles

• (none)

Includes

• (none)

CSS Classes

• blockquote

• blockquote

• code

• blockquote

• code

• blockquote

• code

• queerframe

• {$style}

Page Source

[[iftags +component]]
[[module css]]
img{
    max-width:300px
}
[[/module]]

[[>]]
[[module Rate]]
[[/>]]

[[=]]
+ What is This?
[[/=]]

[[div class="blockquote"]]
This is a component by [[*user Queerious]], that takes an image and puts it inside a styled picture frame!

There are multiple included different styles, as well as instructions for modifying your own below!
[[/div]]

-----
[[=]]
++ **__The Code__**
[[/=]]
[[div class="blockquote"]]
At the top of your page, you will need to include the following line of code:

[[div class="code"]]
@@[[include :scp-wiki:component:queerframe code=--]]@@
[[/div]]

The above line only needs to be included **once** at the top of your article.
[[/div]]

-----
[[=]]
++ **__The Frame__**
[[/=]]
[[div class="blockquote"]]
Wherever you would like to place the picture frame component in your work, place the following code entirely.

[[div class="code"]]
@@[[include :scp-wiki:component:queerframe frame=--@@
@@|url= imageHyperlink @@
@@|style= colorScheme@@
@@|alt= Alt text for Screen Readers@@
@@]]@@
[[/div]]

**url** requires the link to the image you want to place in them frame.

**style** requires a specific color scheme to be chosen. Available color schemes are:
[[collapsible show="* Black" hide="- Black"]]
[[image blackEx.PNG]]
[[/collapsible]]
[[collapsible show="* White" hide="- White"]]
[[image whiteEx.PNG]]
[[/collapsible]]
[[collapsible show="* Wood" hide="- Wood"]]
[[image woodEx.PNG]]
[[/collapsible]]
[[collapsible show="* Silver" hide="- Silver"]]
[[image silverEx.PNG]]
[[/collapsible]]
[[collapsible show="* Gold" hide="- Gold"]]
[[image goldEx.PNG]]
[[/collapsible]]

To choose your color scheme, paste the scheme 'name' directly.

[[/div]]

[[=]]
++ Example
[[/=]]
[[div class="blockquote"]]

[[div class="code"]]
@@[[include :scp-wiki:component:queerframe frame=--@@
@@|url= http://scp-wiki.wikidot.com/local--files/scp-8478/Stephanie_1.jpg@@
@@|style= gold@@
@@|alt= A woman's silhouette, within a gold frame.@@
@@]]@@
[[/div]]

[[=]]
+++ Appears like this:
[[image ExampleFrameGold.PNG]]
@@ @@
[[/=]]
[[/div]]

-----

[[/iftags]]

[[iftags -component]]
[!-- {$code}]
[[module css]]

/* Frame Base (NOTE: Black is Default) */
.queerframe {
    pointer-events: none;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .25) inset, 0 5px 10px 5px rgba(0,0,0,.25);
    box-sizing: border-box;
    display: inline-block;
    margin:10px 10px;
    padding:5vmin;
    position: relative;
    text-align: center;
    
    max-width: 700px;

    background-color: var(--frame-bg-color, #373737);
    border: solid 5vmin var(--frame-border-color, #2e2e2e);
    border-radius:2px;
    border-top-color: var(--frame-top, #000);
    border-left-color: var(--frame-sides, #191919);
    border-right-color: var(--frame-sides, #191919);
    border-bottom-color: var(--frame-bottom, #202020);
}

/* Frame Moulding */
.queerframe::before{
    pointer-events: none;
    border-radius:2px;
    bottom:-2vmin;
    box-shadow:0 2px 5px 0 rgba(0,0,0,.4) inset;
    content:"";
    left:-2vmin;
    position: absolute;
    right:-2vmin;
    top:-2vmin;
}

.queerframe::after{
    pointer-events: none;
    border-radius:2px;
    bottom:-2.5vmin;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.4);
    content:"";
    left:-2.5vmin;
    position: absolute;
    right:-2.5vmin;
    top:-2.5vmin;
}

/* Picture Edges */
.queerframe > img {
    border:solid 2px;
    border-bottom-color:#ffe;
    border-left-color:#eed;
    border-right-color:#eed;
    border-top-color:#ccb;
    max-height:100%;
}

/* Color Schemes */
.white{
    --frame-bg-color: #ddc;
    --frame-border-color: eee;
    --frame-bottom: #fff;
    --frame-sides: #eee;
    --frame-top: #ddd;
}
.black {
    --frame-bg-color: #373737;
    --frame-border-color: #2e2e2e;
    --frame-bottom: #202020;
    --frame-sides: #191919;
    --frame-top: #000;
}
.wood {
    --frame-bg-color: #665;
    --frame-border-color: #4f3b1b;
    --frame-bottom: #553e22;
    --frame-sides: #473216;
    --frame-top: #39280e;
}
.gold {
    --frame-bg-color: #ccb;
    --frame-border-color: #CFB53B;
    --frame-bottom: #e5ca46;
    --frame-sides: #CFB53B;
    --frame-top: #ad9525;
}
.silver {
    --frame-bg-color: #575757;
    --frame-border-color: #C0C0C0;
    --frame-bottom: #cfcfcf;
    --frame-sides: #C0C0C0;
    --frame-top: #a1a1a1;
}
[[/module]]
[!-- --]

[!-- {$frame}]
[[div_ class="queerframe {$style}"]]
[[image {$url} alt="{$alt}"]]
[[/div]]
[!-- --]
[[/iftags]]