Perfect, uniform and matching Box Art for all your games...every time!

Noctroxis · August 4, 2021

Hi everyone,

I thought I'd share my 'secret' of how I've gotten my game library to look as good as the image I've attached. Perfect, rectangular squares that match all your games. This process is quite simple and works for 99.99% of all games. If you are like me then one thing that peeves you about Launcbox's GameDB is the inconsistency when it comes to cover art. People get covers from all over the web and some have company logos on them, others have weird sizes, and some have been Photoshopped to look like an actual CD case, etc....But if your goal is to have an elegant Games showcase you can proudly show off or have matching cover art when using Big Box then I have a fool-proof method that has allowed me to have nearly 400 games with matching covers. So without further ado, class is in session!

Steps to follow:

For the sake of these instructions I will be using the game "Halo Infinite" in my examples.

1. Go to IGDB ( Internet Game Database)

2. Search for your game in the top Search bar. This should work for 99.99% of all games unless they are sexual, BL, erotica-type games. They don't seem to catalog most of those.

3. Once you are at the games page. Right click the games cover/poster/whatever you like to call the "box art" and choose "Open image in a new tab". Do not get this confused with "Open link in a new tab",

4. The URL of the image in the new tab will look something like this: https://images.igdb.com/igdb/image/upload/t_cover_big/co2dto.jpg. The secret is to add _2x after the _big so that it looks like this https://images.igdb.com/igdb/image/upload/t_cover_big_2x/co2dto.jpg. That will enlarge the cover image that you see by double so you have a larger image. This is great for big screens, TV's or if you just want to use a high quality image. If you are fine with the default 1x size then ignore this step and move to step 5.

5. Drag the image from the screen to your computer somewhere and import it into Launchbox as your Box Art. That's it!

Told you this was simple. With this method you can have perfect box art every time for your games and if you're adding new games to the Launchbox GameDB I hope you use these covers for games you submit so we can start having uniform box art for others to import. I guess now's a good time to direct some attention to the developer of this software, or any mods- if the ability to use IGDB as an image source when importing games can be an option. Since this is basically just stuff taken from their API and essentialy just a URL trick it seems pretty simple to include so we can have nice covers like this natively in the app.

This page is where I got the image info for the URL from: https://api-docs.igdb.com/#images. It's IGDB's API info and all the different sizes of Box Art you can get from tweaking the images URL. You can see. Useful if you want your box art to be smaller, larger, etc. Maybe this can be built into the app? But that's neither here-nor-there...The purpose of this guide was to show you, the user, how you can import good quality, matching box art for your games.

Hope this helps!

Example of a 1x sized image:

Example of a 2x sized image: (click for full size)

Example of a 1080p sized image: (click for full size)

Edited August 4, 2021 by Noctroxis

sundogak · August 4, 2021

Interesting, always good to have more resources for media. Thanks for the link/info.

Another alternative I have used same reason you capture above (plus have clear logos and banners) is the SteamGridDB site. They are uniform quality and size at 600x900 resolution. If the original Steam Assets are available (most newer era games) there will be a button at the landing page for the game. The Steam Assets are of high quality, although the user creations are pretty good as well (mostly). In your example that is here and click on "View Original Steam Assets" button at left of screen for cover art (just right-click, save as image for 600x900). A bit larger and taller aspect ratio than IGDB but disadvantage is SteamGridDB will only have those games that are sold on Steam (i.e., no Blizzard/Epic Games for one).

Edited August 4, 2021 by sundogak

Noctroxis · August 4, 2021

13 hours ago, sundogak said:

Interesting, always good to have more resources for media. Thanks for the link/info.

Another alternative I have used same reason you capture above (plus have clear logos and banners) is the SteamGridDB site. They are uniform quality and size at 600x900 resolution. If the original Steam Assets are available (most newer era games) there will be a button at the landing page for the game. The Steam Assets are of high quality, although the user creations are pretty good as well (mostly). In your example that is here and click on "View Original Steam Assets" button at left of screen for cover art (just right-click, save as image for 600x900). A bit larger and taller aspect ratio than IGDB but disadvantage is SteamGridDB will only have those games that are sold on Steam (i.e., no Blizzard/Epic Games for one).

