Manipulating Contentful Images via url parameters

[jayshay]

Hi,

How can I append the url to add image manipulations to dynamic Contentful Images?

Images API

[TimG]

Hi @jayshay, thanks for the question! Similar to your other post, I think you will want to augment your data binding with some custom code, by finding the image data binding, and selecting Edit code

From here you can pull values from state or context, or manually enter yourself, something like this:

Try that out and see if that works for you!

[jayshay]

Hi Tim,

Thanks for the tip. We tried this on got a broken image link result, so we just tried some simplified code and got the same broken image link result.

[TimG]

Hi @jayshay could you provide an example of the code you used? Or a link to your builder content entry where you tried this so I could take a look and try to advise on any potential solutions

[jayshay]

Here is the simplified code (without any variables or parameters)

Also, we noticed ours end with url and yours does not.

[TimG]

that should be fine, assuming that path is to an actual image url. It might be easier if you could send me a link to your Builder content entry to see the actual code within Builder.

Or if you could provide a fiddle (click the the dots in upper right corner and select Create fiddle) that could be helpful!

[jayshay]

Ok awesome - I’ll send it to you in a PM

[TimG]

Hi @jayshay it looks like the value you want is state.providerItem.fields.providerImage.fields.file.url

Is that what you are looking for? Is there any other value you need to append or adjust on it? Let me know if there is anything else we can help clarify!

[jayshay]

Hi @TimG,

Unfortunately that is not working and we are still getting the missing image icon. If we just use

state.providerItem.fields.providerImage.fields.file.url

everything works fine but when we add the full code, we see the missing image icon

const fit = state.fill;
const width = '100px'
return `state.providerItem.fields.providerImage.fields.file.url?fit${fit}&w=${width}`

[TimG]

Hi @jayshay

Apologies, I had some typos and incorrect values in my previous example. I took a look at the Contentful API, and a better example would be below:

const fit = state.fill || 'fill';
const width = '100'
return `${state.providerItem.fields.providerImage.fields.file.url}?fit=${fit}&w=${width}`

the fit value was just an example showing you can pull from values in state. If you want a default, you can put the || 'fill' or you can leave out as needed. Also, looks like the width value should just be a number, no px

Finally, since the returned value is a string based on variables, it should actually be a template literal and the copied code above shows the actual syntax to achieve that

Take a look and see if that works better for you!

[jayshay]

@TimG

const fit = state.fill || 'fill';
const width = '100'
return `${state.providerItem.fields.providerImage.fields.file.url}?fit=${fit}&w=${width}`

Hi Tim,

Thanks for looking into this further. We updated the code and yes, it works perfectly now. We are going to adapt this further to serve images to WebP and some other optimizations.

[TimG]

Great! Glad to hear it, let us know if we can help with anything else!