This is a tutorial on how to edit uploaded pictures on the fly using URL parameters!
English follows Hebrew!
בפוסט הזה אתן לכם טיפ ענק שיחסוך לכם זמן וגם ישפר את איכות הפוסט שלכם פלאים במידה ואתם מעלים תמונות לפוסט שלכם (מה שבכלל מאוד מומלץ כדי למשוך קוראים). ואראה איך ניתן לערוך תמונות כדי לקבל תוצאה מקצועית ומגניבה במהירות
קרדיט לתמונה: Pixabay
השירות נקרא Filestack והוא נותן לנו אופציה לערוך 500 תמונות בחודש בחינם לגמרי! ההרשמה אליו פשוטה וניתן להשלים אותה תוך התחברות לפייסבוק או גוגל, לעצלנים מבניכם.
לאחר שנרשמתם, הכנסו אל הDashboard ותראו טבלה, בה יש API Key שמרו אותו, אנחנו עוד נצטרך אותו.
בגדול השימוש הוא נורא פשוט. לפני כתובת התמונה שלנו, נוסיף
https://process.filestackapi.com/<APIKEY>/<PARAMETERS>/<IMAGE_URL>
ניתן לשנות את הגודל באמצעות הפרמטר resize.
נראה את האופציות ששינוי הגודל מאפשר. לצורך ההדגמה כתובת התמונה שנשתמש בה תהיה:
https://cdn.pixabay.com/photo/2018/01/04/06/44/snow-3059974_960_720.jpg
https://process.filestackapi.com/myFaKeApIKeY123/resize=h:100,w:200/https://cdn.pixabay.com/photo/2018/01/04/06/44/snow-3059974_960_720.jpg
יכולת נוספת של פרמטר resize היא ליישר את התמונה, לימין, לשמאל או אפילו לפי פרצופים!
האופציה תכתב כך:
fit:crop,resize=align:faces
סוגי היישור האפשריים הם center, right, left או faces
נראה דוגמה עבור התמונה הבאה:
קרדיט: Pixabay
https://process.filestackapi.com/myFaKeApIKeY123/resize=w:100,h:500,fit:crop,align:faces/https://cdn.pixabay.com/photo/2018/01/04/14/16/woman-3060784_960_720.jpg
ישנן כמה סוגי מסגרות שניתן לתת כפרמטרים.
circle - מחזירה מסגרת מעוגלתtorn_edges - שוליים קרועים, כמו תמונה מהעברshadow - מחזירה תמונה עם צל על הרקע הגורם להבלטהpolaroid - רקע המדמה תמונה שצולמה במצלמת פולארוידvignette - טשטוש הקצוותדוגמאות:
https://process.filestackapi.com/MyFakeApiKey/polaroid/https://cdn.pixabay.com/photo/2018/01/04/14/16/woman-3060784_960_720.jpg
https://process.filestackapi.com/MyFakeApiKey/circle/shadow/https://cdn.pixabay.com/photo/2018/01/04/06/44/snow-3059974_960_720.jpg
הפילטרים האפשריים הם:
monochromesepiasharpenbluroilpaintblackwhitehttps://process.filestackapi.com/MyFakeApiKey/sepia/https://cdn.pixabay.com/photo/2018/01/04/06/44/snow-3059974_960_720.jpg
https://process.filestackapi.com/MyFakeApiKey/oil_paint/https://cdn.pixabay.com/photo/2018/01/04/06/44/snow-3059974_960_720.jpg
עצלנים? אין בעיה. ככה תעשו את זה
https://process.filestackapi.com/MyFakeApiKey/urlscreenshot/resize=h:500,w:1000,fit:crop,a:top/http://www.busy.org
עוד יכולת מגניבה היא המרת תמונה לטקסט!
בואו נראה.
https://process.filestackapi.com/MyFakeApiKey//ascii/https://s11.postimg.org/6fr8dafcj/steem.jpg
..
.:;,
,:;;;.
,;;;;;;.
. .:;;;;;;: .
.:11. ,;;;;;;;;: .;1i
.;1tfi :;;;;;;;;;: .ittf:
:1fttt; :;;;;;;;;;;; .;ttttt,
.ifttttt: ,;;;;;;;;;;;;. ,ttttttt.
,tttttttf; ,;;;;;;;;;;;;; :tttttttt,
.1tttttttti .;;;;;;;;;;;;;: ,ttttttttf:
,tttttttttt, :;;;;;;;;;;;;;: ;ttttttttt1.
.ttttttttttt. .;;;;;;;;;;;;;;, :tttttttttti
;fttttttttt1. :;;;;;;;;;;;;;;, 1tttttttttf;
1tttttttttt1. :;;;;;;;;;;;;;;, ,ttttttttttt;
,ttttttttttt1 .;;;;;;;;;;;;;;;, ;ttttttttttt;
:ttttttttttt1 .;;;;;;;;;;;;;;;, ittttttttttt;
;ftttttttttti ,;;;;;;;;;;;;;;;, 1ttttttttttt:
;ftttttttttti ,;;;;;;;;;;;;;;;, .1ttttttttttt:
iftttttttttti ,;;;;;;;;;;;;;;;, .1ttttttttttt:
ittttttttttf; ,;;;;;;;;;;;;;;;. .tttttttttttt,
iftttttttttf; ,;;;;;;;;;;;;;;;. .tttttttttttt,
iftttttttttt: ,;;;;;;;;;;;;;;;. .ttttttttttt1.
ittttttttttt. ,;;;;;;;;;;;;;;: ,ttttttttttti
1tttttttttt1 :;;;;;;;;;;;;;;: ,ttttttttttf:
.1tttttttttt: :;;;;;;;;;;;;;;. ,ttttttttttt.
.tttttttttti :;;;;;;;;;;;;;; :tttttttttt:
:ttttttttf; :;;;;;;;;;;;;;, 1ttttttttt,
.tttttttfi .;;;;;;;;;;;;;: :fttttttt:
.ttttttt: ,;;;;;;;;;;;;: :fttttf1,
:ftttti. ;;;;;;;;;;;: ittttt;
1ttt1: :;;;;;;;;;: ,tttti.
:ft1: ;;;;;;;;;, 1fti,
.1i: .;;;;;;;:. :t;,
. :;;;;;;, ..
.;;;;;,
:;;;,
.;:,
.
In this post, you'll learn how to kick-ass by editing pictures by only changing their URLs, on the fly! I promise this will be fast and easy and a nice thing to pump up your posts. Let's see a before and after photos:
קרדיט לתמונה: Pixabay
So we'll be using Filestack to do our on-the-fly editing. They offer 500 FREE image transformations just by signing up. You can sign up using Google or Slack if you're too lazy. Once you're in, go to the Dashboard and keep your API key. We'll be using it soon enough.
It's easy! You'll just have to use this type of URL:
https://process.filestackapi.com/<APIKEY>/<PARAMETERS>/<IMAGE_URL>
I'll demonstrate some practical examples when I cover some parameters so it'll be clearer.
The most trivial transformation you'll do for a picture would be to change it's dimension. It's done via the resize parameter which takes options such as height and width.
Let's see a live example:
https://process.filestackapi.com/myFaKeApIKeY123/resize=h:100,w:200/https://cdn.pixabay.com/photo/2018/01/04/06/44/snow-3059974_960_720.jpg
the h:100,w:200 stand for the height and width.
We can also resize to a cropped version of the photo and align it as we wish. It's very useful feature!
https://process.filestackapi.com/myFaKeApIKeY123/resize=w:100,h:500,fit:crop,align:faces/https://cdn.pixabay.com/photo/2018/01/04/14/16/woman-3060784_960_720.jpg
The align option takes also left, top, right, bottom or center and can be combined like this [top, right]
Cool, eh?
There are some border parameters:
circletorn_edgesshadowpolaroidvignetteLet's see them in action:
https://process.filestackapi.com/MyFakeApiKey/polaroid/https://cdn.pixabay.com/photo/2018/01/04/14/16/woman-3060784_960_720.jpg
https://process.filestackapi.com/MyFakeApiKey/circle/shadow/https://cdn.pixabay.com/photo/2018/01/04/06/44/snow-3059974_960_720.jpg
Some are available too:
monochromesepiasharpenbluroilpaintblackwhiteAnd some in live action:
https://process.filestackapi.com/MyFakeApiKey/sepia/https://cdn.pixabay.com/photo/2018/01/04/06/44/snow-3059974_960_720.jpg
https://process.filestackapi.com/MyFakeApiKey/oil_paint/https://cdn.pixabay.com/photo/2018/01/04/06/44/snow-3059974_960_720.jpg
Are you lazy enough? No probs.
https://process.filestackapi.com/MyFakeApiKey/urlscreenshot/resize=h:500,w:1000,fit:crop,a:top/http://www.busy.org
Always wanted to generate some cyber?
https://process.filestackapi.com/MyFakeApiKey//ascii/https://s11.postimg.org/6fr8dafcj/steem.jpg
..
.:;,
,:;;;.
,;;;;;;.
. .:;;;;;;: .
.:11. ,;;;;;;;;: .;1i
.;1tfi :;;;;;;;;;: .ittf:
:1fttt; :;;;;;;;;;;; .;ttttt,
.ifttttt: ,;;;;;;;;;;;;. ,ttttttt.
,tttttttf; ,;;;;;;;;;;;;; :tttttttt,
.1tttttttti .;;;;;;;;;;;;;: ,ttttttttf:
,tttttttttt, :;;;;;;;;;;;;;: ;ttttttttt1.
.ttttttttttt. .;;;;;;;;;;;;;;, :tttttttttti
;fttttttttt1. :;;;;;;;;;;;;;;, 1tttttttttf;
1tttttttttt1. :;;;;;;;;;;;;;;, ,ttttttttttt;
,ttttttttttt1 .;;;;;;;;;;;;;;;, ;ttttttttttt;
:ttttttttttt1 .;;;;;;;;;;;;;;;, ittttttttttt;
;ftttttttttti ,;;;;;;;;;;;;;;;, 1ttttttttttt:
;ftttttttttti ,;;;;;;;;;;;;;;;, .1ttttttttttt:
iftttttttttti ,;;;;;;;;;;;;;;;, .1ttttttttttt:
ittttttttttf; ,;;;;;;;;;;;;;;;. .tttttttttttt,
iftttttttttf; ,;;;;;;;;;;;;;;;. .tttttttttttt,
iftttttttttt: ,;;;;;;;;;;;;;;;. .ttttttttttt1.
ittttttttttt. ,;;;;;;;;;;;;;;: ,ttttttttttti
1tttttttttt1 :;;;;;;;;;;;;;;: ,ttttttttttf:
.1tttttttttt: :;;;;;;;;;;;;;;. ,ttttttttttt.
.tttttttttti :;;;;;;;;;;;;;; :tttttttttt:
:ttttttttf; :;;;;;;;;;;;;;, 1ttttttttt,
.tttttttfi .;;;;;;;;;;;;;: :fttttttt:
.ttttttt: ,;;;;;;;;;;;;: :fttttf1,
:ftttti. ;;;;;;;;;;;: ittttt;
1ttt1: :;;;;;;;;;: ,tttti.
:ft1: ;;;;;;;;;, 1fti,
.1i: .;;;;;;;:. :t;,
. :;;;;;;, ..
.;;;;;,
:;;;,
.;:,
.
I hope you liked this tutorial! Follows and resteems are much appreciated! :)