Contentful logo

Contentful Community

Setting image size in Blog Post Content Entry

I did some searching but could not find anyone with a similar question/issue.

In Contentful (or with an extension), is it possible to upload one image (In my example a logo) at a high resolution? Then use it in two different pages at two different sizes?

What would be nice is if I could set the image size on say the blog post page so that it’s not too large and it passes those settings through in JSON. I may use this logo on other pages that don’t change and adjust with CSS in the code. But blog posts are something clients can add on their own and I’d hate to see them have to add images at the exact size needed vs re-using an asset that’s already in the library and sizing it down in the blog post itself.

Not sure if that made sense, let me know what more information I can provide.

With Image API you could set size of an image on the fly: https://www.contentful.com/developers/docs/references/images-api/#/reference/resizing-&-cropping, as an example:

Alma,

Is there a way to set or pass that from the CMS? What I am trying to avoid is down the road a client creates a blog post with an oversized image that would require a code change to adjust the url by appending ?w=400. Right now I just let the URL of the images in Gatsby from the graphql query.

To pass the width value from the CMS, you will need to create a separate text field to store it, so when fetching images your application can append the value to the image URLs dynamically, which requires changes in the content model

Alternatively, considering the goal is to prevent oversized blog images, maybe you could add a logic in the application, something like: if content_type is blogPost and [‘details’][‘image’][‘width’] is larger than 400, append ‘?w=400’ to image URL