Categories > WeAreDevs > Announcements >

Images are a thing now

Posts: 975

Threads: 34

Joined: Dec, 2016

Reputation: 108

Posted

Just like in Discord, an image URL will now automatically convert to an image during thread view.

 

The following is a Gyazo screenshot link:

 

https://gyazo.com/70a2a4f17cbf3acfcaf6e19c81a42972

 

Links ending in .png, .gif, and .jpeg will also work

 

Imgur links work as well, but as an embed. Unfortunately, I could not figure out how to extract the image from Imgur's presented link. How ever, you can copy the plain image link from Imgur and use that to display without the embed. All links must start with https.

  • 0

PoopMaster

SoundInfinity

noticed

Posts: 120

Threads: 23

Joined: Jul, 2019

Reputation: 9

Replied

Yes sirr, now I can include my minion memes:

https://i.makeagif.com/media/7-01-2018/b4LOfG.gif

 

  • 0

Proud creator of: WRD+

Posts: 975

Threads: 34

Joined: Dec, 2016

Reputation: 108

Replied

@PoopMaster That made me laugh wayyy too hard

  • 0

Posts: 7

Threads: 3

Joined: Mar, 2020

Reputation: 0

Replied

how do u do it ?

  • 0

Posts: 161

Threads: 31

Joined: Sep, 2019

Reputation: 19

Replied

Hey Jon, I'm not sure if I read it correctly about imgur links, but if you mean getting the image from an imgur link like this for example:

 

https://imgur.com/2cBatac

All you need to do is change the url to "i.imgur.com" and add ".png" at the end like this:

HTTPS > i.imgur.com/2cBatac.png

  • 0

 

 

Posts: 975

Threads: 34

Joined: Dec, 2016

Reputation: 108

Replied

@FluxusDevelopment That pattern doesn't always work. Not every image is a png. There are .jpgs and .gifs.

  • 0

Posts: 23

Threads: 2

Joined: Apr, 2020

Reputation: -20

Replied

I posted an image of a cookie

  • 0

PoopMaster

SoundInfinity

noticed

Posts: 120

Threads: 23

Joined: Jul, 2019

Reputation: 9

Replied

@Xero

Alright, you probably found a better workaround, but I made this script for you:

 

 

[code]

function LoadImgurImage(url="", extensions=["png","gif"]){

    let getExtension = (from="", excludeDot=false)=>{

        let _temp = excludeDot ? from.match(/(.*?)[.](.*)$/) : from.match(/(.*?)([.].*)$/);

        return _temp ? _temp[_temp.length-1] : "";

    }; // ("hello.txt") -> .txt || ("hello.txt", true) -> txt

 

    return new Promise((resolve, reject)=>{

        let imageUrl = new URL(url); 

        let imageElement = new Image();

 

        // URL Conditions

        imageUrl.protocol = "https:"; // http: -> https:

        if(!imageUrl.hostname.startsWith("i."))

            imageUrl.hostname = `i.${imageUrl.hostname}`; // imgur.com -> i.imgur.com

 

        let extensionlessUrl = imageUrl.href.substring(0, imageUrl.href.length-getExtension(imageUrl.pathname).length);

        let extensionIndex = 0;

 

        function next(){

            if(extensionIndex < extensions.length){

                imageUrl.href = `${extensionlessUrl}.${extensions[extensionIndex]}`;

                imageElement.src = imageUrl.href;

                ++extensionIndex;

            } else {

                reject(new Error("Image failed to load."));

            }

        }

 

        // Events

        imageElement.addEventListener("load", (e)=>{

            resolve({

                Url: imageUrl.href,

                Element: imageElement,

                Extension: getExtension(imageUrl.href, true)

            });

 

            // If it doesn't have a parent, it probably won't be used afterwards.

            if(!imageElement.nodeParent) imageElement.remove();

        });

 

        imageElement.addEventListener("error", next);

        

        imageElement.src = imageUrl.href;

    });

}

 

// Usage

LoadImgurImage("https://imgur.com/2cBatac").then((data)=>{

    document.body.appendChild(data.Element); // Displays image

}).catch(console.log); // Failed to load

[/code]

 

(Imagine not having [code] support, wrd+ yes sirr!)

  • 1

Proud creator of: WRD+

Users viewing this thread:

( Members: 0, Guests: 1, Total: 1 )