Noctroxis Posted August 4, 2021 Share Posted August 4, 2021 (edited) 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 1 1 Quote Link to comment Share on other sites More sharing options...
sundogak Posted August 4, 2021 Share Posted August 4, 2021 (edited) 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 1 Quote Link to comment Share on other sites More sharing options...
Noctroxis Posted August 4, 2021 Author Share Posted August 4, 2021 (edited) 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 1 1 Quote Link to comment Share on other sites More sharing options...
C-Beats Posted August 4, 2021 Share Posted 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) Quote Link to comment Share on other sites More sharing options...
NamkaiBanco Posted September 19, 2022 Share Posted 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 Quote Link to comment Share on other sites More sharing options...
Yorrick36 Posted September 20, 2022 Share Posted 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. Quote Link to comment Share on other sites More sharing options...
gamesmame Posted September 21, 2022 Share Posted September 21, 2022 I try and make small yet... Quote Link to comment Share on other sites More sharing options...
marcosgaming Posted March 23 Share Posted 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. Quote Link to comment Share on other sites More sharing options...
Boxylisher Posted April 2 Share Posted April 2 (edited) 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 Quote Link to comment Share on other sites More sharing options...
danp142 Posted June 5 Share Posted 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 20240605201000.mp4 Quote Link to comment Share on other sites More sharing options...
_Besli_ Posted June 5 Share Posted 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! 😉 Quote Link to comment Share on other sites More sharing options...
marcosgaming Posted June 7 Share Posted 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 20240605201000.mp4 Thanks perfect. But you need to do this one by one for every game? Quote Link to comment Share on other sites More sharing options...
danp142 Posted June 7 Share Posted 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); })(); IGDB 4k boxart & rename.mp4 LaunchBox boxart name grabber.exe Quote Link to comment Share on other sites More sharing options...
marcosgaming Posted June 9 Share Posted June 9 Oh very special. But works only one by one for game yes. Not all complete? Thanks. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.