Images and videos

    All the assets are augmented with some extra fields exposed via the GraphQL API, to allow you some extra possibilities on the frontend.

    Images

    Besides all the fields that you can explore via the CMS interface, the API returns the blurhash of every image, also as a base64-encoded image. You can embed that directly in the HTML of the page and then swap it with the actual image at a later time, to offer a smooth experience when loading images (LQIP).

    Alternatively a more minimal option is to use the dominant colors to prepare the space where the image will be shown:

    Responsive images

    One special augmentation that we offer on top of images in our GraphQL API is the responsiveImage object.

    In this object you can find pre-computed image attributes that will help you setting up responsive images in your frontend without any additional manipulation.

    We support as arguments all the Imgix parameters and also the HTML5 img sizes, to send media queries for extra control, that we simply forward:

    One particularly handy feature of the GraphiQL explorer is that you can explore all the Imgix parameters and read the documentation on the fly by hovering on the parameters or searching for them in the docs pane:

    To read all the details of the responsiveImage object head to the blog post where you can also find some examples and integrations.

    Videos

    If you chose to upload videos on DatoCMS, thanks to the integration with Mux, we can augment the video objects with:

    • HSL video streaming URL;
    • high, medium and low quality MP4 versions of the video to support legacy browsers that do not support HSL;
    • duration and frame rate of the video;
    • thumbnail URL: resizable, croppable and available in JPEG, PNG and GIF format.

    Like so:

    Filtering

    You can filter on all the meaningful fields that we offer in the uploads.

    Here's an example of what you'll see in your CDA explorer:

    Fetch uploads straight from the context

    For the GraphQL veterans this will be obvious, but still we are impressed how cool it is to be able to fetch all the augmented assets directly from the context where they are used.

    We hope you appreciate, as we do, something like this: