Steam

Steam

26,885 valoraciones
How to Upload Long Images for Showcases [Featured works]
Por :3 y 3 colaboradores
A simple guide to uploading images (or gifs) on Steam with any height for Artwork or Screenshot showcases.
This is a quick reference, read the guide first to understand how to use these codes.
$J('#image_width').val(1000).attr('id',''),$J('#image_height').val(1).attr('id','');
$J('#image_width').val(1000).attr('id',''),$J('#image_height').val(1).attr('id',''),$J('[name=file_type]').val(5);
20
249
24
4
12
12
11
10
5
18
17
16
15
13
12
3
11
8
2
5
   
Premio
Favoritos
Favorito
Quitar
Overview

This guide will guide to you through how to upload long images to the artwork or screenshot showcase. Special thanks for MightyG3 for the discovery of this exploit which completely changed steam profile artworks.

You must be at least Level 10 on Steam to show an artwork/screenshot showcase.

Be careful not to upload images too small in resolution to be long. Steam.Design[steam.design] will automatically crop your steam background to the correct dimensions.

If you are using the normal artwork showcase (1 middle and 1 side); for middle artwork, width should be 506 pixels wide and any height. Then side artwork should be 100 pixels and with the same height as the middle if you want it to align.

If you are using the featured artwork showcase which is only one big middle artwork, then it needs to be 630 pixels wide and any height.




Instructions


Open this link in Google Chrome or Mozilla Firefox.
https://gtm.steamproxy.vip/sharedfiles/edititem/767/3/






Select your artwork under Choose File.






Right click anywhere on the page, click inspect/inspect element then go to the 'Console'.

Or use Shortcuts
Chrome shortcut: Ctrl+Shift+J
FireFox Shortcut: Ctrl+Shift+K


Firefox only (only needs to be done once): after opening the console, MANUALLY type in "allow pasting " without quotation marks and then remove it (you do not need to press enter). By default Firefox does not allow you to paste codes into the console and this disables that.






Paste ONE of these codes into the console and hit enter. Only one of these codes need to be used, not both.

Ignore the image preview if it is showing the wrong image/gif or nothing at all. Your last selected gif will be uploaded.

Enter this line of code into the console to upload as an Artwork or Featured Artwork:
$J('#image_width').val(1000).attr('id',''),$J('#image_height').val(1).attr('id','');

Enter this line of code into the console to upload as an Screenshot:
$J('#image_width').val(1000).attr('id',''),$J('#image_height').val(1).attr('id',''),$J('[name=file_type]').val(5);






Now simply give it a title and tick that "I certify that I created this artwork" box, then "Save and Continue".





IMPORTANT: On the artwork selector, your artwork will appear to be a thin black line. That is perfectly fine and it means the code worked, when you select the artwork it should look normal after loading.


Browser Extension

Extension is causing confusion. I believe it works but just says error even if it works. If you are using the extension and see an error please check if it's already uploaded anyway.

The team over at Steam.Design have created a browser extension/addon which automates almost a lot of things artwork creating!

Download Chrome Extension[chrome.google.com]
Download Firefox[addons.mozilla.org]

It features a box where you can easily drag your artwork then click a single button and upload all of them.

Note: When using the extension to upload as above; you DO NOT need to follow the instructions below with pasting the code.


Extension is causing confusion. I believe it works but just says error even if it works. If you are using the extension and see an error please check if it's already uploaded anyway.



Extras
Spanish
http://gtm.steamproxy.vip/sharedfiles/filedetails/?id=821188384
Russian
http://gtm.steamproxy.vip/sharedfiles/filedetails/?id=1102484221

Here are some other relevant helpful guides for uploading artworks:

