[Outdated] Artwork GIF Uploading/Cropping made Easier! (Bookmarklets)

Amazing bookmarklets by Tithen-Firion to automate everything artwork & screenshot showcases!

Introduction

This guide includes multiple bookmarklets which improves the experience uploading GIFs or images to your artwork showcase.

These help you avoid going to the console or artwork uploading page and automates cropping like https://steam.design/ but with side panel artworks support for infinite height!

These codes will NOT inject malware or do anything to malicious to your steam account.

Special Mention

Special thanks to Tithen-Firion for coding these amazing bookmarklets.
He spent his own time to allow us save our own!

Update: Tithen-Firion is no longer with us has left as a guide collaborator. He's done amazing work contributing into both of our guides and has helped many people. However he silently moved on without notice and we wish him the best of luck in the future.

This also means we cannot support this guide as well since he is not around to update it... so if multiple people confirm it does not work anymore we will see what we can do.

How to add Bookmarklets on Chrome

All scripts in this guide use easy to add Bookmarklets. Here is how to add them:

Preparation:

• Make sure the bookmark bar is visible on any page at all times.
  

• Any browser with bookmarks (except for Internet Explorer or Microsoft Edge) will work (by changing the URL of any pre-made bookmark) but this tutorial is specifically for Chrome.

Step 1.

Right click your bookmark bar and click add page.

Step 2.

Set the name to anything you like and paste the bookmarklet code next to URL. (This code is down below)

Step 3.

Save the bookmark and the bookmarklet is installed.

Long Artwork Selector Fixer

This bookmarklet fixes the issue that long artworks are uploaded appear to be a line in the artwork page or showcase selector. This is a more optional 'ease-of-life' bookmarklet you activate when you see artworks appear to be only one line.

Tip - Double click in the box with the code to select all of it then copy and paste. (Does not work on steam)

javascript:(function(){var%20a=document.createElement("style");a.innerHTML=".publishedfile_popup_screenshot,.publishedfile_popup_screenshot>img,.profile_media_item,.imgWallItem{min-height:100px}",document.head.appendChild(a),[].forEach.call(document.getElementsByTagName("iframe"),function(e){e.contentDocument.head.appendChild(a.cloneNode(true))})})();

Steam Showcase Uploader

This Bookmarklet allows for much easier uploading infinite of height artworks/screenshots on the edit profile page with a quick drag and drop or choosing the file.

Tip - Double click in the box with the code to select all of it then copy and paste. (Does not work on steam)

