Kinja Image Tricks: Overlay

Illustration for article titled 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?

Advertisement

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!

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.

Advertisement

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”
Kinja will always ask for this “ImageID”
Screenshot: Techspot
Advertisement

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:

Illustration for article titled Kinja Image Tricks: Overlay
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:

Illustration for article titled Kinja Image Tricks: Overlay
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 !

Illustration for article titled Kinja Image Tricks: Overlay
Advertisement

Want the Payload in Switch? Use n2iavsmgjjqle43g4p18 !

Illustration for article titled Kinja Image Tricks: Overlay
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