Set a focal point to avoid having to upload unique images for tall screens, and to ensure that important parts of your picture don't get cropped out.

Your readers may access your Shorthand stories on wide or tall screens at various aspect-ratios.  

By default, when you upload a wide 'landscape' image, Shorthand automatically makes a tall 'portrait' crop of it for use on devices like phones.  The portrait crop is, by default, taken from the centre of your landscape image.  This automatic portrait crop can save you from having to upload a unique image for portrait screens.

The centre crop may suit if the most important parts of your image are in the middle, but sometimes key parts are closer to the edges.  

Take the following image for instance: 

A centre crop of the wide image results in a tall image where the animal's head can't be seen.

In the image upload media modal, you'll see the Wide Screen image and the automatic Tall Screen crop showing the centre.

Setting a focal point on the "Tall Screen" automatic crop enables you to identify another part of the image as important, and ensure that it shows when cropping needs to occur.   Here's how:

To the top right of the Tall Screen image in the media modal, you'll see a button labelled 'SET FOCUS'.

Click the SET FOCUS button and you'll see the full wide image with a grid overlayed on it.  Simply select the grid segment on or nearest to the most important part of your image and click 'DONE'.

You'll now see a different automatic "Tall Screen" crop of your image representing how your image will appear on a generic tall or 'phone' screen.

If neither the automatically generated portrait image or setting a different focus point results in a suitable portrait/tall image for your story, you still have the option of uploading a unique image for the portrait orientation.  

Please note:  Microsoft Internet Explorer and Edge browsers don't currently support image focus areas.  These browsers aren't installed on phones, so typically aren't a concern for portrait-oriented images, though if you need to ensure your stories render something other than centre-cropped versions of your landscape images when readers access your stories in a portrait window of a desktop IE or Edge browser, you may wish to consider uploading unique portrait images rather than relying on Focus Points.


Focus points for ensuring key parts of your images aren't cropped out on differently-sized devices

If your background image features important detail towards the edges, you may wish to consider setting a focus point on that area to ensure that it isn't cropped out when accessed on a device or screen with a different aspect ratio to the default Shorthand image sizes.  Doing so will over-ride the standard crop-to-centre that Shorthand uses if necessary to fill a screen with your image, and will instead crop in such a way as to ensure that the important part of your image stays on screen.

In the following image, the media modal indicates through the 'Approximate safe area' overlay that it is possible that the bird's head may be cut off on some devices if the image crops to the centre.

Setting a Focus on the image will ensure that the bird's head remains in view even when the image needs to be cropped.


As always, please test your story on as many devices as possible to ensure that you are happy with how it displays across various screen sizes.