I have a fully automated integration with API to render videos in Shotstack but I don’t control or know the dimensions of the image assets I need to incorporate into the rendered video. I do know the size of the area in the rendered video which is a circle top layer through which the image is shown. I need to be able to resize the image being used to maintain aspect ratio and resize it to fit the smallest dimension (width or height) so it fits in the circle. I thought I might be able to do this with the HTML asset but I can’t seem to do it. How can I specify to resize the image to fit? If more info is needed, let’s say the circle diameter is 100px and the image has width of 150px and height of 200px, I would want the image to be resized to have a width of 100px and a proportionate height to maintain aspect ratio. This way as much of the image will be shown without a gap from behind the circle frame. As I mentioned, I won’t know the size or dimension of the images so it needs to be like an html object-fit: cover type solution. Is this possible to achieve?
You can use the media inspector API to get the dimensions of your image and use this information to resize your image.
Let’s say we have the following image (url) as per your example:
We can use the media inspector API to get the width and height:
GET https://api.shotstack.io/v1/probe/https%3A%2F%2Fdummyimage.com%2F150x200
{
"success": true,
"message": "ok",
"response": {
"metadata": {
"streams": [
{
...,
"width": 150,
"height": 200,
...
}
],
...
}
}
}
You can calculate the aspect ratio 150px / 200px = 0.75 and apply that to the preferred height:
100px / 0.75 = 133px. Note here that custom output sizes need to be round numbers - so use 134px.
You should now be able to resize the image by using sending the following POST request using the Edit API:
{
"timeline": {
"background": "#000000",
"tracks": [
{
"clips": [
{
"asset": {
"type": "image",
"src": "{{image}}"
},
"start": 0,
"length": 5,
"fit": "crop"
}
]
}
]
},
"output": {
"format": "jpg",
"size": {
"width": "{{width}}",
"height": "{{height}}"
}
}
}
You can then use this template to build the image you need to use:
POST https://api.shotstack.io/v1/render/template
{
"id": "f5493c17-d01f-445c-bb49-535fae65f219",
"merge": [
{
"find": "image",
"replace": "https://loremflickr.com/150/200"
},
{
"find": "width",
"replace": "100"
},
{
"find": "height",
"replace": "134"
}
]
}
How many credits will be consumed using the media inspector API per image inspected?
I understand the GET request portion. I’m not clear why there are then 2 more steps instead of just 1. My intent is to create a slideshow with transitions and zooms between multiple images but they all need to be the same size to work in the video output. Isn’t this just a 2-step process of getting the image data and then using it to create a video with all the images setting different width and heights for each image?
The media inspector API does not use any credits, it is free to use.
If I understand correctly, you are trying to size elements within the video to sit behind a circle overlay. The overlay is a rectangle with a transparent circle cut out of it which is 100px x 100px. The video itself and the overlay might be the full size of the video - for example 1280px x 720px.
Is that correct?
If this is correct then you don’t want to adjust the videos width and height, you need a away to resize the actual image relative to the size of the video and using scale.
If the above is correct let us know and we can look at the maths for you. It should be doable.
The Media Inspector API is free to use.
The approach above would provide you with most flexibility in terms of creating an image that suits your exact needs.
Instead of creating the image you could also use the scale property with fit set to none. This allows you to keep the original aspect ratio with a custom size within a larger viewport:
{
"timeline": {
"tracks": [
{
"clips": [
{
"asset": {
"type": "image",
"src": "https://loremflickr.com/150/200"
},
"start": 0,
"length": 5,
"fit": "none",
"scale": 0.6667
}
]
}
]
},
"output": {
"format": "jpg",
"size": {
"width": 1280,
"height": 720
}
}
}
I think what you’ve described is closer to what I am trying to describe and do. Currently, I’m producing these types of videos as you can see HERE with a custom template I’ve made and am using in Shotstack which is a video file for the coloured background and circles moving around and the large circle is actually transparent so the images I want to show inside can be seen at a layer further back. I’ve decided I want to create a different template for myself to have more images showing in other areas so the duration of the full video can be still nice and short but more of the images of a house listing can be shown. What I’m doing currently is using another API integration to process my images first to make them all the same dimension but I would like to eliminate the need for this step since I’m paying for that service and if I want to process more images, that cost will go up. If I can only use Shotstack to somehow use my video template so it can handle all different sized images and different ratios and resize the images to fit the smallest side, which may be the height or the width depending on the image, then that would be best. Some images may be landscape, others portrait, and they’ll definitely all be different dimensions. Cropping alone won’t work since we need to see as much of the image as possible without seeing the edges.
Yeah ok. It appears the media inspector API would provide you with the logic you need to cut out the other API. This will allow you to calculate the right values to reduce the dimensions of your image asset to the right proportion.
Generally setting fit to none gives you the most control over your assets.