Add different image for portrait / tall screens
Title / Text Over Media section
The full-screen sections in Shorthand support displaying your images in both wide screens (also called landscape format) such as most desktop monitors and laptops, and tall or 'portrait' format such as phones.
By default, you only need to upload one image. When uploaded, we'll show you how it will appear on both wide and tall screens by cropping to the middle of the image. If a key part of your image is missing when it's cropped to the middle, you can choose to have a different part set as the focal point for the crop. See setting focal points here. In this way you can ensure that, for instance, someone's face isn't cut out of the image on a narrow screen, even if the face is on the extreme left or right of the image.
In some situations it can be beneficial to have completely different images show in each of the portrait and landscape orientations, and that's easy to achieve, too.
The example below shows the editor media panel with a picture of two lions. In this instance, a default middle-crop of the wide image of lions wouldn't be suitable on a tall phone screen as neither lion is near the centre of the image. In this instance, a focal point other than the middle could be chosen for the tall-screen representation, or, as shown, a different image uploaded specifically for tall screens.
When you generate a preview of the story you can resize your browser or view the preview on a phone to see the different images display.
Reveal / Background Scrollmation sections
When editing Reveal and Background Scrollmation sections, you are shown a portrait and landscape thumbnail-sized previews of each image in the section.
To edit the tall/portrait representations, simply click on the thumbnail image to open the media panel. Within the panel you can choose an alternate focal-point for cropping, or upload a different image.
Remember the recommended size for a portrait image, and refer to our safe area guide for portrait images to avoid losing any detail at the edges if the image gets cropped on different sized portrait screens.