{"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\nThe photos in the slideshow come from the **same album image list** as Carousel, Gallery and Grid. You upload and manage them in the usual way on the album row. What is different is that Backgrounds also layers a second set of images behind those photos: the site's **system-wide background images** (configured under [**Admin > System Settings > Backgrounds**](https://ngx-ramblers.org.uk/admin/settings/system-settings?tab=backgrounds \"{{siteUrl}}\")).\n\nWhen the slideshow advances to the next album photo, it also advances to the next selected background. The two lists cycle independently, so a page with four album photos and three backgrounds will keep pairing them in turn. On the album row you pick which of the system backgrounds should take part, and you set how the overlay text is coloured and positioned on top.\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**](https://ngx-ramblers.org.uk/admin/settings/system-settings?tab=backgrounds \"{{siteUrl}}\"). Tick the ones that should cycle **behind** the album photos. 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. Leave this empty to use every system background.\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 of the album's own photos, with the selected system backgrounds cycling behind them, and the Backgrounds-specific controls appear under the shared checkboxes.\n4. Confirm the album already has the photos you want in the slideshow (add or reorder them as you would for any other album view). Then choose which system backgrounds should cycle behind those photos, tune the overlay colours and padding, and **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

The photos in the slideshow come from the same album image list as Carousel, Gallery and Grid. You upload and manage them in the usual way on the album row. What is different is that Backgrounds also layers a second set of images behind those photos: the site's system-wide background images (configured under Admin > System Settings > Backgrounds).

\n

When the slideshow advances to the next album photo, it also advances to the next selected background. The two lists cycle independently, so a page with four album photos and three backgrounds will keep pairing them in turn. On the album row you pick which of the system backgrounds should take part, and you set how the overlay text is coloured and positioned on top.

\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 of the album's own photos, with the selected system backgrounds cycling behind them, and the Backgrounds-specific controls appear under the shared checkboxes.
    4. \n
  4. Confirm the album already has the photos you want in the slideshow (add or reorder them as you would for any other album view). Then choose which system backgrounds should cycle behind those photos, tune the overlay colours and padding, and 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"}