Product Updates

Given the booming interest in Remix — which is totally well deserved — we decided to invest some time to better integrate with it:

• A step-by-step guide to introducing DatoCMS into a Remix project is available;

• A Starter Project, complete with preview mode, is now available on our Marketplace;

• The react-datocms package offers a new helper specifically designed to work with meta tags in Remix.

Happy hacking!

Based on your feedback, we recently released a new version of the react-datocms NPM package to improve our <Image /> component.

It now offers:

• multiple layout modes (ie. layout=fill is great for background images!)

• a new onLoad callback

• a new usePlaceholder option to disable the blurred image placeholder

We also removed the IntersectionObserver polyfill. Since iOS 12.2 (March 2019) it's supported natively in all modern browsers, and the polyfill was accounting for 25% of the package size. Of course you can add a polyfill on your side if you still need it!

By popular demand, we decided to add a couple new ways of presenting some fields:

Boolean fields

In addition to the usual "switch" input, you can now present a boolean field as a Radio group or Select input. You can tweak the way your field will be visible to your editors in the Presentation settings, and specify the text that will be associated with both the true and false value.

String fields

Similarly, you can also present single-line text fields as a Radio group or Select input. The main difference from boolean fields is that you can specify more than two possible options, plus the string value associated with every option.

JSON fields

If you need to store multiple strings in a field, you can now use the Multi-select input and Checkbox Group on JSON fields. Again, you can specify the different options that will be visible to editors, and the relative value that will be stored in the field itself.

We could have easily released these new presentation modes as plugins, but we thought they're frequent enough to deserve their permanent place in DatoCMS. ♥️

Based on feedback, we added two new reports to the "Project Usages" section of every project:

• Top transformations by traffic: this shows your assets sorted by consumed bandwidth, complete with any Imgix transformation parameter. It can be helpful ie. to find places where you did not add any optimization parameters in your frontend, making your pages slower to download than needed.

• Top requested transformations: similar to the above, but it sorts asset by number of requests rather than consumed bandwidth.

As always, we remind that every report is updated every minute, but they’re not to be considered 100% accurate, and only serve for qualitative analysis.

So far only Single-line Text fields could be set as the title field for a record... well it is now possible to also use Link fields, Date fields and DateTime fields.

It's a particularly useful feature when you have ie. "event" records, where a date might be the most important bit to highlight from a record!

AVIF is now the default format across all accounts if you use auto=format. AVIF format can also be forced as the output format with fm=avif. File sizes should drop by nearly 60% compared to JPEG & 35% compared to WebP, so that's awesome news for every project.

We've also made available the iptc=allow parameter to allow IPTC metadata (which contain attribution info) to pass through from the original JPG image to the transformed image.

In a modular content field, if you specify only one type of required block and you add a validation requiring a minimum number of blocks, like here for example:

We go ahead and by default create the required empty blocks for you when you create a new record, like this:

So your editors will see from the get go all the fields that they will need to populate and save a few clicks!

We have just added a new type of notice for build triggers:

So that now you can see at a glance if it's a build trigger notice and you don't risk missing it thinking it's a record saving or something else.

This change was long overdue, and we're glad we were able to address it! 🥳

Suppose you have ie. a model with 10 fields, 9 of which are optional. Until now, when creating a record, you were required to specify... all 10 fields. If you didn't want any value for the optional ones, you were required to pass a null value in any case, or the API call would fail:

const { SiteClient } = require("datocms-client");
const client = new SiteClient("YOUR-API-TOKEN");
const record = await client.items.create({
  itemType: "1234",
  requiredField: "Lorem ipsum",
  optionalField1: null,
  optionalField2: null,
  optionalField3: null,
  optionalField4: null,
  optionalField5: null,
  optionalField6: null,
  optionalField7: null,
  optionalField8: null,
  optionalField9: null,
});

In addition to being redundant and inconvenient, this was a maintainability problem over time, because when a new optional field gets added on the model, you need adapt every script and add that null value. Well, now optional fields can be omitted from the payload during creation:

const record = await client.items.create({
  itemType: "1234",
  requiredField: "Lorem ipsum",
});

Nice, simple and clean. Happy friday!

With today's update, we decided to split two permissions in order to give you a more fine grained permission system.

Before

After

What happened to existing roles in my project?

This change did not alter what your users were already able to do, or not to do. For instance, if an existing role had the ability to "Create/duplicate" records, the same role has both the permissions ("Create" and "Duplicate") defined.