How to get spesefick thumbnail from api

So I would for my website get the thumbnail data to display a thumbnail but I want spesefick the thumbnail as the one comes First on the website but in the response it have a different order

const imgUrl = `https://thumbnails.roproxy.com/v1/games/multiget/thumbnails?universeIds=${game.universeId}&countPerUniverse=1&defaults=true&size=768x432&format=Png&isCircular=false`;

console.log('Constructed Image URL:', imgUrl);

fetch(imgUrl)
  .then(response => {
    if (!response.ok) {
      throw new Error(`Network response was not ok: ${response.statusText}`);
    }
    return response.json();
  })
  .then(thumbnailData => {
    console.log('Thumbnail Data:', thumbnailData);  // Log full data for inspection
    if (thumbnailData && thumbnailData.data && thumbnailData.data[0] && thumbnailData.data[0].thumbnails && thumbnailData.data[0].thumbnails.length > 0) {
      // Get the first image URL from the thumbnails array
      const firstImageUrl = thumbnailData.data[0].thumbnails[0].imageUrl;
      console.log('First Image URL:', firstImageUrl);  // Log the first image URL
      
      // Select the image element
      const imgElement = document.querySelector('#game-thumb-1');
      
      if (imgElement) {
        imgElement.src = firstImageUrl;  // Set the image source to the first image URL
      } else {
        console.error('Image element with id="game-thumb-1" not found in DOM');
      }
    } else {
      console.error('No valid thumbnails received from API');
    }
  })
  .catch(error => {
    console.error('Error fetching the thumbnail:', error);
  });

Well on the response it haven’t the order as shown on the website so I can’t get the first thumbnail I want

So how could I get it in the order as on the website

It handles it trough a universe id based on a name so I can’t manually use the thumbnail IDs or spesefick order

From this api

https://thumbnails.roproxy.com/v1/games/multiget/thumbnails?universeIds=${game.universeId}&countPerUniverse=1&defaults=true&size=768x432&format=Png&isCircular=false

I want this thumbnail

But I get this

In the same object with the imageUrl property, a sibling targetId property exists. It looks like the game page sorts them in descending order, where the highest targetId is the first thumbnail.

roproxy isn’t needed for this, Roblox does accept requests that come outside of running Roblox servers, for example from javascript in the browser.

1 Like