Images and videos (in columns and posts)

Image and Video add a single picture or video inside a column, a blog post, or the reading area of an interior page. An Image shows one picture from your media library, with an optional caption and link. A Video plays a video from a site such as YouTube or Vimeo. Who can do this: anyone who can edit the page or post. The CSS tab is for Admins and Owners.

When to use it

• To put a photo beside text in a 2-column layout.
• To break up a long blog post with a picture or a video.
• To add a video tour or a how-to clip from your video channel.

For a full-width picture with text beside it, the Media + Text block section is the better choice. For many photos, use a Gallery.

Where you can add them

Image and Video aren’t in a page’s main Add Content menu, because a lone picture at full width rarely looks finished. You add them here:

• In a column of a Layout section: click the Layout on the page to select it. At its top, choose Edit Content (its other mode, Edit Columns, changes the columns). Then choose Add Content in a column and add Image or Video. See Side-by-side layouts.
• In a blog post’s body: Add Content → Write → Image or Video. See Blog.
• In the Content area of an interior page (a page made with the Default Page type): the narrower area below the page’s sections. In edit mode, scroll below the last section and choose its +. It’s also on the Basics tab of the page settings window (More Options → Edit in the edit bar).

Inside a Rich Text section, you can also add an image to the text itself: type / on an empty line and choose the image.

Add an image

1. Add an Image. It shows a placeholder picture until you choose one.
2. Select it and choose Edit.
3. In Image, choose a picture from your media library, or upload a new one.
4. Optionally, write a Caption. It shows under the picture.
5. Optionally, make the picture a link. In Link To…, choose a page or URL. For a web address, enter the URL.
6. Optionally, add a Link Title: a short note that pops up when a visitor points at the picture. To open the link in a new tab, tick Open link in new tab under Link Target.
7. Save your changes.

Crop and focus. Once a picture is chosen, Image Adjustments lets you crop it and set its focal point for this spot only. Alt text comes from the picture itself in your media library, in its Alt Text field. Write it once and it’s used wherever the picture appears. See The media library.

Add a video

1. Add a Video.
2. Select it and choose Edit.
3. Paste the video’s web address into Video URL. Copy it from the video’s page on YouTube, Vimeo or a similar video site.
4. Save your changes. The video player appears in place, sized to fit.

Until a video address is added, editors see a short note on the page asking for one. Visitors see nothing.

Looks you can make

A photo beside your story. Add a Layout with 2 columns. Put an Image in one and a Rich Text in the other, and link the photo to the page it talks about. A video in a post. In the post’s Body, add a Video between 2 Rich Text sections.

Good to know

• Write alt text for every picture in your media library. Screen readers read it out, and search engines use it too. Leave it empty only for a purely decorative picture.
• Videos start only when a visitor presses play, so they don’t distract anyone who prefers less motion.
• Columns reflow on phones. On a small screen, columns stack, so your image ends up above or below its text. Check it with device preview.
• Custom CSS. Each Image and Video has a CSS tab for its own custom styles. See Custom CSS.

Related