I recently received a comment asking about media tiles and what options there are to get a camera to better fit into a tile. I’ve been thinking about providing a few options, but I don’t want to overwhelm people with options – what are your thoughts on the following?
Two options that could help with getting media tiles to better fit are:
- Scaling Mode: change how the camera image fits in the tile (eg. fill, contain, cover).
- Position: change the alignment of the image (eg. top, middle, bottom)
Today, the scaling mode is ‘cover’ and the position is ‘middle’. The image is centered in the box and the aspect ratio is maintained (with the smallest dimension filling the tile and the larger dimension going over). For cameras that have timestamps on the top or bottom, sometimes this results in the timestamp being cut-off.
For demonstration purposes, I’ve manually added an orange border to the tile and the following shows how the media is bigger than the tile and would overflow out of the tile:
The current approach attempts to have the media cover the tile and centers the content. In this scenario, the main content is visible, but the top and bottom are slightly obscured:
Position (camera timestamps)
For example, if a timestamp was at the bottom of the camera and it wasn’t a big deal to trim the top of the image off a bit, you could use the default ‘cover’ setting and align ‘bottom’. Note: I could also make this a percentage, so you could choose how to vertically/horizontally position an image in the default cover scaling.
Alternatively, if you always just wanted the whole camera to fit into the box and you didn’t mind empty space in the tile, you could use ‘contain’.
And finally, a scaling setting of ‘fill’ would allow the image to stretch to fit the tile which would lead to the aspect ratio being off. For many cameras that are close enough to a 1x2 ratio (eg. 16:9), it would probably be minor enough that some people would prefer this.
What are your thoughts? Would the additional options be overwhelming or helpful? Any other thoughts on a better solution?