Overlay vs underlay in URL generation API

caprica
caprica Member Posts: 11 ✭
edited November 2023 in Developer APIs

HI,

I have two separate transforms.

First, overlay:

const t1 = new Transformation()
  .overlay(
    source(image('some-id'))
      .position(
        new Position()
          .gravity(compass('north_west'))
          .offsetX(100)
          .offsetY(200),
        )
  )
  .addFlag('layer_apply')

Second, underlay:

const t2 = new Transformation()
  .underlay(
    source(image('some-id'))
      .position(
        new Position()
          .gravity(compass('north_west'))
          .offsetX(100)
          .offsetY(200),
        )
  )
  .addFlag('layer_apply')

If I dump out the contents of each of these...

console.log(JSON.stringify("T1 " + t1.toString()))
console.log(JSON.stringify("T2 " + t2.toString()))

First, overlay (t1):

T1 u_some-id/fl_layer_apply,g_north_west,x_100,y_100/fl_layer_apply

Second, underlay (t2):

T2 u_some-id/fl_layer_apply,g_north_west,x_100,y_100/fl_layer_apply

But these are identical. This can't be right can it? I need overlay, not underlay. My understanding is it should have "l_" prefix for overlay, not "u_" for underlay.

I crafted the same transformation manually for the upload API (so not using the url-gen API) and the overlay does get properly rendered with "l_" there.

Using `@cloudinary/url-gen 1.13.0`.

Best Answer

  • caprica
    caprica Member Posts: 11 ✭
    edited December 2023 Answer ✓

    OK, so it turns out that VS Code auto-import has done me in.

    I had this:

    import { source } from '@cloudinary/url-gen/actions/underlay'

    When it should be this:

    import { source } from '@cloudinary/url-gen/actions/overlay'

Answers

  • Cloudinary Team
    Cloudinary Team Administrator, Cloudinary Staff Posts: 160 admin

    Hi there,

    Thanks for reaching out and glad you figured it out!

    Please let me know if you have any other questions or queries.

    Kind Regards,
    Thomas

    Developer Support Engineer
    Customer Success team
    Cloudinary UK

    Helpful Links For You
    💬 Share questions, connect with other users in our Cloudinary Community forums and Discord server!
    🧑‍🎓 Join our Cloudinary Academy for free courses, workshops and other educational resources.
    📄 Read our documentation for in-depth details on Cloudinary product features and capabilities
    📰 Check out the Cloudinary blog for the latest company news and insights

Categories