If you would like a REALLY big cover image and an even larger image than 2x you can get a large 720p image or a HUGE 1080p image by replacing cover_big in the image link from IGDB with 720p or 1080p.

Example with Cyberpunk 2077 link:

Normal image link: https://images.igdb.com/igdb/image/upload/t_cover_big/co2mjs.jpg

720p image link: https://images.igdb.com/igdb/image/upload/t_720p/co2mjs.jpg

1080p image link: https://images.igdb.com/igdb/image/upload/t_1080p/co2mjs.jpg

As you can see if you follow my instructions above for steps 1 through 4 ...just instead of putting _2x after _big instead replace the entire cover_big with 1080p (or 720p). With that you'll end up with bigger boxed art.

(click image for full size)

Edited August 4, 2021 by Noctroxis

C-Beats · August 4, 2021

9 hours ago, sundogak said:

disadvantage is SteamGridDB will only have those games that are sold on Steam

Not sure that is true anymore. You can even find posters for NES games on SteamGridDB (though not all)

NamkaiBanco · September 19, 2022

Does anyone have a good source for custom art work? Something like the Poster Database? or a Reddit forum? I like to have choices when decorating my library

Yorrick36 · September 20, 2022

I tend to use https://www.steamgriddb.com/ when I'm looking to fill media. There's a fairly large number of games outside of steam that have a lot of user submitted covers/logos.

gamesmame · September 21, 2022

I try and make small yet...

marcosgaming · March 23

Hi guys,

thank for the content.

I would try to do this but automatically because i have a lot of games.

Doesn't exists a plugin for to do this ???

Thanks.

Boxylisher · April 2

On 9/20/2022 at 10:39 PM, Yorrick36 said:

I tend to use https://www.steamgriddb.com/basket random when I'm looking to fill media. There's a fairly large number of games outside of steam that have a lot of user submitted covers/logos.

I also have the same interests as you.

Edited April 2 by Boxylisher

danp142 · June 5

On 3/23/2024 at 6:07 PM, marcosgaming said:

Hi guys,

thank for the content.

I would try to do this but automatically because i have a lot of games.

Doesn't exists a plugin for to do this ???

Thanks.

You can use Tampermonkey - Microsoft Edge Addons I made a script for it so you can just right-click on the image and it will automatically download the 4k images, In Tapermokey click add new user script and replace the template with this

// ==UserScript==
// @name IGDB Right Click 4k Boxart Downloader
// @namespace http://tampermonkey.net/
// @version 2024-06-05
// @description Right-click on an image to automatically download 4k boxart from IGDB.com
// @author Clean Boxart
// @match *://*.igdb.com/*
// @grant none
// ==/UserScript==

(async function() {
'use strict';

document.addEventListener('contextmenu', async function(event) {
if (event.target.tagName === 'IMG') {
event.preventDefault();
let imageUrl = event.target.src;

// Find the nearest link element to the image within the same parent
let parentElement = event.target.closest('.media');
let linkElement = parentElement ? parentElement.querySelector('a') : null;
if (!linkElement) {
console.log("No nearby link found for the image.");
return;
}

// Get the text from the link to use as image name
let linkText = linkElement.innerText.trim();
if (!linkText) {
console.log("No text found in the nearby link.");
return;
}

// Edit URL to always download the largest boxart size
const sizeVariants = ['_cover_big_2x', '_cover_big', '_cover_med', '_cover_small', '_720p', '_1080p'];
sizeVariants.forEach(variant => {
if (imageUrl.includes(variant)) {
imageUrl = imageUrl.replace(variant, '_4k');
}
});

console.log("Modified URL: " + imageUrl);

// Fetch the image data
let response = await fetch(imageUrl);
let blob = await response.blob();
let blobUrl = window.URL.createObjectURL(blob);

// Create a hidden link element to trigger the download
let link = document.createElement('a');
link.href = blobUrl;
link.download = `${linkText}.jpg`; // Use the link text to get the game name
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(blobUrl);
}
}, true);
})();