javascript:(function(){function%20a(a){if(!a.firstElementChild.hasAttribute("data-initiated")){a.firstElementChild.setAttribute("data-initiated",1);var%20b=a.getAttribute("data-eshowcasetype");[].forEach.call(a.querySelectorAll(".screenshot_showcase_primary,%20.screenshot_showcase_smallscreenshot.showcase_slot"),function(a){a.setAttribute("data-eshowcasetype",b),0==a.clientHeight&&(a.style.minHeight="300px"),a.addEventListener("click",c,!0),a.addEventListener("dragover",d,!0),a.addEventListener("dragleave",e,!1),a.addEventListener("drop",e,!0),a.classList.contains("openslot")||a.classList.add("not-open")})}}function%20b(b,c){var%20d=b[0].target;a(d)}function%20c(a){a.preventDefault(),a.stopPropagation(),k.parentNode&&k.parentNode.removeChild(k),k.target=this,k.click()}function%20d(a){k.parentNode!==this&&(k.target=this,this.insertBefore(k,this.firstChild)),this.classList.add("dragover")}function%20e(a){this.classList.remove("dragover")}function%20f(){this.parentNode&&this.parentNode.removeChild(this);var%20a=this.cloneNode(!0);a.files=this.files;var%20b=this.target.getAttribute("data-eshowcasetype"),c=JSON.parse(this.target.getAttribute("data-slotjson")),d=c.slot;if(a.files&&a.files[0]){var%20e=a.files[0],f=e.name.lastIndexOf("."),h=e.name.substring(f+1).toLowerCase();if(["jpg","png","gif","jpeg"].indexOf(h)<0)return%20void%20alert("You%20can%20only%20upload%20JPG,%20PNG%20and%20GIF%20files.");if(e.size>10485760)return%20void%20alert("You%20can%20only%20upload%20files%20less%20than%2010%20MB%20in%20file%20size.");g(d,b,a,f)}else%20alert("No%20file%20selected.")}function%20g(a,b,c,d){var%20e=c.files[0],f=new%20FileReader;f.addEventListener("load",function(){var%20g=new%20Image;g.addEventListener("load",function(){window.clearTimeout(i);var%20f=g.width,j=g.height,k=window.prompt("Enter%20title",e.name.substring(0,d)),l=window.open("/sharedfiles/edititem/767/3/","","width=,height=,resizable=no");l?(l.resizeTo(0,0),l.onload=function(){h(l,k,a,b,c,f,j)}):alert("Allow%20popups%20first!")});var%20i=window.setTimeout(function(){alert("That's%20not%20an%20image!")},500);g.src=f.result}),f.readAsDataURL(e)}function%20h(a,b,c,d,e,f,g){a.document.body.appendChild(l);var%20h=a.document.getElementsByName("file")[0];h.parentNode.replaceChild(e,h);var%20j={13:3,7:5}[d];a.document.getElementsByName("title")[0].value=b,a.document.getElementsByName("agree_terms")[0].checked=!0,0==c&&506==f&&g>506||c>0&&c<4&&100==f&&g>80?(a.document.getElementsByName("image_width")[0].value=1e3,a.document.getElementsByName("image_height")[0].value=1):(a.document.getElementsByName("image_width")[0].value=f,a.document.getElementsByName("image_height")[0].value=g),a.document.getElementsByName("file_type")[0].value=j,a.document.getElementsByName("cloudfilenameprefix")[0].value=Math.trunc(Date.now()/1e3)+"_",a.document.getElementById("Visibility0").checked=!0,a.onunload=function(){function%20b(){a.location.search.indexOf("fileuploadsuccess")>-1&&(window.clearInterval(e),i(a,c,d))}var%20e=window.setInterval(b,50)},a.document.getElementById("SubmitItemForm").submit()}function%20i(a,b,c){var%20d=a.location.search;if(a.close(),d.indexOf("id=")==-1)return%20alert("Some%20error%20occured.%20Post%20your%20browser,%20file%20you%20wanted%20to%20upload%20and%20code%20below%20to%20author%20of%20this%20script.\n"+d),void%20a.close();var%20e=d.match(/id=(\d+)/)[1];j.push({scType:c,slot:b,id:e,running:!1})}window.setInterval(function(){if(j.length){var%20a=j[0];if(a.running){var%20b='div[data-eshowcasetype="'+a.scType+'"]%20.screenshot_showcase_'+(0==a.slot?"primary":"smallscreenshot:nth-child("+a.slot+")"),c=JSON.parse(document.querySelector(b).getAttribute("data-slotjson"));c.publishedfileid==a.id&&j.shift()}else%20a.running=!0,PreviewShowcaseConfigWithSlotChange(a.scType,a.slot,{publishedfileid:a.id})}},200);var%20j=[];window.setTimeout(function(){var%20a=window.open("/?CLOSE_ME","","width=300,height=");a?a.close():alert("Allow%20popups!")},1);var%20k=document.createElement("input");k.type="file",k.name="file",k.style.opacity=0,k.style.position="absolute",k.style.width="100%",k.style.height="100%",k.style.zIndex="9999",k.style.top=0,k.style.left=0,k.setAttribute("multiple",""),k.addEventListener("change",f,!1);var%20l=document.createElement("div");l.style.position="fixed",l.style.top=0,l.style.left=0,l.style.width="100%",l.style.height="100%",l.style.background="black%20url('http://steamcommunity-a.akamaihd.net/public/images/login/throbber.gif')%20center%20no-repeat",l.style.zIndex=9999999;var%20m=document.createElement("style");m.innerHTML=".not-open:hover,.dragover{border-color:#FFFFFF%20!important}.not-open{border:2px%20dashed%20#5491CF;border-radius:5px;margin:-2px}.not-open.screenshot_showcase_smallscreenshot{margin-bottom:9px}",document.head.appendChild(m),[].forEach.call(document.querySelectorAll("#showcase_preview_13,%20#showcase_preview_7"),function(c){a(c);var%20d=new%20MutationObserver(b);d.observe(c,{childList:!0})})})();

