Counter-Strike 2

Counter-Strike 2

377 ratings
Облегченная работа с дизайном профиля [Перевод]
By tElore and 1 collaborators
Удивительные букмарклеты от Tithen-Firion, чтобы облегчить работу с витринами Steam профиля.
   
Award
Favorite
Favorited
Unfavorite
Введение

Это руководство включает в себя несколько букмарклетов, которые повышают удобство работы с загрузкой в формате GIF или изображений для вашей витрины.

Это поможет вам в работе, перейдя на страницу консоли и загрузкой работ и автоматизирует кадрирование как https://steam.design/ но с поддержкой GIF произведений до бесконечной высоты!

Эти коды НЕ загрузят вредоносное ПО или какие-то другие вредоносные объекты на ваш PC.
Специальное упоминание
Оригинальное руководство на английском: ORIGINAL TUTORIAL

Большое спасибо Tithen-Firion за эти удивительные букмарклеты.
Он потратил собственное время для того что бы сохранить наше.
Как добавить Букмарклеты в браузер Chrome
Все скрипты в данном руководстве используют легко добавляемые Букмарклеты. Вот как добавить их:

Preparation:

Убедитесь что панель закладок видна на любой странице в любое время.
  • Этот туториал сделан специально для Google Chrome.


    Шаг 1
    Щелкните правой кнопкой панель закладок и нажмите кнопку Добавить страницу.

    Шаг 2
    Установить любое имя, и ставить код в строку URL.

    Шаг 3
    Сохранить закладку и букмарклет установлен.
Steam Showcase загрузчик.
Этот букмарклет облегчает работу с вашими работами, возможно быстрого перетаскивания работ.

Для копирования нажмите на код 2 раза левой кнопкой мыши. (Не работает в 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})})})();
Как использовать Steam Showcase Uploader.
Как использовать:

Приготовление:
  • Если вы хотите, артворк с бесконечной высотой убедитесь, что ширина артворка является либо 506px для центра и 100px для боковых панелей.
  • Убедитесь, что ваша работа весит около ~ 10 МБ. Мы рекомендуем 4 МБ для оптимальной буферизации страницы, но это зависит от того, как долго идет GIF.
  • Ожидать Загруженные скриншоты (с этим букмарклет) которые не имеют миниатюру и выглядят черными на вашей странице, но он будет работать на витрине.

    Шаг 1

    Идите на страницу редактирования своей страницы и подготовьте страницу закладок.

    Шаг 2
    Нажмите на закладку.

    Шаг 3
    Перенесите свой артворк, GIF или картинку в окно.

    или

    Шаг 3.1
    Кликните на место артворка и выберите вашу работу.

    Шаг 4
    Введите название вашего изображения и нажмите кнопку OK, и автоматически ваша работа будет загружена затем установлена на вашей витрине, где именно вы выбрали.
Быстрая обрезка фона STEAM
Хотя все мы знаем сайт https://steam.design/, но иногда у него случаются баги, и вы не можете скачать архив с обрезанными фонами. Этот букмарклет вам поможет.

Код для копирования.
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)})();
Как использовать Steam Background Cropper.
Подготовка.

  • Страница в Steam-магазине с фоном который вы хотите обрезать.

    Шаг 1.
    На странице вашего фона нажимаем кнопку "Просмотр в полном размере"

    Шаг 2.
    Нажимаем на закладку и скачиваем zip-архив. Все файлы порезаны и готовы к работе.
Фиксер длинных картин (?)
Этот букмарклет устраняет проблему длинных картин.


Код для копирования
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))})})();
Заметки
Если вы хотите знать как работают эти букмарклеты можете посмотреть их полные версии на GitHub.
Благодарности
  • Tithen-Firion за создание букмарклетов.
  • MightyG3 за эксплойты и помощь в создании букмарклетов.
  • ash за создание гайда.

Помощь в переводе и не только
Не откажусь от помощи в дополнительном переводе этого гайда, а так же других гайдов по возможности.

Переводчики:

Помощь по различным вопросам:
19 Comments
VITOLF🐺 29 Oct, 2017 @ 8:45am 
Автор, походу руководство крашнулось, ссылка не работает больше, там ближе к концу вместо текста "ссылка удалена". Может переделать чтобы была ссылка на документ или чето такое
YUYAO 26 Jul, 2017 @ 5:26am 
"но с поддержкой GIF произведений панели боковой до бесконечной высоты!"
Перевод aliexpress edition :D Нужно корректировать перевод. Могу помочь, если напишешь. :)
L1ke a Bomb 22 Jul, 2017 @ 2:40am 
А как сделать что-бы скрипт для нарезки фонов резал не на 2 картинки а на несколько т.к. когда устанавливаешь 2 картинки получается бред какой то .
Kermito 15 Jun, 2017 @ 1:12pm 
фиксер длинных картин не робит.
Akito 23 Jan, 2017 @ 8:05am 
Кстати говоря, я тут кое-что заметил, касательно витрины иллюстарций. При загрузке изображения в данную витрину (через этот метод загрузки) и открытия его через саму витрину в профиле, имеется некий пробел в виде темного фона над иллюстарцией. Примерно 4 см в высоту. Очень схожая ситуация как при рассмотре иллюстарций и скриншотов через вкладки в профиле. С витриной скриншотов такого не наблюдается. У всех так? И по возможности, постарайтесь мне объяснить с чем это связано. За ранее благодарю. :IrisHeartRebirth3:
Akito 23 Jan, 2017 @ 7:52am 
Идеальное руководство для тех кто хочет себе (высокие, длинные... называйте как хотите) витрины иллюстраций и скриншотов. Благо я хорошо знаю английский, так что проблем в освоении оригинального руководства не было. Но сам факт того, что кто-то решился взяться за перевод этого руководства радует. :yumiko_lg: Пользователям не владеющим знаниями английского, данное руководство очень хорошо поможет. :sleepyjill:
tElore  [author] 9 Jan, 2017 @ 3:48am 
Возможно, но теперь я знаю смысл данного слова :3. Благодарствую.