Categories > WeAreDevs > Announcements >
Images are a thing now
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.
Replied
Yes sirr, now I can include my minion memes:
https://i.makeagif.com/media/7-01-2018/b4LOfG.gif
Cancel
Post
Proud creator of: WRD+
Replied
how do u do it ?
Cancel
Post
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
Cancel
Post
Replied
@FluxusDevelopment That pattern doesn't always work. Not every image is a png. There are .jpgs and .gifs.
Cancel
Post
Replied
I posted an image of a cookie
Cancel
Post
Replied
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!)
Cancel
Post
Proud creator of: WRD+
Users viewing this thread:
( Members: 0, Guests: 1, Total: 1 )
Cancel
Post