Overlaying Sharp Portrait Image on Blurred Background Using ImageKit

Image API
1

What We’re Trying to Achieve

https://ik.imagekit.io//tr:w-1200,h-675,cm-extract,bl-12,q-100,f-auto/l-image,i-<path_to_image>,w-500,h-600,e-upscale,pr-true,a-mc

We would like to achieve a final image that:

  • Has a blurred version of the original portrait image as the full landscape background (1200x675).

  • Displays the sharp original image overlaid at the center, resized to 500x600.

Issue Faced

Only the blurred background appears. The overlay image is not visible, even though the l-image transformation is included.

I want something like this

image
image686×578 28.4 KB

2

Here are the different options possible for the overlay. In all cases we have a 1200x675 blurred background. Only the size or crop of the book is changing in different cases

  1. crop the book, but always be 500x600 exactly - https://ik.imagekit.io/recsocial/book-images.jpg?tr=w-1200,h-675,bl-12,fo-auto:l-image,i-book-images.jpg,w-500,h-600,t-false,l-end
  2. force resize the book to 500x600, no cropping but book might look distorted if its original aspect ratio was different - https://ik.imagekit.io/recsocial/book-images.jpg?tr=w-1200,h-675,bl-12,fo-auto:l-image,i-book-images.jpg,w-500,h-600,c-force,t-false,l-end
  3. pad the book on the edges to make it match the exact size 500x600 - https://ik.imagekit.io/recsocial/book-images.jpg?tr=w-1200,h-675,bl-12,fo-auto:l-image,i-book-images.jpg,w-500,h-600,cm-pad_resize,t-false,l-end
  4. Same as 3, but use blurred background for padding - https://ik.imagekit.io/recsocial/book-images.jpg?tr=w-1200,h-675,bl-12,fo-auto:l-ima[…]images.jpg,w-500,h-600,cm-pad_resize,bg-blurred,t-false,l-end
  5. Same as 3, but use a dominant color for padding - https://ik.imagekit.io/recsocial/book-images.jpg?tr=w-1200,h-675,bl-12,fo-auto:l-ima[…]mages.jpg,w-500,h-600,cm-pad_resize,bg-dominant,t-false,l-end
  6. Don’t make it exactly 500x600, but at max 500x600. doesn’t give exact size, but prevents any cropping or padding - https://ik.imagekit.io/recsocial/book-images.jpg?tr=w-1200,h-675,bl-12,fo-auto:l-image,i-book-images.jpg,w-500,h-600,c-at_max_enlarge,t-false,l-end