https://gtm.steamproxy.vip/sharedfiles/filedetails/?id=1627692828
https://gtm.steamproxy.vip/sharedfiles/filedetails/?id=727014963
http://gtm.steamproxy.vip/sharedfiles/filedetails/?id=961711822
http://gtm.steamproxy.vip/sharedfiles/filedetails/?id=850271209
https://gtm.steamproxy.vip/sharedfiles/filedetails/?id=892968879
https://gtm.steamproxy.vip/sharedfiles/filedetails/?id=2144899743

  • MightyG3 for the amazing exploit <3
  • ash for putting the code together, designing and creating the guide
  • Oddball for working on steam.design, improving guide clarity, and shortening code
  • Aevoa for design inspiration and many other guides.
  • David for the new version of the code which avoids being overwritten.
And a special thanks to Tithen-Firion who is no longer with us.

Find more help on steam.design on the Steam Artwork Discord[discord.gg] or at the Steam.Design Discord[discordapp.com].

Please remember: Check you copy and pasted the code correctly and that your image is of the right resolution.
Normal artwork showcase (1 middle and 1 side); for middle artwork, width should be 506 pixels wide and any height. Then side artwork should be 100 pixels and with the same height as the middle if you want it to align.

Featured artwork showcase; which is only one big middle artwork, then it needs to be 630 pixels wide and any height.
2,809 comentarios
ʚ 𝚊𝚛𝚒𝚜𝚞 ɞ 19 OCT a las 9:56 a. m. 
Does anyone know why steam compresses the images and how to stop it? i see some very good quality on some profiles but it looks full of artifacts on mine...
Nagashinio 19 OCT a las 4:32 a. m. 
if someone is interested I could do some artworks :crown1:
nadir 17 OCT a las 1:37 p. m. 
ohhhhhhhhhh nvm i used a different code from a different guide and it works now
nadir 17 OCT a las 1:13 p. m. 
oh wait do animated background work or not?
nadir 17 OCT a las 1:08 p. m. 
doesn't work for me, im using the featured artwork one and the width is 630 and i also pasted the code but it still doesn't work
Anekii 14 OCT a las 11:19 a. m. 
@EmiLater Think it's only possible as a Workshop Showcase, but aint nobody got time for a massive Title Box saying Workshop Showcase
EmiLater 14 OCT a las 10:37 a. m. 
Yeah looks like they broke the 5 vertical strips now :(
Anekii 10 OCT a las 1:15 a. m. 
The 5 vertical artwork strips no longer work.
I N F I N I T Y 30 SEP a las 7:27 a. m. 
Really useful :auyay:
Latzu 24 SEP a las 8:37 p. m. 

⡞⡞
⡞⡟⡞
⡞⡞⠄⠄⠄⠄⠄⡟⡞⠄⠄⠄⡞⠄
⠄⠄⠄⠄⠄⠄⡟⡞⠄⠄⠄⠄⡞⡟⡟⠄⠄⠄⡟⡞⠄
⠄⠄⠄⠄⠄⡞⡟⡞⠄⠄⠄⠄⡞⡟⡟⠄⠄⠄⡞⡟⡞
⠄⠄⠄⠄⡞⡟⡟⠄⠄⠄⠄⠄⡞⡟⡟⡞⠄⠄⠄⡟⡟⡞
⠄⠄⠄⠄⡞⡟⡟⠄⠄⠄⡞⡞⡟⡟⡟⡞⠄⠄⠄⡟⡟⡟
⠄⠄⠄⠄⡟⡟⡟⠄⠄⠄⡞⡟⡟⡟⡟⡟⡞⡞⠄⡟⡟⡟⡞
⠄⠄⠄⡞⡟⡟⡟⡞⡞⡞⡞⡟⡟⡟⡟⡟⡟⡟⡞⡟⡟⡟⡟⡞
⠄⠄⠄⡞⡟⡟⡟⡞⡞⡟⡟⡟⡟⡟⡟⡟⡟⡞⡟⡟⡟⡟⡟⡞
⠄⠄⠄⠄⡞⡟⡟⠄⠄⡞⡟⡟⡟⡟⡟⡟⡞⠄⡞⡟⡟⡟⡞
⠄⠄⠄⠄⠄⡞⠄⠄⠄⠄⠄⠄⡞⡟⡞ ⡞⡞