[En Mantenimiento] Subida de Artwork GIF / Recortar más fácil! (Captura de pantalla y soporte de altura infinita)

Asombrosa Bookmarklets hecho por Tithen-Firion para automatizar todo expositor de artwork y capturas!

Introducción

Esta guía incluye varios bookmarklets que mejoran la experiencia de subir GIFs o imágenes a su expositor de artwork.

Estos le ayudan a evitar ir a la consola o la página de carga de artwork y automatiza el recorte con https://steam.design/, pero con el apoyo de las ilustraciones de panel lateral para la altura infinita!

Estos códigos NO inyectarán malware o harán nada malicioso a su cuenta de Steam.

Mención especial ♥

Muchas gracias a Tighten-Firion por codificar estos sorprendentes bookmarklets.
Él pasó su propio tiempo para permitirnos salvar la nuestra!

También a ash por dejarme adaptar esta hermosa guía al español, si quieres consulta la guía original, da clic aquí para ver la guía original.

http://steamcommunity.com/sharedfiles/filedetails/?id=767775920

Cómo agregar Bookmarklets en Chrome

Todos los scripts de esta guía son fáciles de agregar al Bookmarklets. Así es cómo podemos agregarlos:

Preparación:

• Haga clic derecho en la barra de marcadores y haga clic en añadir página.
  

• Cualquier navegador con marcadores (excepto Internet Explorer o Microsoft Edge) funcionará (cambiando la dirección URL de cualquier marcador pre-hecho), pero este tutorial es específicamente para Chrome.

Paso 1.

Haga clic derecho en la barra de marcadores y haga clic en añadir página.

Paso 2.

Establezca el nombre en el que usted quiera y pegue el código del bookmarklet en la barra de URL.

Paso 3.

Guarda el marcador y el bookmarklet ya estará instalado.

Steam Showcase Uploader

Este Bookmarklet permite mucho más fácil cargar una infinita altura de artwork / capturas de pantalla en la página de perfil de edición con un rápido método de arrastrar y soltar o elegir el archivo.

Consejo - Haga doble clic en el cuadro con el código para seleccionar todo lo que luego copiar y pegar. (No funciona haciéndolo desde 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})})})();

Cómo utilizar el Steam Showcase Uploader

Cómo utilizar:

Preparación:

• Si desea un artwork con una altura infinita asegúrese de que el ancho del artwork sea de 506px para el centro y 100px para los paneles laterales.
  
• Asegúrese de que su artwork esté bajo de los ~ 10MB ya que cualquier artwork más grande será rechazada. Recomendamos 4MB para tiempos de bufferización de páginas óptimas, pero depende de cuánto tiempo el gif es en sí.
  
• Espera que las capturas de pantalla subidas (con este bookmarklet) no tengan una miniatura y aparezcan en negro en la página de captura de pantalla, pero funcionarán en el expositor.

Paso 1.

Vaya a su perfil en un navegador con el bookmarklet ya listo.

Paso 2.

Clic en el bookmarklet.

Paso 3. (método 1)

Arrastre y suelte su GIF o Imagen en un expositor de artwork o de capturas.

o

Paso 3 (método 2)

Haga clic en un expositor de pantalla o artwork y seleccione su GIF o imagen.

Paso 4.

Ingrese el título de su artwork y pulse Aceptar y automáticamente se subirá su artwork y luego se ajustará a su expositor exactamente donde eligió.

Steam Background Cropper

La pagina https://steam.design/ apoya el recorte de la imagen del panel lateral largo ahora para que no necesite este bookmarklet. También puede hacer una alternativa para no hacer tanto rollo.

Consejo - Haga doble clic en el cuadro con el código para seleccionar todo, luego copiar y pegar. (No funciona haciendolo desde steam)

