{"type":"doc","content":[{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"paragraph"},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Uploading an image to the Image Processing API","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Getting an image","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Retrieving a list of images","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Uploading an image to the Image Processing API","type":"text"}]},{"type":"paragraph","content":[{"text":"What is the Image Processing API?","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Its a service which supplies the following functionalities: Image cropping, Image watermarking, Image uploading to Google Cloud Storage","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"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.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":50.0},"content":[{"type":"media","attrs":{"width":5154,"id":"dcbcbbcc-9205-4291-a9a2-f67f9cb2f333","collection":"contentId-3040870412","type":"file","height":9505}}]},{"type":"paragraph","content":[{"text":"As displayed in the graphic above, the image uploading flow is as follows:","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Upload an image to the Image Processing API","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"An image path generated by the Google Cloud Storage and returned as a response","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Store the image generated path to an Image object","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Post the image object to the Content API","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"All of these points will be explained in details further on in this tutorial.","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":3},"content":[{"text":"1. Upload an image to the Image Processing API","type":"text"}]},{"type":"codeBlock","attrs":{"language":"json"},"content":[{"text":"End-point: https://image.api.sportal365.com/upload\nRequest Type: POST\nHeaders: \n{\n \"Project\": \"\",\n \"Content-Type\": \"multipart/form-data\"\n}\nRequest body:\n{\n \"file\": \n}","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":3},"content":[{"text":"2. An image path generated by the Google Cloud Storage and returned as a response","type":"text"}]},{"type":"paragraph","content":[{"text":"Please keep in mind that this is a sample response!","type":"text"}]},{"type":"codeBlock","attrs":{"language":"json"},"content":[{"text":"Response\nRequest body:\n{\n originalFilename: \n path: \"smp-image-api-integration/smp.frontend/21102021/fb4365c6-3e90-48cd-8416-97c9cafd526c.png\"\n storageType: \"GCS\"\n}","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":3},"content":[{"text":"3. Store the image generated path to an Image object","type":"text"}]},{"type":"paragraph","content":[{"text":"This is an example JSON of what the image object must consist of using the path generated in the previous step.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"json"},"content":[{"text":"{\ndescription: // not mandatory, but nice to have, you can search images afterwards using this description\npath: \"smp-image-api-integration/smp.frontend/21102021/fb4365c6-3e90-48cd-8416-97c9cafd526c.png\"\nurls: {\n uploaded: {\n embed: \"smp-image-api-integration/smp.frontend/21102021/fb4365c6-3e90-48cd-8416-97c9cafd526c.png?operations=fit(770:)\"\n gallery: \"smp-image-api-integration/smp.frontend/21102021/fb4365c6-3e90-48cd-8416-97c9cafd526c.png?operations=fit(1920:)\"\n original: \"smp-image-api-integration/smp.frontend/21102021/fb4365c6-3e90-48cd-8416-97c9cafd526c.png\"\n thumbnail: \"smp-image-api-integration/smp.frontend/21102021/fb4365c6-3e90-48cd-8416-97c9cafd526c.png?operations=autocrop(256:256)\"\n }\n }\n}","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":3},"content":[{"text":"4. Post the image object to the Content API","type":"text"}]},{"type":"codeBlock","attrs":{"language":"json"},"content":[{"text":"End-point: https://content.api.sportal365.com/images\nRequest Type: POST\nHeaders: \n{\n \"Authorization\": \"Bearer \",\n \"Project\": \"\"\n}\nRequest body:\n {\n \"description\": \"string\",\n \"urls\": {\n \"uploaded\": {\n \"embed\": \"string\",\n \"gallery\": \"string\",\n \"original\": \"string\",\n \"thumbnail\": \"string\"\n }\n }\n}","type":"text"}]},{"type":"paragraph","content":[{"type":"hardBreak"},{"text":"After finishing these step you have successfully uploaded and stored an image in the Content API system","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Getting an image","type":"text"}]},{"type":"codeBlock","attrs":{"language":"json"},"content":[{"text":"End-point: https://content.api.sportal365.com/images/\nRequest Type: GET\nHeaders: \n{\n \"Authorization\": \"Bearer \",\n \"Project\": \"\"\n}\n","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Retrieving a list of images","type":"text"}]},{"type":"paragraph","content":[{"text":"To get a list images the following request must be made:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"json"},"content":[{"text":"End-point: /images\nRequest Type: GET\nHeaders: \n{\n \"Authorization\": \"Bearer \",\n \"Project\": \"\"\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"The image listing endpoint supports pagination. There are additional parameters that can be used:","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Parameters","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"limit","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Description","type":"text","marks":[{"type":"strong"}]},{"text":": Controls how many images will be returned per page","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Values:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Maximum value: 200","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Default value: 20","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Behaviour: ","type":"text","marks":[{"type":"strong"}]},{"text":"Affects how many pages are generated. ","type":"text"},{"type":"hardBreak"},{"text":"Example: If there are 60 images and the limit is set to 10, this will generate 6 pages of images.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Request:","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","content":[{"text":"End-point: /images?limit=10","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"page","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Description: ","type":"text","marks":[{"type":"strong"}]},{"text":"Controls which images page will be retrieved","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Values:","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Behaviours: ","type":"text","marks":[{"type":"strong"}]},{"text":"Affected by the “limit“ parameter","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Request","type":"text","marks":[{"type":"strong"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Without “limit“ parameter","type":"text"}]},{"type":"codeBlock","content":[{"text":"End-point: /images?page=2","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"With “limit“ parameter","type":"text"}]},{"type":"codeBlock","content":[{"text":"End-point: /images?limit=10&page=2","type":"text"}]}]}]}]}]}]}]}],"version":1}

Browser not supported