Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

The Content Management System supports image manipulation (to some extent) and image storage, to be able to upload an image in the Content API the following steps must be followed.

  1. Uploading an image to the Image Processing API

  2. Getting an image

  3. Retrieving a list of images

Uploading an image to the Image Processing API

What is the Image Processing API?

  • Its a service which supplies the following functionalities: Image cropping, Image watermarking, Image uploading to Google Cloud Storage

We are going to explore the image upload functionality, as it is connected with the image storage in both the Content API and Google Cloud Storage.

...

As displayed in the graphic above, the image uploading flow is as follows:

  1. Upload an image to the Image Processing API

  2. An image path generated by the Google Cloud Storage and returned as a response

  3. Store the image generated path to an Image object

  4. Post the image object to the Content API

All of these points will be explained in details further on in this tutorial.

1. Upload an image to the Image Processing API

Code Block
languagejson
End-point: https://image.api.sportal365.com/upload
Request Type: POST
Headers: 
{
  "Project": "<project domain>",
  "Content-Type": "multipart/form-data"
}
Request body:
{
  "file": <file binary>
}

2. An image path generated by the Google Cloud Storage and returned as a response

Please keep in mind that this is a sample response!

Code Block
languagejson
Response
Request body:
{
  originalFilename: <original filename>
  path: "smp-image-api-integration/smp.frontend/21102021/fb4365c6-3e90-48cd-8416-97c9cafd526c.png"
  storageType: "GCS"
}

3. Store the image generated path to an Image object

This is an example JSON of what the image object must consist of using the path generated in the previous step.

Code Block
languagejson
{
description: <some image description> // not mandatory, but nice to have, you can search images afterwards using this description
path: "smp-image-api-integration/smp.frontend/21102021/fb4365c6-3e90-48cd-8416-97c9cafd526c.png"
urls: {
    uploaded: {
      embed: "smp-image-api-integration/smp.frontend/21102021/fb4365c6-3e90-48cd-8416-97c9cafd526c.png?operations=fit(770:)"
      gallery: "smp-image-api-integration/smp.frontend/21102021/fb4365c6-3e90-48cd-8416-97c9cafd526c.png?operations=fit(1920:)"
      original: "smp-image-api-integration/smp.frontend/21102021/fb4365c6-3e90-48cd-8416-97c9cafd526c.png"
      thumbnail: "smp-image-api-integration/smp.frontend/21102021/fb4365c6-3e90-48cd-8416-97c9cafd526c.png?operations=autocrop(256:256)"
    }
  }
}

4. Post the image object to the Content API

Code Block
languagejson
End-point: https://content.api.sportal365.com/images
Request Type: POST
Headers: 
{
  "Authorization": "Bearer <your token>",
  "Project": "<project domain>"
}
Request body:
 {
  "description": "string",
  "urls": {
    "uploaded": {
      "embed": "string",
      "gallery": "string",
      "original": "string",
      "thumbnail": "string"
    }
  }
}


After finishing these step you have successfully uploaded and stored an image in the Content API system

Getting an image

Code Block
languagejson
End-point: https://content.api.sportal365.com/images/<image id>
Request Type: GET
Headers: 
{
  "Authorization": "Bearer <your token>",
  "Project": "<project domain>"
}

Retrieving a list of images

To get a list images the following request must be made:

Code Block
languagejson
End-point: /images
Request Type: GET
Headers: 
{
  "Authorization": "Bearer <your token>",
  "Project": "<project domain>"
}

The image listing endpoint supports pagination. There are additional parameters that can be used:

Parameters

  • limit

    • Description: Controls how many images will be returned per page

    • Values:

      • Maximum value: 200

      • Default value: 20

    • Behaviour: Affects how many pages are generated.
      Example: If there are 60 images and the limit is set to 10, this will generate 6 pages of images.

    • Request:

      Code Block
      End-point: /images?limit=10

       

  • page

    • Description: Controls which images page will be retrieved

    • Values:

    • Behaviours: Affected by the “limit“ parameter

    • Request

      • Without “limit“ parameter

        Code Block
        End-point: /images?page=2
      • With “limit“ parameter

        Code Block
        End-point: /images?limit=10&page=2