Then click File and Save after refresh IGDB.com then you will be able to Right Click on Boxart to download images automatically

_Besli_ · June 5

On 8/4/2021 at 9:56 AM, Noctroxis said:

If you would like a REALLY big cover image and an even larger image than 2x you can get a large 720p image or a HUGE 1080p image by replacing cover_big in the image link from IGDB with 720p or 1080p.

Example with Cyberpunk 2077 link:

Normal image link: https://images.igdb.com/igdb/image/upload/t_cover_big/co2mjs.jpg

720p image link: https://images.igdb.com/igdb/image/upload/t_720p/co2mjs.jpg

1080p image link: https://images.igdb.com/igdb/image/upload/t_1080p/co2mjs.jpg

As you can see if you follow my instructions above for steps 1 through 4 ...just instead of putting _2x after _big instead replace the entire cover_big with 1080p (or 720p). With that you'll end up with bigger boxed art.

(click image for full size)

Try https://images.igdb.com/igdb/image/upload/t_original/co2dto.jpg

That should show you the original image! 😉

marcosgaming · June 7

On 6/5/2024 at 9:12 PM, danp142 said:

You can use Tampermonkey - Microsoft Edge Addons I made a script for it so you can just right-click on the image and it will automatically download the 4k images, In Tapermokey click add new user script and replace the template with this

// ==UserScript==
// @name IGDB Right Click 4k Boxart Downloader
// @namespace http://tampermonkey.net/
// @version 2024-06-05
// @description Right-click on an image to automatically download 4k boxart from IGDB.com
// @author Clean Boxart
// @match *://*.igdb.com/*
// @grant none
// ==/UserScript==

(async function() {
'use strict';

document.addEventListener('contextmenu', async function(event) {
if (event.target.tagName === 'IMG') {
event.preventDefault();
let imageUrl = event.target.src;

// Find the nearest link element to the image within the same parent
let parentElement = event.target.closest('.media');
let linkElement = parentElement ? parentElement.querySelector('a') : null;
if (!linkElement) {
console.log("No nearby link found for the image.");
return;
}

// Get the text from the link to use as image name
let linkText = linkElement.innerText.trim();
if (!linkText) {
console.log("No text found in the nearby link.");
return;
}

// Edit URL to always download the largest boxart size
const sizeVariants = ['_cover_big_2x', '_cover_big', '_cover_med', '_cover_small', '_720p', '_1080p'];
sizeVariants.forEach(variant => {
if (imageUrl.includes(variant)) {
imageUrl = imageUrl.replace(variant, '_4k');
}
});

console.log("Modified URL: " + imageUrl);

// Fetch the image data
let response = await fetch(imageUrl);
let blob = await response.blob();
let blobUrl = window.URL.createObjectURL(blob);

// Create a hidden link element to trigger the download
let link = document.createElement('a');
link.href = blobUrl;
link.download = `${linkText}.jpg`; // Use the link text to get the game name
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(blobUrl);
}
}, true);
})();

Then click File and Save after refresh IGDB.com then you will be able to Right Click on Boxart to download images automatically

Thanks perfect. But you need to do this one by one for every game?

danp142 · June 7

1 hour ago, marcosgaming said:

Thanks perfect. But you need to do this one by one for every game?

