Page Comparison

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

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!

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.

{
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

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

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:

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