Media - files are content too

Choose a photograph - Download this lion photograph by Keyur Nandaniya, or choose a JPEG with its main subject away from the center. Save it as lion.jpg if you want the filename to match the examples.

Create the Images folder - In your "My First Project" content project, create a folder named "Images" at the root, with the path /images.

Choose the upload destination - Select the Images folder, click New, and choose the Media tab. Check that the destination shown is /images/.

Upload the file - Click the upload area to select your file, or drag the file onto it.

Figure 1. The Media tab in the New Content dialog

Find the uploaded image - Open Query Playground, select "My First Project" and keep Draft selected throughout this chapter. Run this query to find up to ten images anywhere in the project:

{
  guillotine {
    queryDsl(
      query: {
        term: {
          field: "type"
          value: { string: "media:image" }
        }
      }
    ) {
      displayName
      _path
      type
      dataAsJson
      attachments {
        name
        label
        mimeType
        size
      }
    }
  }
}

{
  "displayName": "lion",
  "_path": "/images/lion.jpg",
  "type": "media:image",
  "dataAsJson": {
    "media": {
      "imageWidth": 2400,
      "attachment": "lion.jpg",
      "imageHeight": 1600
    }
  },
  "attachments": [
    {
      "name": "lion.jpg",
      "label": "source",
      "mimeType": "image/jpeg",
      "size": 550171
    }
  ]
}

Keep the content path - Copy your image’s _path for the following queries.

Fetch the attachment URL - Use get with the content path from your response. Replace /images/lion.jpg if your image has a different path:

{
  guillotine {
    get(key: "/images/lion.jpg") {
      displayName
      ... on media_Image {
        mediaUrl {
          path
          queryString
        }
      }
    }
  }
}

{
  "displayName": "lion",
  "mediaUrl": {
    "path": "/media:attachment/my-first-project:draft/3cff3960-08e9-4c92-828e-917187c1dc20:927e557892810fabb5e2c76cd686a7e7/lion.jpg",
    "queryString": ""
  }
}

Build the attachment address - Use your own response: start with http://localhost:8080/api, then append mediaUrl.path and mediaUrl.queryString exactly as returned. An empty queryString adds nothing. For the example above, the address would be:

http://localhost:8080/api/media:attachment/my-first-project:draft/3cff3960-08e9-4c92-828e-917187c1dc20:927e557892810fabb5e2c76cd686a7e7/lion.jpg

View the original file - Open your assembled URL in a new tab in the same browser where you are logged in to Content Studio. It displays the original uploaded image. Draft media requires an authenticated request; copying the example URL above will not retrieve your own image.

Download the attachment - Change mediaUrl to mediaUrl(download: true) and run the query again. Assemble and open the new URL, including its queryString; the browser will download the attachment.

Request a portrait crop - Use get to retrieve the image whose content path you copied above. Replace /images/lion.jpg if your image has a different path:

{
  guillotine {
    get(key: "/images/lion.jpg") {
      displayName
      ... on media_Image {
        imageUrl(scale: "block(400,600)") {
          path
          queryString
        }
      }
    }
  }
}

{
  "displayName": "lion",
  "imageUrl": {
    "path": "/media:image/my-first-project:draft/3cff3960-08e9-4c92-828e-917187c1dc20:4f827305024b80384b0aa939496e4688/block-400-600/lion.jpg",
    "queryString": ""
  }
}

View the crop - Assemble the URL from http://localhost:8080/api plus your returned imageUrl.path and imageUrl.queryString, then open it in your browser. Without a focal point, the crop is centered, which can cut off an off-center subject:

Figure 2. Portrait crop before setting a focal point

Open the image editor - Return to Content Studio, select your image and click Edit. The content form contains fields such as Caption and Alternative text, and the image preview includes editing controls.

Figure 3. The image content form and preview

Position the focal point - In the toolbar above the image preview, click Set Autofocus to edit the focal point. Click the lion’s face, or drag the marker onto the subject of your own image.

Figure 4. Positioning the focal point

Save the focal point - Click Apply to accept the position, then Save in the Content Editor toolbar to save the content item.

Compare the new crop - Return to Query Playground and run the same portrait-crop query again. Assemble and open the newly returned URL so you see the saved change.

Figure 5. The same portrait crop with a focal point

Request image filters - Keep the same image and scale, and add a filter argument:

{
  guillotine {
    get(key: "/images/lion.jpg") {
      displayName
      ... on media_Image {
        imageUrl(
          scale: "block(400,600)"
          filter: "grayscale(); border(10, 0x000000)"
        ) {
          path
          queryString
        }
      }
    }
  }
}

View the filtered image - Build and open the URL as before, including the complete queryString returned by Guillotine.

Figure 6. The cropped image with filters