Made a mistake on the previous script so don`t use it lol

I made a better version anyway, Its still one by one but way quicker, drop LaunchBox BoxArt Name Grabber.exe into a Platform and run it, it searches for all boxart ending in -01 and adds them to a list within a GUI, clicking a line in the list will save it to the clipboard and delete the line from the GUI, then using this new script right click in the search box on Search video games, characters, developers (igdb.com) it will paste and search automatically, make sure to select a platform for better results, then right click a image to match a game and it will rename it using the last pasted text.

New Script for Tampermonkey

// ==UserScript==
// @name IGDB Right Click 4k Boxart Downloader
// @namespace http://tampermonkey.net/
// @version 2024-06-05
// @description Right-click on an image to automatically download 4k boxart from IGDB.com and paste text in input fields
// @author Clean Boxart
// @match *://*.igdb.com/*
// @grant none
// ==/UserScript==

(async function() {
'use strict';

// Function to get text from clipboard
async function getClipboardText() {
try {
const text = await navigator.clipboard.readText();
return text.trim();
} catch (err) {
console.error('Failed to read clipboard contents: ', err);
return '';
}
}

// Function to simulate key press
function simulateEnterKey(target) {
let keyboardEvent = new KeyboardEvent('keydown', {
bubbles: true,
cancelable: true,
key: 'Enter',
code: 'Enter',
keyCode: 13,
which: 13
});
target.dispatchEvent(keyboardEvent);

keyboardEvent = new KeyboardEvent('keypress', {
bubbles: true,
cancelable: true,
key: 'Enter',
code: 'Enter',
keyCode: 13,
which: 13
});
target.dispatchEvent(keyboardEvent);

keyboardEvent = new KeyboardEvent('keyup', {
bubbles: true,
cancelable: true,
key: 'Enter',
code: 'Enter',
keyCode: 13,
which: 13
});
target.dispatchEvent(keyboardEvent);
}

// Event listener for context menu
document.addEventListener('contextmenu', async function(event) {
let target = event.target;

// Handle image right-click
if (target.tagName === 'IMG') {
event.preventDefault();
let imageUrl = target.src;

// Determine the image name
let imageName = await getClipboardText();

// If no clipboard text, find the nearest link element text
if (!imageName) {
let parentElement = target.closest('.media');
let linkElement = parentElement ? parentElement.querySelector('a') : null;
if (!linkElement) {
console.log("No nearby link found for the image.");
return;
}

imageName = linkElement.innerText.trim();
if (!imageName) {
console.log("No text found in the nearby link.");
return;
}
}

// Edit URL to always download the largest boxart size
const sizeVariants = ['_cover_big_2x', '_cover_big', '_cover_med', '_cover_small', '_720p', '_1080p'];
sizeVariants.forEach(variant => {
if (imageUrl.includes(variant)) {
imageUrl = imageUrl.replace(variant, '_4k');
}
});

console.log("Modified URL: " + imageUrl);

// Fetch the image data
let response = await fetch(imageUrl);
if (!response.ok) {
console.log("Failed to fetch the image.");
return;
}
let blob = await response.blob();
let blobUrl = window.URL.createObjectURL(blob);

// Create a hidden link element to trigger the download
let link = document.createElement('a');
link.href = blobUrl;
link.download = imageName + '.jpg'; // Use the clipboard text or the nearest link text to name the file
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(blobUrl);

// Handle input or textarea right-click
} else if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
event.preventDefault();
let clipboardText = await getClipboardText();
if (clipboardText) {
// Clear the text field before pasting the data
target.value = '';
let clearEvent = new Event('input', { bubbles: true });
target.dispatchEvent(clearEvent);

// Set the clipboard text
target.value = clipboardText;
console.log("Auto-pasted text: " + clipboardText);

// Simulate input event to trigger any change listeners
let inputEvent = new Event('input', { bubbles: true });
target.dispatchEvent(inputEvent);

// Simulate pressing Enter key
setTimeout(() => simulateEnterKey(target), 100); // Add a slight delay to ensure paste is completed
}
}
}, true);
})();

LaunchBox boxart name grabber.exe

marcosgaming · June 9

Oh very special. But works only one by one for game yes. Not all complete? Thanks.

Perfect, uniform and matching Box Art for all your games...every time!

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation