Kinja Image Tricks: Overlay

Have you ever wanted to do a quick placeholder image for a game that you really want ported to the Nintendo Switch?

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 resize overlay two of them, without having to manually download them, edit them, and upload them!

Advertisement

As we previously saw, we first need the images to be uploaded to Kinja in order to get an ImageID. For this Overlay example, we’ll need a Base image (one with a Switch where we’ll ‘paste’ another image) and the image we want to lay over it.

For the base image, let’s use that same WindWaker image on the top:

https://i.kinja-img.com/gawker-media/image/upload/h7977ijajjzwbtgk89m0.jpg

And for the wanted game, Let’s suppose you want the world to know you would really want a DeusEx: Human Revolution Switch port, so let’s upload one screenshot to Kinja:

Kinja will always ask for this “ImageID”
Screenshot: Techspot

Right-Click and Open it in a new tab, and copy the ImageID (imijweorojjvikisn3e3 for this very specific one) from that URL.

So now, we take the URL of the base image, and add the following string between “upload” and the base ImageID:

https://i.kinja-img.com/gawker-media/image/upload/l_imijweorojjvikisn3e3/h7977ijajjzwbtgk89m0.jpg

Advertisement

Now, if you hit Enter now, you would be overlaying a 1920px wide image over a way smaller 960px Switch image, so we’ll need also to resize the game image down. I’ll save you some calculations and say that you will need a 428 by 257 size for it to fit nicely over our base Switch screen, so add “c_scale,w_428,h_257” to the URL:

https://i.kinja-img.com/gawker-media/image/upload/l_imijweorojjvikisn3e3,c_scale,w_428,h_257/h7977ijajjzwbtgk89m0.jpg

Advertisement

You surely begin to notice we can add more and more parameters (separated with a comma) to an image. With this you’ll get something like this:

Advertisement

Almost perfect! Except for the image being a little bit up. Nothing that can’t be fixed with more parameters! add y_27 after h_257:

https://i.kinja-img.com/gawker-media/image/upload/l_imijweorojjvikisn3e3,c_scale,w_428,h_257,y_27/h7977ijajjzwbtgk89m0.jpg

Advertisement

So we’ll finally get something like this:

Advertisement

“But that’s a lot of tweaking for one single image! I was promised something easy!” you may say now. But guess what!? You now have a recipe where you only need to add an ImageID from any image you can find in Kotaku to our base URL and you can get an Instant Switch Port Mockup!

Want Red Dead Redemption 2 on Switch? Use h7977ijajjzwbtgk89m0 !

Advertisement

Want the Payload in Switch? Use n2iavsmgjjqle43g4p18 !

Advertisement

I hope you find this useful! You can try it in the comments!


This post is part of the Sixtay Days of Writting Challenge. Post Count: 4

Share This Story

Get our newsletter