Kinja Image Tricks - Reference Page

/w_800/bo_5px_solid_black,l_text:Impact_60_stroke:Kinja%0AImage%20%0A%20Tricks,co_white,g_center,x_100/rosy5ymjpptbzn0xtvzs.jpg
Photo: Peakpx

In this article I’ll summarize all that I’ve written about the Kinja Image Tricks, for reference.


Kinja uses an Image Management service that is capable of doing URL-based transformations on the images it uses, so, we can use that feature to easily transform these, without having to manually download them, edit them, and upload them again.

Advertisement

The Basics

The base of all transformations is the image URL (the one that you get when right-clicking and selecting “Open image in a new tab”), where at the end, it includes a series of random numbers and letters that we’ll call the ImageID, which identifies that specific image uploaded to Kinja:

“https://i.kinja-img.com/gawker-media/image/upload/rosy5ymjpptbzn0xtvzs.jpg”

Original size:303 x 167

Our modifications will be located between the “upload” and the ImageID, s, always separated from these with a slash “/”.

Several modifications can be used on a base image, separating each one with their own “/”, and keeping in mind that the transformations are applied from left to right, so if we do this:

...upload/w_100/l_text:Impact_20:Kinja/w_300/rosy5ymjpptbzn0xtvzs.jpg

...we are resizing an image to a width of 100 px, then we added some text, and then we resize everything (the base image and the text) to a width of 300px.

Advertisement

For the following example list, I’ll write the parameter, an example value, and the effect to the image. The resulting example images are being reduced in size for the sake of this article’s format (except for the transformations that deal with size)

The Examples

Simple transformations

Advertisement

w_50
Resizes the image to a width of 50 px. Keeps the proportions.

Advertisement

h_200
Resizes the image to a height of 80 px. Keeps the proportions.

Advertisement

w_0.5
Resizes the image to a width of 50% of the original size. Keeps the proportions.

Advertisement

w_60,h_60
Resizes the image to a width of 60 px and a height of 60 px, forcing the resulting image to be a square, regardless of the original proportions.

Advertisement

a_45
Rotates the image 45 degrees clockwise

Advertisement

a_-30
Rotates the image 30 degrees counterclockwise

Advertisement

a_vflip
Mirrors the image vertically

Advertisement

a_hflip
Mirrors the image horizontally

Advertisement

c_pad,h_80,w_80
Resizes the image to a width and height of 80 px, but with the added c_pad, it keeps the original proportions and pads the “missing” space with solid color (it’s white, so I added an outline to this example image so it could be visible).

Position-related transformations

For this I’ll use this image as a base to make it easier to understand the concepts of the g_ modifier

Advertisement
Original Size: 256 x 224
Advertisement

c_crop,h_50,w_100
Crops the image to a width of 100px and a height of 50px, centered on... the center of the image. The proportions of the original image are kept, and the proportions of the crop “window” are independent of it.

Advertisement
g_south_east

c_crop,h_50,w_100,g_north
Same cropping as before, but defines the “initial” point for position-related transformations at the middle of the top of the original image (the “north”). Other options for g_ are g_east (right of the image), g_west (left), g_south (lower part of the image), g_north_east (top right part of the image, pictured here at the right) and the rest of the 8 cardinal directions.

Advertisement
Advertisement

c_crop,h_50,w_100,g_north,x_50,y_20
Same cropping as before, but the window is moved 50px to the right and 20px down, meaning the crop window moves “away” of the “initial” point. Using the g_south_east for another example but with the same x_ and y_ values (c_crop,w_100,h_50,g_south_east,x_50,y_20), the crop window moves 50px to the left and 20px up this time, since it’s moving “away” from the bottom-right part of the image.

Effects

Advertisement

For these examples we’ll be changing our base image to this Link (from TLoZ: A Link to the Past)

Advertisement

e_outline:outer:1
This adds an outline around (“outer”) of the entire image, with a line width of 1px. We can add a second parameter after the “1” to make the outline a little bit blurrier (“e_outline:outer:1:200”) to create a shadow of sorts. We can, however, add a better shadow with...

Advertisement

e_shadow:20,co_blue
This adds a more “natural” shadow to the image. Using the modifier co_ we can change it’s color to something other than black (but it doesn’t look better, tho).

Advertisement

e_make_transparent:10
This allows us to “remove” the background of an image, where the value (“10”) gives us a threshold over the color we are removing (in case we don’t have a very simple background color like with Link here).

Advertisement

We can better see this effect if we combine it with the e_shadow effect, since this time it will create the shadow based on Link only. Here we can see that, since link’s eyes have white on them, these are made transparent, too.

Advertisement

It is important to point out that the made-transparent image must be a PNG image to accept the transparency. You can simply change the “jpgto png” in the URL to do so.

Advertisement

e_blur:200
This simply blurs the image. The range is from 1 to 2000, where small images will require a smaller number than a bigger image to get the same blurred look.

Overlays

Advertisement

We’ll be using the Hyrule map image(bc4j7hhq4jhx0tnyvrtq) as a base and the transparent Link (xgmz5fjsqmotsforgloc) as the overlaid image.

Simply add “l_”+the ImageID of the overlaid image

https://i.kinja-img.com/gawker-media/image/upload/l_xgmz5fjsqmotsforgloc/bc4j7hhq4jhx0tnyvrtq.png

Advertisement

Text

Adding text to an image also uses the “l_” since it’s technically overlaying the text over the base image.

Advertisement

l_text:Arial_20:Example
The most basic text requires a Font Name (Arial) and Size (20), and the text to write (“Example”). This defaults the overlay to a XYCentered, black text, but it can be modified with the position-modifiers we already know:

Advertisement

bo_5px_solid_black,l_text:Impact_60_stroke:EXAMPLE,co_white,g_south,y_10
These parameters can be used to create a Image Macro Meme-like image. The size (60) will need to be changed to fit better a different-sized image.

Advertisement

bo_3px_solid_black,l_text:Arial_17_italic_stroke:[Byes%20in%20Spanish],co_yellow,g_south,y_10
Or you can use these for DVD-style subtitles.

Advertisement

Except spaces (these are converted automatically), since the text you’ll be placing in the image is encoded in the URL, some characters won’t be allowed when using this transformation (like “/” or “?” or an “Enter/line feed” for multi-line text), so for these you’ll need to pre-encode these characters by yourself with the w3schools HTML URL Encode reference... for reference.


*Phew!* That was longer than I expected. There are a lot more transformations available at Cloudinary’s Reference Site (the name of the Image Management service Kinja uses) so you can check that, too!

Advertisement

Also, I’ve been using these transformations in several of the images of my other  Sixtay Days of Writting Challenge posts, and documenting the transformations in their captions, in case you want more examples.


This post is part of the Sixtay Days of Writting Challenge. Post Count: 30+13

Share This Story