Jump to content
Csl

The C in Csl stands for Coding (Tutorial)

Recommended Posts

Static scroll images (aka, scrolly pictures)

Disclaimer: doesn't work on mobile

This is a neat way to show huge, hd images without filling up the page or make static backgrounds. Basically the image remains static even though you scroll down

Below is a condensed example from the Taen lore article

The Jungle

[ QUADRANT I - JUNGLE | PRIMAS FOREST; PERSISTENT SILVAGENITUS COVER ]
The Wetlands

[ QUADRANT II - SWAMP | MUSKEG MARSH; NOXIOUS GROUND FOG ]
Sierra Ossa

[ QUADRANT III - MOUNTAIN | MOUNTAIN RANGE; REALITY INSTABILITY ]
The Barrens

[ QUADRANT IV - DESERT | SEMI-ARID STEPPE; SPATIO-TEMPORAL ANOMALIES ]

 

Now here's an example of just a picture

 

Picture template:

<div style="background-image: url(URL); background-size: 100%; width:100%; margin:auto; height:400px; background-attachment:fixed;"></div>

You can toy with the width and height of the container.

>>I'll add a template for background parallax for posts here later.

Edited by Csl

Share this post


Link to post
Share on other sites
On 8/31/2019 at 2:28 PM, Tebo said:

I used to do this on a few boards until I broke a database. I also used a similar method to seize control of one.

@supernal @desolate milkshake Triple-check your sanitation.

Can I change my screenname to Veloci');DROP TABLE Members;-- ?

Share this post


Link to post
Share on other sites

I realize I never really posted the format for actual post tables, so here are two examples!

Black background, white text:

that's right I've heard the story over and over again

gee it's swell to finally meet her other friends

that's right I've heard the story don't really like how it ends

gee it's swell to finally meet her other friends

what did she say about me what did she say?

what did you do without me what did you do?

did you play games without me what did you play

did you think all this time that I wouldn't find out about you?

<div style="width:100%;background-image:url(PUTIMAGEURLHERE);background-attachment:fixed;margin:auto;font-family:XX;letter-spacing:1px;padding:5%; font-size:15px;">
	<div style="width:80%;margin:auto;padding:5%;background:rgba(0,0,0,.7);color:#FFFFFF;">
    <p>that's right I've heard the story over and over again</p>
    <p>gee it's swell to finally meet her other friends</p>
    <p>that's right I've heard the story don't really like how it ends</p>
    <p>gee it's swell to finally meet her other friends</p>
    <p>what did she say about me what did she say?</p>
    <p>what did you do without me what did you do?</p>
    <p>did you play games without me what did you play</p>
    <p>did you think all this time that I wouldn't find out about you?</p>
	</div>
</div>

xx

that's right I've heard the story over and over again

gee it's swell to finally meet her other friends

that's right I've heard the story don't really like how it ends

gee it's swell to finally meet her other friends

what did she say about me what did she say?

what did you do without me what did you do?

did you play games without me what did you play

did you think all this time that I wouldn't find out about you?

<div style="width:100%;background-image:url(IMAGEURLHERE);background-attachment:fixed;margin:auto;font-family:XX;letter-spacing:1px;padding:5%; font-size:15px;">
	<div style="width:80%;margin:auto;padding:5%;background:rgba(255,255,255,.7);color:#000;">
    <p>that's right I've heard the story over and over again</p>
    <p>gee it's swell to finally meet her other friends</p>
    <p>that's right I've heard the story don't really like how it ends</p>
    <p>gee it's swell to finally meet her other friends</p>
    <p>what did she say about me what did she say?</p>
    <p>what did you do without me what did you do?</p>
    <p>did you play games without me what did you play</p>
    <p>did you think all this time that I wouldn't find out about you?</p>
	</div>
</div>

 

have fun~

Share this post


Link to post
Share on other sites
On 9/9/2019 at 4:01 PM, Veloci-Rapture said:

Can I change my screenname to Veloci');DROP TABLE Members;-- ?

You can, but usernames are almost always inert. Klaxons usually sound at parsing raw HTML, though, and most of these platforms warn you off it even where they offer the ability to enable it. I'm not even sure it working is intentional on their part. Moreover, exploiting the WYSIWYG editor to parse raw HTML (if it has no way to sanitize it) allows me to vandalize a page, hijack it, or do any number of things ranging from annoying to harmful without having to resort to injection and without it even being immediately apparent whose post was responsible.

e.g. I could PM members asking for personal information and make it look like a staff member replied to the private thread okaying it, or redirect a thread to a login prompt. It's possible the editor has some built-in protections against this when used normally, but I suspect it doesn't apply to using a third-party tool to "extend its features".

Share this post


Link to post
Share on other sites

On security concerns, reply from the devs:

Basically, the way the editor works is that it submits raw, formatted, HTML to our parsing routines which then cleans it. We use the industry-standard HTMLPurifier library to do this, and we only allow specific things.

Specifically:

  • We only allow embedded iframes from services we trust (ex. our OEmbed integrations), and any additional bases provided by you. 
  • If remote image posting is disabled, then the background-image inline CSS property is explicitly forbidden.
  • In addition to ones you may provide via the Editor settings, only specific CSS classes (used by our editor plugins) are allowed to be added to elements.
  • We explicitly do not allow negative margins to be applied, or whitespace:nowrap to be used.
  • <script> tags are stripped out on submission.

In fact, everything they have posted you could easily convert into an editor button to do the same thing, without having to use the browsers developer tools (which, if we didn't allow, you wouldn't be able to).

A button for it would be cool

Share this post


Link to post
Share on other sites

Script tags being removed wholesale is both comforting and disappointing, as it could be used to make some nifty card-type features and tabbed menus for settings and the like.

I'll probably regret this, but for now I'm going to endorse it as the major concerns I had were addressed. Let me know if any problems arise so I can tell you I told you so help you shore up the disallowed list.

Edited by Tebo

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...