Peppo Card Grid

ERMAHGERD STAHP

This is a template page used internally by the SCP Wiki.

PLEASE DO NOT TOUCH THIS PAGE
WITHOUT STAFF PERMISSION


What is this?

This is a sortable, card-based display format primarily for author pages, but with the potential for other applications as well. For an example, see the creator's author page.


Author

PeppersGhostPeppersGhost


Associated Templates

I used as few pages as I could possibly accomplish this with. Due to technical limitations, I cannot include any content on these pages except what is integral to the functionality of the card grid.
peppo-card-base
peppo-card-structure


Setup instructions

  • Choose the page you want the to display the Card Grid on. For our purposes, we'll call this the Display Page.
  • First we need to add the CSS that will make the whole thing work. To do that, copy and paste the following code to your Display Page:

[[include component:peppo-card-grid
| cardBG= changeThis
| color1 = changeThis
| color2= changeThis
]]

  • Replace each "changeThis" with whatever color you want to use in your theme. For best results, use the hex code for the color you want. For example, if you want a color to be white, replace "changeThis" with "#ffffff". This tool will help you find a selection of hex codes.
  • Create a new page to store your cards on. We'll call this your Card Collection. You must have "component:" at the beginning of this page's URL. It will be tagged as a template.

    Example: http://www.scp-wiki.wikidot.com/component:peppersghost-card-collection
  • Add the following code to your Card Collection:

[[div class="card-box"]]

CARDS GO HERE

[[/div]]

  • Replace "CARDS GO HERE" with the peppo-card-base component below. We'll break down how each section works in just a sec.

[[include component:peppo-card-base
articleURL=your-source
| {$orderNew} = -x
| {$orderOld} = x
| {$orderRate} = -xx
| {$orderNum} = xxxxx
| articleTitle = Your article's designation goes here
| articleLink = http://www.scp-wiki.net/your-url
| articleName = Your article name goes here
| articleQuote = Your quote goes here
| articleImage = Your image URL goes here
| hideCard = {$type} | hideCard = inherit
| articleCredit = Co-author: Such-and-such
| creditLink = http://www.scp-wiki.wikidot.com/such-and-such
| showCredit1 = inherit
| articleCredit2 = Art by So-and-So
| creditLink2 = http://www.scp-wiki.wikidot.com/such-and-such
| showCredit2 = inherit
]]

  • Check the collapsibles below for help customizing your card.


  • Copy the entire include again to add and customize another card. Repeat as many times as desired. Do not copy/paste the div code again. Make sure all your cards are sandwiched by the div code you added earlier!

Creating Sorting Groups

  • Now comes the part where we bring it all together.

    First, create a tab module on your Display Page. The first tab you list will be your default sorting method.

[[tabview]]
[[tab Default Option]]
Your first sorting group goes here
[[/tab]]
[[tab Alternate Option]]
Your second sorting group goes here
[[/tab]]
[[/tabview]]

  • Paste the following into each spot where a sorting group will go:

[[include component:card-collection
| orderNew =
| orderOld =
| orderRate =
| orderNum =
]]

  • Change "card-collection" to the end of the URL for your Card Collection.

    For example: If my Card Collection page's URL is "http://scp-wiki.wikidot.com/component:peppersghost-rules-everything", then my first line will look like this:

[[include: component:peppersghost-rules-everything

  • Choose a sorting type for that group:
    • orderNew displays the articles from newest to oldest.
    • orderOld displays them from oldest to newest.
    • orderRate displays the articles from highest rated to lowest.
    • orderNum displays articles by a manually entered numbered.
  • Type articleOrder after the equals sign next to your chosen sorting option. For all others, write null.

    Example:

[[include component:peppersghost-rules-everything
| orderNew = null
| orderOld = null
| orderRate = articleOrder
| orderNum = null
]]

  • If you want a sorting group to filter cards by type, include the following code on a new line before the "]]" line:

| typeName = none

  • This will hide any cards that have "{$typeName}" set as their "hideCard" value, so just change "typeName" to the name of the card type you want to hide. Repeat this step on a new line for every additional card type you want to hide.

    Let's say I have given all of my cards one of three hideCard values: {$scp}, {$tale}, and {$goi}. If I want to make a sorting group that only displays GoI format articles and lists them from oldest to newest, my code will look like this:

[[include component:peppersghost-rules-everything
| orderNew = null
| orderOld = articleOrder
| orderRate = null
| orderNum = null
| scp = none
| tale = none
]]

Wrapping up

That's pretty much everything you need to know! Let's end with one final example.

Suppose that you want to make three sorting groups. The default option will list all cards by rating. The second will show only tales and GoI formats listed by rating. The third will list only tales from newest to oldest. The final code with all the different components together will look like this:

[[include component:peppo-card-grid
| cardBG= #333333
| color1 = #b81818
| color2= #ffffff
]]
[[tabview]]
[[tab Rating]]
[[include component:peppersghost-rules-everything
| orderNew = null
| orderOld = null
| orderRate = articleOrder
| orderNum = null
]]
[[/tab]]
[[tab No SCPs]]
[[include component:peppersghost-rules-everything
| orderNew = null
| orderOld = null
| orderRate = articleOrder
| orderNum = null
| scp = none
]]
[[/tab]]
[[tab Tale Library]]
[[include component:peppersghost-rules-everything
| orderNew = null
| orderOld = articleOrder
| orderRate = null
| orderNum = null
| scp = none
| goi = none
]]
[[/tab]]
[[/tabview]]

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