> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fetchski-attract.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Images and videos (in columns and posts)

> Place a single image or an embedded video in a column, a blog post or a page's reading area.

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.

![A two-column Layout on Parker's page as visitors see it: an Image (puppies in the play yard) with the caption "Our indoor play yard" on the left.](https://mintcdn.com/fetchski-attract-api/Nd5MQAxOTNHgiQxt/images/cms/guides/sections/images-and-videos/guides-sections-images-and-videos-overview-light.png?fit=max\&auto=format\&n=Nd5MQAxOTNHgiQxt\&q=85\&s=b7b3619a80ee767122ddc23d3d08cf66)

An image with a caption beside an embedded video.

## 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**](https://docs.fetchski-attract.com/guides/sections/media-text.md) section is the better choice. For many photos, use a [Gallery](https://docs.fetchski-attract.com/guides/sections/gallery.md).

## 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](https://docs.fetchski-attract.com/guides/build-pages/side-by-side-layouts.md).
* **In a blog post's body:** **Add Content** → **Write** → **Image** or **Video**. See [Blog](https://docs.fetchski-attract.com/guides/content/blog.md).
* **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.

![A Layout in Edit Content mode with a column's Add Content menu open, with the Image and Video tiles ringed.](https://mintcdn.com/fetchski-attract-api/QcMtbPjPXDGpHtJh/images/cms/guides/sections/images-and-videos/guides-sections-images-and-videos-column-menu-light.png?fit=max\&auto=format\&n=QcMtbPjPXDGpHtJh\&q=85\&s=7d4d206e4ec6e0dffd39085cc700db87)

Image and Video are offered inside columns.

## 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.

![The Image editor open beside the page: its tabs (Image, CSS) ringed, the chosen picture in Image, the Caption "Our indoor play yard" ringed, Link To... set to Page ringed, and the linked Services page below.](https://mintcdn.com/fetchski-attract-api/QcMtbPjPXDGpHtJh/images/cms/guides/sections/images-and-videos/guides-sections-images-and-videos-image-editor-light.png?fit=max\&auto=format\&n=QcMtbPjPXDGpHtJh\&q=85\&s=3afeb54fb00c229481860a940cbabc47)

Choose the picture, then add a caption or a link.

**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](https://docs.fetchski-attract.com/guides/media/media-library.md).

## 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.

> [!NOTE]
>
> The Video section plays videos hosted on a video site. To show a video you uploaded to your **Videos** library, use a section built for it, such as the [**Media + Text block**](https://docs.fetchski-attract.com/guides/sections/media-text.md) or a [Hero](https://docs.fetchski-attract.com/guides/sections/hero.md) background.

## Looks you can make

![A Layout with an Image on the left (a trainer with a puppy, linked to the Training page) and a Rich Text column on the right describing puppy classes.](https://mintcdn.com/fetchski-attract-api/Nd5MQAxOTNHgiQxt/images/cms/guides/sections/images-and-videos/guides-sections-images-and-videos-image-beside-text-light.png?fit=max\&auto=format\&n=Nd5MQAxOTNHgiQxt\&q=85\&s=70acc8401ebbdf902ea71f459f167dd2)

A linked photo beside your text.

**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 blog post body with 2 paragraphs, an embedded video, then another paragraph, all at reading width.](https://mintcdn.com/fetchski-attract-api/Nd5MQAxOTNHgiQxt/images/cms/guides/sections/images-and-videos/guides-sections-images-and-videos-post-video-light.png?fit=max\&auto=format\&n=Nd5MQAxOTNHgiQxt\&q=85\&s=b3513c26b1a72dc1544dca2c2ad7106e)

A video in the middle of a blog post.

**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](https://docs.fetchski-attract.com/guides/build-pages/preview-on-devices.md).
* **Custom CSS.** Each Image and Video has a **CSS** tab for its own custom styles. See [Custom CSS](https://docs.fetchski-attract.com/guides/site-design/custom-css.md).

## Related

> [card] [Side-by-side layouts](https://docs.fetchski-attract.com/guides/build-pages/side-by-side-layouts.md)
>
> build columns for your images and videos.

> [card] [The media library](https://docs.fetchski-attract.com/guides/media/media-library.md)
>
> upload pictures and write alt text.

> [card] [Media + Text block](https://docs.fetchski-attract.com/guides/sections/media-text.md)
>
> a designed full-width picture or video beside text.

> [card] [Rich Text](https://docs.fetchski-attract.com/guides/sections/rich-text.md)
>
> the text that sits beside them.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.