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.
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:
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:
...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.
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)
Resizes the image to a width of 50 px. Keeps the proportions.
Resizes the image to a height of 80 px. Keeps the proportions.
Resizes the image to a width of 50% of the original size. Keeps the proportions.
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.
Rotates the image 45 degrees clockwise
Rotates the image 30 degrees counterclockwise
Mirrors the image vertically
Mirrors the image horizontally
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).
For this I’ll use this image as a base to make it easier to understand the concepts of the g_ modifier
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.
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.
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.
For these examples we’ll be changing our base image to this Link (from TLoZ: A Link to the Past)
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...
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).
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).
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.
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 “jpg” to “png” in the URL to do so.
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.
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
Adding text to an image also uses the “l_” since it’s technically overlaying the text over the base image.
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:
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.
Or you can use these for DVD-style subtitles.
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!
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