{"id":"69e4da8e4d0935332cfbf4f2","title":"Backgrounds","path":"how-to/committee/images/albums/backgrounds","contentMarkdown":"# Editing Images as a Backgrounds Slideshow\n\n**Backgrounds** is one of the four [Album views](https://ngx-ramblers.org.uk/how-to/committee/images/albums) available - the others are [Carousel](https://ngx-ramblers.org.uk/how-to/committee/images/albums/carousel), [Gallery](https://ngx-ramblers.org.uk/how-to/committee/images/albums/gallery) and [Grid](https://ngx-ramblers.org.uk/how-to/committee/images/albums/grid). The Backgrounds view turns an album into a full-width slideshow where images cycle behind an overlay of title, intro text and (optionally) an event link and date. It is the view to choose when a page needs a single visually strong banner rather than a thumbnail grid - for example the landing of a Social Events page or a weekends-away summary. Above is an example of the Backgrounds view on the [East Kent Walking Group Social Events page](https://www.ekwg.co.uk/social).\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/cc4ea31d-ea91-45a2-a9ef-ebe2715c7112.jpeg)\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/ef14aeab-4ef4-4caa-96c2-96509b277294.jpeg)\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/2641f247-84f1-426e-803a-1bd81496a257.jpeg)\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/6f9dbd1e-1baf-46e3-8bed-cb45cf8cbf40.jpeg)\n\nUnlike the other three views, Backgrounds does not draw its images from a normal album. Instead it cycles through the site's **system-wide background images** (configured under **Admin > System Settings > Backgrounds**). On the album row you then pick which of those images should appear in this particular slideshow, and set how the overlay text is coloured and positioned on top of them.\n\n## Going into Edit Mode\n* You need to be logged into the site as an administrator. If you haven't done that yet, [follow this guide](https://ngx-ramblers.org.uk/how-to/committee/logging-in).\n* Visit the page that contains (or should contain) the backgrounds slideshow.\n* Toggle **edit site** from the website header. The album row opens with the **Album Settings** tab pre-selected, as shown below:\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/562d456a-13d0-4049-994d-a1ed15bd3705.png)\n\n*Album Settings tab when the album is configured as Backgrounds*\n\nWhen the Album View is set to **Backgrounds** the Album Settings tab shows a dedicated set of controls that only apply to this view:\n\n### Overlay text\n* **Title Colour** and **Text Colour** - colour swatches used for the overlay title and intro text respectively. Pick colours that stay readable over every image in the slideshow.\n* **Title Scale** - overall size multiplier for the title text. Scales run Small (1x), Medium (1.5x), Large (2x), Extra Large (3x), Huge (4x), Massive (5x), Giant (6x), Colossal (8x) and Logo (10x).\n* **Text Scale** - same idea for the intro text underneath the title: Small (0.75x), Normal (1x), Medium (1.25x), Large (1.5x), Extra Large (2x), Huge (2.5x).\n\n### Overlay position\n* **Padding Top** - pixels of space above the overlay text block (0-300).\n* **Padding Left** - pixels of space to the left of the overlay text block (0-300).\n* **Photo Offset** - percent by which the background photo is shifted so the focal subject doesn't sit under the text (0-400).\n\n### Event link and date\n* **Show Event Link** - show the linked event title (e.g. *Spring Blossoms & Lunch on the Creek*) as part of the overlay.\n* **Show Event Date** - show the event date next to or under the link.\n* **Event Scale** - size multiplier for the event link/date when either is shown (Small, Normal, Medium, Large, Extra Large).\n\n### Background images\n* **Background Images** - a multi-select dropdown listing every background image configured in **Admin > System Settings > Backgrounds**. Tick the ones that should appear in this slideshow. The counter next to the label (e.g. *Background Images (3 of 10 selected)*) tells you how many you have picked out of the pool available.\n\n## Linking the slideshow to an event\nThe **Show Event Link** and **Show Event Date** checkboxes only produce output if the album itself has been linked to an event. To do that:\n1. Switch to the **Titles and Event Linking** tab.\n2. Pick the **Link to Event Type** (e.g. *Social Events* or *Walks*).\n3. In the event selector that appears, choose the specific event. The **Album Subtitle** will auto-fill with the event title and the date will populate automatically.\n4. Return to the **Album Settings** tab and tick **Show Event Link** / **Show Event Date** to pull those values onto the slideshow overlay.\n\nIf no event is linked, the checkboxes are simply ignored.\n\n## Switching an existing album to Backgrounds\n1. Go into **edit site** mode.\n2. Scroll to the album row. Above the preview there is a small toolbar with four icons - **backgrounds**, **carousel**, **gallery**, **grid**.\n3. Click the **backgrounds** icon. The preview switches to a live slideshow and the Backgrounds-specific controls appear under the shared checkboxes.\n4. Choose which background images the slideshow should cycle through, tune the overlay colours and padding, then **Save**.\n\nFor information on the other tabs **Titles and Event Linking**, **Cover Image and Introductory Text** and **Pre-Album Text** see the separate page on [editing album elements](https://ngx-ramblers.org.uk/how-to/committee/images/albums/editing-album-elements).","contentHtml":"

Editing Images as a Backgrounds Slideshow

\n

Backgrounds is one of the four Album views available - the others are Carousel, Gallery and Grid. The Backgrounds view turns an album into a full-width slideshow where images cycle behind an overlay of title, intro text and (optionally) an event link and date. It is the view to choose when a page needs a single visually strong banner rather than a thumbnail grid - for example the landing of a Social Events page or a weekends-away summary. Above is an example of the Backgrounds view on the East Kent Walking Group Social Events page.

\n

\"\"

\n

\"\"

\n

\"\"

\n

\"\"

\n

Unlike the other three views, Backgrounds does not draw its images from a normal album. Instead it cycles through the site's system-wide background images (configured under Admin > System Settings > Backgrounds). On the album row you then pick which of those images should appear in this particular slideshow, and set how the overlay text is coloured and positioned on top of them.

\n

Going into Edit Mode

\n\n

\"\"

\n

Album Settings tab when the album is configured as Backgrounds

\n

When the Album View is set to Backgrounds the Album Settings tab shows a dedicated set of controls that only apply to this view:

\n

Overlay text

\n\n

Overlay position

\n\n

Event link and date

\n\n

Background images

\n\n

Linking the slideshow to an event

\n

The Show Event Link and Show Event Date checkboxes only produce output if the album itself has been linked to an event. To do that:

\n
    \n
  1. Switch to the Titles and Event Linking tab.
    2. \n
  2. Pick the Link to Event Type (e.g. Social Events or Walks).
    3. \n
  3. In the event selector that appears, choose the specific event. The Album Subtitle will auto-fill with the event title and the date will populate automatically.
    4. \n
  4. Return to the Album Settings tab and tick Show Event Link / Show Event Date to pull those values onto the slideshow overlay.
    5. \n
\n

If no event is linked, the checkboxes are simply ignored.

\n

Switching an existing album to Backgrounds

\n
    \n
  1. Go into edit site mode.
    2. \n
  2. Scroll to the album row. Above the preview there is a small toolbar with four icons - backgrounds, carousel, gallery, grid.
    3. \n
  3. Click the backgrounds icon. The preview switches to a live slideshow and the Backgrounds-specific controls appear under the shared checkboxes.
    4. \n
  4. Choose which background images the slideshow should cycle through, tune the overlay colours and padding, then Save.
    5. \n
\n

For information on the other tabs Titles and Event Linking, Cover Image and Introductory Text and Pre-Album Text see the separate page on editing album elements.

\n"}