How to use the Steam Showcase Uploader

How to use:

Preparation:

• If you want artworks with infinite height make sure the artwork's width is either 506px for the centre and 100px for the side panels.
  
• Make sure your artwork is under ~10 MB as any artworks bigger will be rejected. We recommend 4 MB for optimum page buffering times but it depends on how long the gif is itself.
  
• Expect uploaded screenshots (with this bookmarklet) to have no thumbnail and appear black on your screenshot page but will work on the showcase.

Step 1.

Go to your edit profile page on a browser with the bookmarklet ready

Step 2.

Click on the bookmarklet

Step 3.

Drag n drop your GIF or Image onto an outlined artwork or screenshot showcase

or

Step 3.

Click on an outlined artwork or screenshot showcase and select your GIF or image

Step 4.

Enter the title of your artwork and hit OK and automatically your artwork will be uploaded then set to your showcase exactly where you chose.

Notes

If you want to know how it works (you need to know JavaScript), take a look at full versions of those bookmarklets:

• Steam Showcase Uploader[gist.github.com]
  
• Steam Background Cropper[gist.github.com]
  
• Long Artwork Selector Fixer[gist.github.com]

Credits Due

• Tithen-Firion for coding all of the bookmarklets
  
• MightyG3 for his exploit and assistance coding the bookmarklets
  
• ash for making this guide

Other Languages

Russian
http://steamcommunity.com/sharedfiles/filedetails/?id=814444712
Spanish
http://steamcommunity.com/sharedfiles/filedetails/?id=821822786

[:3]

@𝓑𝓵𝓾𝓮𝓫𝓲𝓻𝓭 this is not updated anymore

[Valeriya]

to much complicated, chrome give error.

[Cale]

Great guide man!

[Kiz0]

a shortcut to bokmark is ctrl D

[bͫuͬgc]

Also want to know as with @Thorcsf.
Maybe I overlooked him mentioning it

Even so, this is [outdated].
It would be great to link to an updated.

[Thorcsf]

I do not understand where I have to use the Long-Artwork-Selector-Fixer script. I understand that I have to bookmark it, but where do I use it? In which page?

[Ego]

Okay, for anyone coming here - the showcase uploader script is still broken.

However, you can upload your animated Showcase with the help of Tampermonkey & the long file upload script (I am pretty sure it's mentioned how that wokrs in another sub-section off guide that brought you here.


Most importantly, the script that fixes the preview of the long image is still working for me, so you may wanna use that.

[Wolterhon]

Steam showcase uploader doesn't work for me

[CharlesBaa_]

Script is also not working for me. Here's what appears in console. Hope you can make sense of it.

"Mixed Content: The page at 'https://steamcommunity.com/id/Charles_Barkley_/images/' was loaded over HTTPS, but requested an insecure image 'http://cloud-3.steamusercontent.com/ugc/843718112879286105/5F347056C8847E174E00F3D024E90C46A5A9305D/?interpolation=lanczos-none&output-format=jpeg&output-quality=95&fit=inside|640:1174&composite-to%3D%2A%2C%2A%7C640%3A1174&background-color=black' . This content should also be served over HTTPS."

[And you don't seem to understand]

Script isn't working?