Juxtaposing two images in Cloudinary

Hey all,

I’m curious how Cloudinary can be used to put two images side by side in an inline list.

Context:

My app chelcompanion.glideapp.io tracks tournaments/games for the EA Sports NHL video game series. Each game has a matchup of two players, with their pictures included in an inline list.

Each game can reside as part of an inline list. Currently, the list shows pictures of the winner once the game is over, and remains blank for games that have yet to be tracked.

I’d like the cover of the image to be a joint image of both players regardless of the game being played yet. Something like this:

(Current at the top, Desired result at the bottom)

Any ideas would be much appreciated!

Seems like the same use case here: Combining Dynamic Images of Charts for use in app - #2 by ThinhDinh

2 Likes

Fairly straightforward with Cloudinary.
The general form is:

https://res.cloudinary.com/<YOUR_CLOUDINARY_ID>/image/upload/l_<IMAGE 1>,[TRANSFORMATION OPTIONS]/<IMAGE 2>

Some examples of a couple that I did just last night…

In the screenshots shown there, the two lower images shown in each are a composite of two images, with some text overlay. So:

  • Base image
  • Second image overlay
  • Text overlay
2 Likes