{"id":"69cc38661336a0a86b92f843","title":"In Line","path":"how-to/committee/images/in-line","contentMarkdown":"# In-line Images\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/6fe4217f-6a09-4f28-ba07-ddea051e82d5.jpeg)\n\nIn-line images appear within a text column, either above or below the text content. Rather than being part of a separate image album or carousel, they are embedded directly into your page structure — making them ideal for illustrations, screenshots, logos, or any visual that supports the surrounding text.\n\nThe image above is an example of an in-line image. This is what it looks like when you are in site edit mode — you can see the image, the text editor, the **Text After Image** checkbox, the **Image Source** field, and other settings such as **Alt Text**, **Border Radius**, **Width**, and **Access** level.\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/27b8c512-f514-41a4-8013-b40d0d91d539.png)\n\n## Before You Start\nThis article assumes you are familiar with the basics of editing page content. If you haven't already, read these articles first:\n\n* [Page Structure](https://ngx-ramblers.org.uk/how-to/committee/editing-content/page-structure) — understanding rows, columns, and the 12-column grid\n* [Editing Existing Content](https://ngx-ramblers.org.uk/how-to/committee/editing-content/existing-pages) — how to enter site edit mode and save changes\n* [Column Resizer](https://ngx-ramblers.org.uk/how-to/committee/editing-content/column-resizer) — adjusting column widths visually\n* [Cropping And Resizing Images](https://ngx-ramblers.org.uk/how-to/committee/images/albums/cropping-and-resizing-images) — the image cropper tool (also used for in-line images)\n\n## What Is an In-line Image?\nEvery column in a text row has an optional **Image Source** field. When you set this field, a single image appears within that column, either above or below the text content.\n\nThis is different from **album images**, where you have a collection of images that can be cycled through in a carousel or viewed in a gallery. An in-line image is a single image embedded directly into the page structure.\n\nAn in-line image is useful for:\n* **Introductory images** at the top of a page or section, just below the top-level title\n* **Screenshots** illustrating a step-by-step guide\n* **Logos** or **icons** displayed with descriptive text\n* **Photos** that support a specific paragraph of content\n\n## Adding an Image to a Column\n1. Enter **Site Edit Mode** (toggle the Site Edit switch in the top navigation bar)\n2. Find the text row and column where you want to add an image\n3. Click the **Edit** button on the column to open the column editor\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/77356239-45d5-490f-a156-3fbf5463061c.png)\n\n4. Look for the **Image Actions** dropdown\n5. Click **Add Image** from the dropdown (this option appears when the column has no image yet)\n\n6. You can provide the image in several ways:\n * **Type or paste a URL** directly into the Image Source field\n * **Upload from your computer** using the image editor\n * **Paste from your clipboard** (see the tip below)\n7. Once the image is set, the **Image Cropper** will appear so you can adjust the crop area\n8. Click **Apply** to confirm your crop, then **Save** the page\n\n## Paste an Image from Your Clipboard\nThis is one of the most useful features and it is easy to overlook. Rather than saving an image to a file and then uploading it, you can **paste an image directly from your clipboard** into the Image Source field.\n\n### How it works\n1. **Copy an image to your clipboard** — for example:\n * Take a screenshot (on Mac: **Cmd+Shift+4**, on Windows: **Win+Shift+S**)\n * Right-click an image in your browser and choose **Copy Image**\n * Copy an image from any application (Word, PowerPoint, photo editor, etc.)\n2. **Click into the Image Source field** in the column editor\n3. **Press Ctrl+V** (or **Cmd+V** on Mac) to paste\n4. The image is automatically detected, converted, and the **Image Cropper** opens so you can adjust it\n\nAfter pasting, the **Image Cropper** opens immediately so you can crop the image down before saving — this is useful because the image on your clipboard may be larger than you need.\n\nThis is by far the quickest way to add screenshots or illustrations to your page. There is no need to save to a file first — just copy, click, and paste.\n\n**Important:** Unlike album images where you work on multiple images and save them all as a batch at the end, in-line images are **saved individually in real time** — each image is uploaded and saved as soon as you confirm it.\n\n## Image Position: Before or After Text\nEach column has a **Text After Image** checkbox that controls the order of the image and text within the column:\n\n* **Text After Image ticked** — the image appears **first**, with the text below it. Use this for introductory images or when the image is the main focus.\n* **Text After Image unticked** (default) — the text appears **first**, with the image below it. Use this when a heading or caption should appear above a screenshot or illustration.\n\nExperiment with this setting to see which layout works best for your content.\n\n## Image Settings\nOnce an image is added to a column, several settings are available to fine-tune its appearance:\n\n### Border Radius\nThe **Image Border Radius** field controls how rounded the corners of the image appear. A value of **0** gives sharp corners, while higher values (e.g. **6** or **12**) give progressively more rounded corners. A value of 6 is a good default for most images.\n\n### Image Height\nThe **Height Resizer** control lets you drag to set the image display height, between **50** and **800** pixels. The default is **200px**. For introductory images you may want a larger value (e.g. 300–400), while for small illustrations a lower value may be more appropriate.\n\n### Alt Text\nThe **Alt Text** field provides a text description of the image for accessibility. Screen readers use this to describe the image to visually impaired users, and it also appears if the image fails to load. Keep it short and descriptive, e.g. \"Group photo at Seven Sisters\" rather than just \"photo\".\n\n### YouTube Video ID\nThe **YouTube Video ID** field allows you to embed a YouTube video in place of (or in addition to) an image. Simply paste a YouTube URL or enter the video ID directly and it will be converted automatically.\n\n### Cropping\nWhen you add or edit an image, the **Image Cropper** appears automatically. This is the same cropper used for album images — see [Cropping And Resizing Images](https://ngx-ramblers.org.uk/how-to/committee/images/albums/cropping-and-resizing-images) for full details. You can drag the crop area and resize it to focus on the part of the image that matters most.\n\n## Layout Tips\n### Side-by-side image and text\nTo place an image next to text (rather than above or below), use a **multi-column row**:\n1. Set the row to have **2 or more columns** (e.g. a 4-column image and an 8-column text)\n2. Add the image to one column and the text to the other\n3. Use the [Column Resizer](https://ngx-ramblers.org.uk/how-to/committee/editing-content/column-resizer) to drag the boundary between columns to get the proportions right\n\n### Full-width introductory image\nFor an introductory image that spans the full page width with text below it:\n1. Use a single **12-column** row\n2. Set the image in the **Image Source** field\n3. Tick **Text After Image** so the text appears below\n4. Increase the **Image Height** to suit (300–400px works well for introductory images)\n\n### Editing in narrow columns\nIf your column is narrow (6 or fewer grid units), the editor layout adjusts automatically to give you more space. You can also use the **Expand** button on a column to temporarily make it full width while editing, then collapse it back when you are done.\n\n## Replacing or Removing an Image\nTo change an existing in-line image, use the **Image Actions** dropdown on the column:\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/ac15cae4-3a38-4216-b111-e16c545d56d2.png)\n\n* **Edit image** — re-open the image cropper to adjust the crop without changing the image\n* **Replace image** — upload or paste a new image to replace the current one\n* **Remove image** — delete the image from the column entirely\n\nRemember to **Save** the page after making changes.\n\n## See Also\n* [Page Structure](https://ngx-ramblers.org.uk/how-to/committee/editing-content/page-structure) — understanding the 12-column grid system\n* [Page Row Types](https://ngx-ramblers.org.uk/how-to/committee/editing-content/page-row-types) — all the different row types available\n* [Column Resizer](https://ngx-ramblers.org.uk/how-to/committee/editing-content/column-resizer) — drag to resize columns visually\n* [Cropping And Resizing Images](https://ngx-ramblers.org.uk/how-to/committee/images/albums/cropping-and-resizing-images) — the image cropper in detail\n* [Uploading Images](https://ngx-ramblers.org.uk/how-to/committee/images/albums/uploading-images) — uploading images to albums\n* [Learning Markdown](https://ngx-ramblers.org.uk/how-to/committee/learning-markdown) — formatting text content","contentHtml":"

In-line Images

\n

\"\"

\n

In-line images appear within a text column, either above or below the text content. Rather than being part of a separate image album or carousel, they are embedded directly into your page structure — making them ideal for illustrations, screenshots, logos, or any visual that supports the surrounding text.

\n

The image above is an example of an in-line image. This is what it looks like when you are in site edit mode — you can see the image, the text editor, the Text After Image checkbox, the Image Source field, and other settings such as Alt Text, Border Radius, Width, and Access level.

\n

\"\"

\n

Before You Start

\n

This article assumes you are familiar with the basics of editing page content. If you haven't already, read these articles first:

\n\n

What Is an In-line Image?

\n

Every column in a text row has an optional Image Source field. When you set this field, a single image appears within that column, either above or below the text content.

\n

This is different from album images, where you have a collection of images that can be cycled through in a carousel or viewed in a gallery. An in-line image is a single image embedded directly into the page structure.

\n

An in-line image is useful for:

\n\n

Adding an Image to a Column

\n
    \n
  1. Enter Site Edit Mode (toggle the Site Edit switch in the top navigation bar)
    2. \n
  2. Find the text row and column where you want to add an image
    3. \n
  3. Click the Edit button on the column to open the column editor
    4. \n
\n

\"\"

\n
    \n

  1. Look for the Image Actions dropdown

    \n
    2. \n

  2. Click Add Image from the dropdown (this option appears when the column has no image yet)

    \n
    3. \n

  3. You can provide the image in several ways:

    \n\n
    4. \n

  4. Once the image is set, the Image Cropper will appear so you can adjust the crop area

    \n
    5. \n

  5. Click Apply to confirm your crop, then Save the page

    \n
    6. \n
\n

Paste an Image from Your Clipboard

\n

This is one of the most useful features and it is easy to overlook. Rather than saving an image to a file and then uploading it, you can paste an image directly from your clipboard into the Image Source field.

\n

How it works

\n
    \n
  1. Copy an image to your clipboard — for example:\n
    2. \n
  2. Click into the Image Source field in the column editor
    3. \n
  3. Press Ctrl+V (or Cmd+V on Mac) to paste
    4. \n
  4. The image is automatically detected, converted, and the Image Cropper opens so you can adjust it
    5. \n
\n

After pasting, the Image Cropper opens immediately so you can crop the image down before saving — this is useful because the image on your clipboard may be larger than you need.

\n

This is by far the quickest way to add screenshots or illustrations to your page. There is no need to save to a file first — just copy, click, and paste.

\n

Important: Unlike album images where you work on multiple images and save them all as a batch at the end, in-line images are saved individually in real time — each image is uploaded and saved as soon as you confirm it.

\n

Image Position: Before or After Text

\n

Each column has a Text After Image checkbox that controls the order of the image and text within the column:

\n\n

Experiment with this setting to see which layout works best for your content.

\n

Image Settings

\n

Once an image is added to a column, several settings are available to fine-tune its appearance:

\n

Border Radius

\n

The Image Border Radius field controls how rounded the corners of the image appear. A value of 0 gives sharp corners, while higher values (e.g. 6 or 12) give progressively more rounded corners. A value of 6 is a good default for most images.

\n

Image Height

\n

The Height Resizer control lets you drag to set the image display height, between 50 and 800 pixels. The default is 200px. For introductory images you may want a larger value (e.g. 300–400), while for small illustrations a lower value may be more appropriate.

\n

Alt Text

\n

The Alt Text field provides a text description of the image for accessibility. Screen readers use this to describe the image to visually impaired users, and it also appears if the image fails to load. Keep it short and descriptive, e.g. "Group photo at Seven Sisters" rather than just "photo".

\n

YouTube Video ID

\n

The YouTube Video ID field allows you to embed a YouTube video in place of (or in addition to) an image. Simply paste a YouTube URL or enter the video ID directly and it will be converted automatically.

\n

Cropping

\n

When you add or edit an image, the Image Cropper appears automatically. This is the same cropper used for album images — see Cropping And Resizing Images for full details. You can drag the crop area and resize it to focus on the part of the image that matters most.

\n

Layout Tips

\n

Side-by-side image and text

\n

To place an image next to text (rather than above or below), use a multi-column row:

\n
    \n
  1. Set the row to have 2 or more columns (e.g. a 4-column image and an 8-column text)
    2. \n
  2. Add the image to one column and the text to the other
    3. \n
  3. Use the Column Resizer to drag the boundary between columns to get the proportions right
    4. \n
\n

Full-width introductory image

\n

For an introductory image that spans the full page width with text below it:

\n
    \n
  1. Use a single 12-column row
    2. \n
  2. Set the image in the Image Source field
    3. \n
  3. Tick Text After Image so the text appears below
    4. \n
  4. Increase the Image Height to suit (300–400px works well for introductory images)
    5. \n
\n

Editing in narrow columns

\n

If your column is narrow (6 or fewer grid units), the editor layout adjusts automatically to give you more space. You can also use the Expand button on a column to temporarily make it full width while editing, then collapse it back when you are done.

\n

Replacing or Removing an Image

\n

To change an existing in-line image, use the Image Actions dropdown on the column:

\n

\"\"

\n\n

Remember to Save the page after making changes.

\n

See Also

\n\n"}