To insert an image or video into a text column, click the "INSERT MEDIA" button that appears between text blocks:
A panel will open, from which you can choose the type of media to add. Choose the "Image" or "Video" option:
Inline image
Inline images can be added in jpg, gif and png formats. Jpg format is recommended for photos or other images with many colours, while gif and png formats will often produce better results for logos and charts etc that use large areas of flat colour. There's no need to upload inline images wider than 900 pixels.
It's possible to upload different images for large and small screens (useful if the detail in your image will be unreadable on a small screen or would otherwise be better represented with a different image). If you only upload one image, it will be used for both large and small screens.
A caption that will display under the image can be added, as can alt-text that will describe the image for search engines and be read by screen-readers.The image(s) can also have a link applied.
After closing the media panel, it is possible to change the size, alignment, and shape of the inline image by choosing from the size and alignment buttons that appear when mousing over the block that contains the image:
Changing the image size.
Several styling options for inline images are also available by clicking the elipsis button to the right of the image. Options include changing the image shape and the appearance of its corners:
Changing image shape and corner style
Changing the shape of an image allows for it to be displayed as a square, circle, landscape-orientation rectangle, or portrait-orinetation rectangle, regardless of the image's natural shape.
The 'Corners' options enable the image to display with sharp/square corners, corners that are rounded to a small, medium, or large degree, or a 'custom' option that provides for manually setting the radius of each corner of the image individually.
Inline video
Video can be uploaded in any supported format and appear within text columns (it's also possible to add YouTube and other online video sources - see below).
To upload your video, after clicking the INSERT MEDIA button, choose the Video option from the resulting panel:
Click the default video and choose a replacement file from your computer, or drag a file from your computer over the default video to upload your own:
A still image will be auto-generated from the video you uploaded, and this will show to your readers before they play the video. You may also replace the auto-generated still image with your own uploaded still image.
It's possible to upload different videos for large and small screens (you may, for instance, have a tall video shown on small screens like phones, and a wide video for large screens). If you upload only one video, it will be used for both large and small screens.
A caption can be added for each video.
Videos will display with player controls for your readers.
Note that Shorthand does not compress the video files you upload, but recommends that you compress them such that they match your expectations of quality, while keeping file size low. For inline video, there's no need for the video to be uploaded wider than 900 pixels.
Other inline media types
YouTube video, SoundCloud clips, tweets, Facebook posts, and many other types of media can also be embedded within your story.
To do so, choose the "INSERT RICH EMBED" option from the menu bar that appears between text blocks:
The resulting Inline Media panel will be set to the "Rich Embed" option:
The panel allows for specifying the URL of a wide variety of online object types. Simply paste the URL of the object you wish to insert (for instance the URL of a YouTube clip, individual tweet, Pinterest item, thinglink object, etc).
Paste in the URL and you'll see a preview of the object in the form in which it will appear within the story.
While there are hundreds of different types of web objects that can be added in this way, they may not all be compatible with your story layout (some objects are formatted specifically for small or wide screens, for instance), so we recommend that after embedding an object, you thoroughly test a preview of your story on multiple devices and at multiple resolutions.
You can read more about Rich embeds here.
Foreground media or Media Over Media
Along with adding media between text paragraphs, some Shorthand plans allow for the addition of media objects in the foreground of Title and Text Over Media sections. The process for adding media in these locations is the same as the one outlined above.
Along with media, you can also add buttons, spacers, and dividers between text paragraphs. Users with access to developer tools can also embed HTML into text columns.