javascript:(function(){function%20a(a){var%20b=document.createElement("script");b.onload=function(){++d},b.src=a,document.body.appendChild(b)}function%20b(){2==d&&(window.clearInterval(e),c())}function%20c(){var%20a,b,c=document.createElement("canvas"),d=new%20JSZip,e=new%20Image,f=c.getContext("2d"),g=function(a,b,d,g){c.width=d,c.height=g,f.drawImage(e,a,b,d,g,0,0,d,g);var%20h=c.toDataURL("image/png");return%20h.substr(h.indexOf(",")+1)},h=function(a,b,c,e,f){d.file(a,g(b,c,e,f),{base64:!0})},i=function(){d.generateAsync({type:"blob"}).then(function(a){saveAs(a,"Steam-cropped-background.zip")})},j=function(){h(l+"avatar.png",b-461,34,164,164),h(l+"artwork_big.png",b-452,271,506,a-271),h(l+"artwork_small.png",b+62,271,100,a-271),i()},k=window.location.pathname.split("/"),l=k.length>1?k[k.length-2]+"_":"";e.onload=function(){b=Math.ceil(this.naturalWidth/2),a=this.naturalHeight,j()},e.src=document.location.href}window.location.host.indexOf("akamaihd.net")>-1&&(alert("try%20again%20now"),window.location="http://cdn.akamai.steamstatic.com"+window.location.pathname.replace("economy/profilebackground","steamcommunity/public/images")),/steamcommunity[.]com[/](id|profiles)[/][^/]+/.test(window.location.href)&&(alert("Redirecting%20to%20background%20url,%20try%20again%20now."),window.location=document.querySelector("div.profile_page.has_profile_background").style.backgroundImage.match(/http[^"',)]+/i)[0]),a("https://cdn.rawgit.com/Stuk/jszip/master/dist/jszip.min.js"),a("https://cdn.rawgit.com/eligrey/FileSaver.js/master/FileSaver.min.js");var%20d=0,e=window.setInterval(b,50)})();

Cómo utilizar Steam Background Cropper

Preparación:

• Use el mercado de la comunidad para buscar dicho fondo para recortar.

Paso 1.

En la página con su fondo de steam en el mercado de la comunidad, haga clic en Ver tamaño completo.

Paso 2.

Haga clic en el bookmarklet y se descargará un archivo de compresión ZIP. Este ZIP contiene el fondo recortado y listo para su expositor de artwork.

Fijador de selector de artwork largos

Este bookmarklet corrige el problema de que los artwork largos se cargan apareciendo ser una línea en la página de artwork o el selector del expositor. Este es un bookmarklet más fácil de vida que se activa cuando se ve el artwork sólo una línea.

Consejo - Haga doble clic en el cuadro con el código para seleccionar todo, luego copiar y pegar. (No funciona haciendolo desde steam)

javascript:(function(){var%20a=document.createElement("style");a.innerHTML=".publishedfi
le_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))})})();

Notas

Si quieres saber cómo funciona (necesitas saber JavaScript), echa un vistazo a las versiones completas de los bookmarklets:

• Steam Showcase Uploader.[gist.github.com]
  
• Steam Background Cropper.[gist.github.com]
  
• Fijador de selector de artwork largos.[gist.github.com]

Créditos debidos

• Tithen-Firion por codificar todos los bookmarklets.
  
• MightyG3 Por su exploit y asistencia codificando los bookmarklets.
  
• ash por crear la guía y dejarme adaptarla al español.

Eta guia esta autorizada por ash para esta adaptación al español.

[💙 Regular Student 💙]

se puede superar la altura que da steam desing (928 pixeles)?????

[where is my case]

Hola, una pregunta ya no funciona?

[Zzzero]

english version

[Dekomori ||| ADO 享楽的]

@Sidirion, en el lugar que quieres que el espacio quede vacio tienes que seleccionar una imagen ya utilizada, por ejemplo, si pones una en el medio y la quieres poner devuelta en un de la derecha,la imagen actaul de la derecha desaaprecera
espero se entienda xD

[Dekomori ||| ADO 享楽的]

thx, una delicia de guia

[> One 999]

@✪ ｈｏｔｔ Básicamente aprende del diccionario, las leguas españolas y las maneras de adaptación y traducción, esta guía esta adaptada al español ibérico conservado los mismos comando del ingles, steam maneja por determinado el lenguaje castellano y el ingles de los comandos, y ademas si estuviese utilizando el "traductor" esta guía no tendría algún sentido para la comunidad, por lo que veo de tu aspecto de tu perfil y tus palabras altisonante y soez, por favor mantén la cordura y expresa tu odio a otra parte pero no en esta guía, hacerlas no es fácil y si tengo errores y no los ando tapando como la cría que soy, si estarás así tendré que borrar tus comentarios, gracias.

[jarockk]

wea mal traducida, una mierda

[Sidrion]

como puedo hacer para quitar imagenes de mi artwork showcase porque quiero quitar unas imágenes cuadradas de los costados para poner una sola rectangular gracias

[Artacanox]

Los felicito sigan asi

[Break Bosster]

Al momento de colocar el "URL" en el bookmark pero no me deja guardar este D: