Twitch stream image and sort on top only online streams

Hello JavaScripts programmers!

In stackoverflow I got one code ,who shows Twitch streamers and who is online and who’s not. (code: Now I want to upgrade this code ,with stream image and sorting first Online streamers. For example:

Default code result:

streamer1 (Offline)
streamer2 (Offline)
streamer3 (Online)
streamer4 (Online)

But I want something like this:

IMAGE streamer3 (Online)
IMAGE streamer4 (Online)
IMAGE streamer1 (Offline)
IMAGE streamer2 (Offline)

I dont know JavaScript very well ,thats the reason ,why Im want to get help there.

Anyone can ,please show me ,how this works?

Thank you

When you say the “stream image” are you referring to the thumbnail? and maybe custom image if offline?

Take a look at the part of the code where it outputs/selects “Online” vs “Offline”, you can use the same logic to display the images.

For “online” add an <img src=> tag for the thumbnail endpoint, and the same for offline, but using an offline thumbnail.

I assume all the code/logic you’d need is already in-front of you.

1 Like

Yes I understand that ,but how I can get that image? What I need to type in that code ,to I get the thumbnail and how I can sort these Online/Offline streamers?

From the API, Stream “Preview” endpoint.
preview: {
small: “URL”,
medium: “URL”,
large: “URL”,
template: “URL”

/streams/ endpoint only shows “live/online” information

Sorry ,but I dont understand :frowning: Where I need to put these code lines?

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.