Steam

Steam

1,873 평점
[Outdated] Artwork GIF Uploading/Cropping made Easier! (Bookmarklets)
my sprite like easter pink 님과 1명의 기여자가 작성
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:
Credits Due
  • Tithen-Firion for coding all of the bookmarklets
  • MightyG3 for his exploit and assistance coding the bookmarklets
  • ash for making this guide
댓글 132
my sprite like easter pink  [작성자] 2021년 9월 11일 오전 8시 57분 
@𝓑𝓵𝓾𝓮𝓫𝓲𝓻𝓭 this is not updated anymore
Valeriya 2021년 9월 7일 오전 9시 33분 
to much complicated, chrome give error.
Cale 2018년 5월 12일 오전 12시 39분 
Great guide man!
Kiz0 2018년 2월 23일 오전 8시 25분 
a shortcut to bokmark is ctrl D
bugc #freeBugC 2018년 1월 9일 오전 12시 07분 
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 2017년 12월 28일 오후 9시 41분 
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 2017년 10월 4일 오전 4시 26분 
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 2017년 9월 5일 오전 7시 20분 
Steam showcase uploader doesn't work for me
CharlesBaa_ 2017년 9월 1일 오전 6시 47분 
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://steamproxy.net/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."
out of bounds 2017년 9월 1일 오전 12시 32분 
Script isn't working?