Double auto image parameter

Hi Prismic people!

Context

NB: we're still using the legacy builder, with the 'old' media library

Issue

  • This is the cause of some issues on our side, since we rely on this URL to add/remove params programmatically
  • Is this something you have on your radar? Could it be fixed by switching to the page builder, and new media library?

Thanks!

Thomas

Hi @thomas.digregorio , thanks for raising the issue. This wasn't on our radar so I'm following up with the team now. I don't think it is related to the fact you are using the Legacy Editor but I'd be happy to upgrade you and see if that resolves the problem?

Best,
Guy

Thanks, Guy!

  • This isn't a solution for us at the minute, we're not ready for the page builder internally yet
  • I'll let you get back to me once your team has identified the issue, or if you need more info

Thanks,

Thomas

Hi @thomas.digregorio,

Can you give me some examples of these images?

Is this happening in the media library or on the front end of your website?

If on the front end of your website, can you give me an example page where it happens?

Thanks.

Hi @Phil,

It's happening on

  • the media library, for all images as far as I can tell
  • some images of the front end (given by the API)

As mentioned above, we rework those URL params programmatically. Because of this double auto
param in the original URL of the image, we're not getting the rect property when we re-integrate this param.
For instance, the hero image on this page is rendered at 1080x720, where it should be 1080x560 thanks to the rect param

Thanks,

Thomas

Hi Thomas,

  • the media library, for all images as far as I can tell
  • some images of the front end (given by the API)

Can you give me examples of these images that do that? Because in the example you sent, I guess you've already removed this behaviour?

Is there any chance you can share the code that you use to out the hero image in this Slice?

Hi @Phil,

Yes, the behavior has been removed as part of the bug I was describing.

  • The hero image of this page has this URL retrieved from Prismic: https://images.prismic.io/360learning/Zlbqw6WtHYXtT4aZ_FR-Blog-b-corp-rse.jpg?auto=format,compress?auto=compress,format&rect=0,284,3840,1991&w=1080&h=560
  • You can see the double auto parameter there
  • As I mentioned, we rework programmatically this URL so that it becomes this one: https://images.prismic.io/360learning/Zlbqw6WtHYXtT4aZ_FR-Blog-b-corp-rse.jpg?auto=format&fit=max&fm=png&q=75&dpr=1&w=1080
    • for that we first retrieve the parameters from the original url using url.split("?")[1]
    • as you can guess, doing that will get only auto=format,compress & completely ignore this part auto=compress,format&rect=0,284,3840,1991&w=1080&h=560, which is of interest to us
    • for the rest of the params
      • auto is removed (the default one)
      • auto, fit, fm, q, and dpr are added as new default params
      • w=1080 is defined in the code on our end

So we completely lose the params defined in the Prismic image crop tool, like rect, which messes up the final render of our image

Please let me know if this helps

Regards,
Thomas

1 Like

Very clear. Thank you for supplying this extra information, it's helped me see that's it's definitely coming through our API as you described.

So I can bring this to the team now to investigate. I'll get back to you as soon as I have more info.

Thanks.

1 Like

Hi @Phil

Do you have some news for me?

  • We're implementing a temporary fix on our side in the meantime
  • But we would very much like to close that issue

Thanks!

Have a great day,

Regards,
Thomas

Hi @thomas.digregorio , no updates yet. I will update this thread as soon as we have more information.

Best,
Guy