Assets

Working with assets is an essential part of content management. GraphCMS allows you to upload and assign asset files to any content model in your project. The uploaded files will be assigned to the project´s internal Asset model. Asset fields will then connect the dots between a content model and assigned files.

Asset files that are stored in GraphCMS are served via a global content delivery network. This assures quick response times and fast loading of your assets.

Querying

The maximum accepted image size is 100.000.000 pixels. An image with this many pixels could have width and height combinations like 10.000 x 10.000 or 5.000 x 20.000, etc. The maximum file size of an image can not be larger than 256mb.

Uploaded asset files can be queried from your content API. Let´s assume we have a content model Post, with a field configuration of:

  • Title #title - Single Line Text
  • Images #images Assets - Allow Multiple Values

This will allow us to store an arbitrary number of images for a Post.

We can fetch allPosts with the following query:

{
  posts {
    title
    images {
      fileName
      handle
      url
      mimeType
      size
    }
  }
}

Which will give us a result like this:

{
  "data": {
    "posts": [
      {
        "title": "Some nice post",
        "images": [
          {
            "fileName": "pexels-photo-295821.jpeg",
            "handle": "7AmzJToStuJrNqkpPSWO",
            "url": "https://media.graphcms.com/7AmzJToStuJrNqkpPSWO",
            "mimeType": "image/jpeg",
            "size": 100075
          }
        ]
      }
    ]
  }
}

Field #images will return an array of asset objects, which contain the fields:

  • fileName the original file name of the uploaded file
  • handle the identifier of the uploaded file
  • url the full URL to the uploaded file
  • mimeType the asset type of the uploaded file
  • size the total size in bytes
  • height the hight in pixels
  • width the width in pixels

If you know the desired display size of your images, it is highly recommended to use our integrated image transformation engine to scale your images to the desired size. This will decrease the loading time of your content and result in a better user experience for your visitors.

Creating and Uploading

Assets can be uploaded from the asset view, or directly from an asset field that is used in your content model.

Under the hood, an asset is just another content model but also supports special methods and utilities for developers. For users, images are also commonly handled differently with their own unique workflow such as gathering permissions, managing edits and optimizing variations for different platforms.

The Window

The Asset View has two appearances, the Grid View and the Table View. The latter is helpful for seeing the custom fields on your asset model.

Asset Grid View

Asset Table View

From both views, you can upload a file from various service providers.

They are:

  • My Device (Your current device)
  • Link (URL)
  • Web Search
  • Facebook
  • Instagram
  • Google Drive
  • Dropbox

CMI window for uploading an asset

These assets will be available both in other models and to query on their own for ultimate gallery action.

You have three options for editing an image:

CropCircle CropRotate
Asset edit window for crop. Asset edit window for circle crop. Asset edit window for rotate.

Those with developer access and are comfortable writing queries have a wide array of methods available to manipulate images for common patterns in modern web design. You can read more about that at the developer docs for assets.

Extending the Asset Model

In GraphCMS you have the ability to add custom fields to your asset model. The next clip will show you how you can archive that:

Extending the Asset Model with a Text Field