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>

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

fit:crop,resize=align:faces

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

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

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

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;,                                 
                                   .                        :;;;;;;,              ..                                   
                                                           .;;;;;,                                                     
                                                           :;;;,                                                       
                                                          .;:,                                                         
                                                           .                               

English

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:

Before:

קרדיט לתמונה: Pixabay

The platform that we'll be using

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.

How to use Filestack's service?

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.

Resizes

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?

Borders

There are some border parameters:

• circle
• torn_edges
• shadow
• polaroid
• vignette

Let'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

Filters

Some are available too:

• monochrome
• sepia
• sharpen
• blur
• oilpaint
• blackwhite

And 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

URL Screenshot

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

Image to ASCII

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! :)