Do more with images on the Contentful platform

Published on August 14, 2014

BlankWaves-06

Subscribe for updates

Build better digital experiences with Contentful updates direct to your inbox.

If you work with images on Contentful, you’re in for a treat! In the last couple of weeks, we released some awesome features for working with images. You can now add assets to markdown fields and edit images with URL magic!

Assets are coming to Markdown fields

After we rolled out support for Markdown formatting in text fields, many of you asked us to go one step further and enable inserting of images from the asset module. In our internal discussions, we were very cautious about embracing this idea, primarily because we don't want you to fall victims to some of the more outdated web-development ideas.

Here is what we meant with that: as we’ve said so many times before, Contentful is a screen-agnostic platform that allows you reuse your content across a whole universe of devices and mediums. Unfortunately, this approach only works if content creators learn to ignore what years of working with WYSIWYG type of editors has taught them.

In a way, Contentful is a YNKWYG - "You Never Know What You Get" - type of editor. And it is a good thing too. Since online content can be consumed in so many unexpected ways these days - from e-readers and car navigation to smart fridges and wearables, not getting hung up on how your content looks is something of a competitive advantage.

The importance of seeing beyond the immediate picture is especially relevant in the case of images, which lose their emotional impact when not optimized properly for screen resolution and aspect ratios.

It is for this reason that we visualize any image inserted into a markdown-field in a scaled-down version set in a grey canvas box. The message we want to send is: "The visible image is just a placeholder. Actual design decisions are made on specific devices by your design & development team, not by a lonely editor in the editor interface."

Adding images to the field

Coming down to practicalities, to insert an image, just click a paperclip icon and choose a desired image in the dialogue box. Remember, you can use all kinds of search operators to help you filter through the large numbers of images. The asset of your choice is then inserted below the current paragraph, using standard markdown syntax for images. You can preview images by switching the text field to the preview mode.

Editing images on the fly

And now for the "design decisions" that will help you properly display images on a variety of devices. We are very excited to roll out changes to the Content Delivery API making it super easy to experiment with image sizes, resolutions and aspect ratios.

As long as your images are hosted on our domain images.contentful.com (and all of our assets are automatically put there), you can specify the desired image output by using a combination of URL query parameters.

Since the most frequent problem content creators have is scaling images down, let’s look at image resizing first. By default, whenever you specify desired w and h parameters, your image will be scaled down to fit the bounding box. Mind you, the image is not stretched, skewed or enlarged, but instead intelligently fit into the area defined by you. The way it works is that you add optional parameters at the end of URL, for example, https://images.contentful.com/folder/subfolder/image.jpg?w=400&h=300. Here is the kind of image you will get by specifying a bounding box of 300*300 px:

?w=300&h=300

kabiaa

To change the default way in which your image responds to the w and h parameters, attach the fit parameter to the asset’s URL. Now the image will be stretch on the short side to fill the entire bounding box.

?fit=scale&w=300&h=300

kabiaa

The focus parameter determines where the fit parameter should focus on. It takes values such as right, left, top and bottom or combine them like bottom_left or top_right. If you work with human photography, you can also choose to focus on faces. To clearly see the effect of focusing on a specific area, I added the crop function below:

?fit=crop&w=250&h=250&f=bottom_right

kabiaa

Alternatively, fit can take on values like thumb and pad. The former one request a thumbnail image to be generated, e.g. your original image will be cropped to fit the specified dimensions. Meanwhile, padding will add margins on the shorter side to fill set boundaries. To highlight the paddings, I also added red background color to the parameter list. See how it looks in practice:

fit=pad&w=200&h=300&fm=jpg&bg=red

kabiaa

For a more retro look, try the r (radius) parameter - it adds rounded corners to your image. The higher the value, the more enclosed in a circle your image will be. All Emily Brontë fans out there, just imagine the wonderful family albums you can produce now!

?fit=thumb&f=face&r=20

kabiaa

Finally, for all of you worrying about the latency of your pages and apps, our API also allows a q parameter to be passed along to define the value of JPEG compression (possible values are between 1 and 100). Meanwhile the fm parameter can be used to change the format to either png or jpg.

?fm=jpg&q=5

kabiaa

One last final word of caution, we recommend that you perform URL-triggered actions only on final images. The reason is simple: if you happen to update an original image, say, by adding a high-res picture or replacing original with something different altogether, your edited image WILL NOT update automatically. Instead, you'd need to add parameters used for image-manipulation to a newly republished URL and insert it in the right place manually.

Thanks for reading, we hope you enjoy these new additions!

You can read more about using images in Contentful in our "Creator's guide to image file formats" article.

Image Credits: Ermin Celikovic

Subscribe for updates

Build better digital experiences with Contentful updates direct to your inbox.

Related articles

A bumper crop of content in the newsletter this month; two JavaScript starter guides for Remix and React, and we sponsored and spoke at various events.
News

Engineering interview, new JavaScript starters, and fun webinars

September 13, 2022

We’re thrilled to introduce a refreshed and updated Learning Center, packed with new features that will empower you to elevate your skills and knowledge.
News

Learn fast and build better with the Contentful Learning Center

October 10, 2023

Break out the bubble wrap and cardboard boxes, the Contentful Developer Community is moving to Discord. Here’s the what, when, why, and how of it.
News

Hello World: Find the Contentful Developer Community on Discord

July 20, 2023

Contentful Logo 2.5 Dark

Ready to start building?

Put everything you learned into action. Create and publish your content with Contentful — no credit card required.

Get started