{"id":"66623c7660d646154ff3af56","title":"Editing Album Elements","path":"how-to/committee/images/albums/editing-album-elements","contentMarkdown":"# Editing Album Elements\nThis page explains the various album elements that affect the album appearance broken down into the following sections: \n* How images are selected for an album\n* Album Settings\n* Titles and Event Linking\n* Cover Image and Introductory Text \n* Pre-Album text\n\nThe image below shows the different album elements and these are now explained in the remaing sections below. To make any changes to album elements, 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\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/d50b8b80-2f72-4e41-9d73-a0f96584a2bf.jpg?1718759698272)\n\n## How images are selected for an album\n* On a page that contains the album you want to edit, Toggle **edit site** from the website header, the page content will then be put into edit mode.\n* You should be able to now see the album in edit mode with a **Row Type** of Album as shown below:\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/71769410-4d37-4b2a-b22f-c63d8b575542.jpg)\n\n* It's important to realise that the images for an album are not stored in the album itself. The album stores a reference to a list of images by means of the **Album Name** dropdown to the right of the **Row Type** dropdown at the top of the album.\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/ed0d60a8-fe0e-4564-96be-9563d3310142.jpg)\n\n* In the screenshot above, you can see a number of existing albums that can be selected from the **Album Name** dropdown. Choosing a different value from this dropdown will populate the album with images from that album instead.\n* Because of the linking between the album and the album name, it's quite possible to have more than one album on your site, referencing the same album name, but formatting the images differently.\n* If you want to create a completely new image list for the current album, you can do this by clicking on the green button to the right of the dropdown labelled **new**. The dropdown then changes to an input field that expands to the remaining size of the row as shown below:\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/5aec72f0-edb9-4593-863a-152914c1b183.jpg)\n\n* This input field autocompletes any existing albums based on how much you've typed into the field, but you are free to type any value in here. If a completely new value is entered, this means that you will be initialising a new image list from scratch, rather than selecting images from an existing one.\n* If you decide that you'd rather select images from an existing image list again, click the **existing** button to the right of the input field and the dropdown will be displayed again.\n* Once, you've made the selection of images from the right album name, you can then edit these images as explained in the **Album Settings** section below.\n\n## Album Settings\n* This is the first tab that appears when you first put the album into edit mode.  Below is a typical screenshot of this tab:\n\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/5387cc28-7e88-4fb6-9a07-dd45b5d7dead.jpg)\n\n* The **Album Settings** tab contains a preview of the Gallery itself which will be displaying images from the **Album Name** dropdown list at the top of the Row. \nDepending on whether the album type is [Carousel](https://ngx-ramblers.org.uk/how-to/committee/images/albums/carousel), [Gallery](https://ngx-ramblers.org.uk/how-to/committee/images/albums/gallery) or [Grid](https://ngx-ramblers.org.uk/how-to/committee/images/albums/grid), the options will be different. However the screenshot above shows the  [Gallery](https://ngx-ramblers.org.uk/how-to/committee/images/albums/gallery) view which allows the following settings to be controlled:\n  * **Album View** - can be [Carousel](https://ngx-ramblers.org.uk/how-to/committee/images/albums/carousel), [Gallery](https://ngx-ramblers.org.uk/how-to/committee/images/albums/gallery) or [Grid](https://ngx-ramblers.org.uk/how-to/committee/images/albums/grid).\n   * **Thumb position** - can be Top, Right Bottom, Left and controls the position of the thumbnail selector.\n   * **Slide interval in seconds** - the speed at which slides automatically cycle to the next one. If value is zero no cycling occurs.\n   * **Carousel Height** - the height in pixels that the carousel will the displayed at. A good range of values for this is between 350 and 400.\n* Below the Album settings is a preview of the Gallery itself which will be displaying images from the **Album Name** dropdown list at the top of the Row.\n* The remaining button of interest in this tab is the labelled **Edit Images in album >**. Clicking this allows you to add or edit images which is explained in more detail in [uploading images](https://ngx-ramblers.org.uk/how-to/committee/images/albums/uploading-images).\n\n## Titles and Event Linking\nThe Titles and Event Linking elements allow a **Title** and **Subtitle** to be displayed at the top of the page, optionally with an automatic link created to an existing event. \n* If the **Show Titles on this page** checkbox is checked, this means that the title will be displayed in a _Heading 1_ font at the top of the page and the Album Subtitle will be displayed below it in a  _Heading 2_ font. If the checkbox is not checked, the titles if defined will not be displayed on the current page, but will be used to populate the album index data if this album is referred to in any album indexes.\n* The **Link to Event Type** dropdown allows an automatic link to be created which will be rendered as the **Subtitle**. By default the **Event Type** value will be **Walk** but **Social Event** can also be selected. \n* To the right of the **Event Type** dropdown are **Walks From** and **Walks To** date selectors which provide a date range for populating the **Link to Walk** dropdown (these will be labelled as **Social Event** if that event type has been selected in the prior step):   \n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/9728c78b-8d91-48bb-ae57-c1be59aa254e.jpg)\n\n* If an event link has not yet been created, click  the **Link to Walk** dropdown and a list of events within the date range you have selected will be displayed:\n \n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/5573eb3f-99ce-45dc-9b48-a704fd5e2ef8.jpg)\n\n*  In the event select field, you can type in a partial value to filter the list. \n* If an event has already been selected and you want to choose another or remove the link completely, click the clear button on the right of the event dropdown:\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/8ee1ca5e-ef33-4b4e-8205-926287fc5e9c.jpg)\n\n* Once you've found the event that relates to the current album, click it and the link will be automatically populated with a link preview shown alongside it:\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/66cbc7a9-a46b-4a2d-aaa1-df50d975d463.jpg)\n\n* If you now toggle **site edit** from the header, you will see the album title and subtitle displayed at the top of the page:\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/4feb9183-38c3-430a-998b-8dce79522e93.jpg)\n\n## Cover Image and Introductory Text \nThe Cover Image and Introductory Text tab allows the elements that sit between the headings and the gallery to be configured. Below is a screenshot of what a fully populated section looks like:\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/4dff0601-747a-405c-9a45-00719ab1ef68.jpg)\n\n* The **Show Cover Image and introductory text on this page** checkbox turns on or off this section. If not checked and the Cover image has been selected, it's used as the image when this album appears in an album index.\n * **Introductory Text** is a markdown enabled field that allows you to provide an overview of the photos in this album \n* Specifying a value for **Cover Image Height** in pixels, allows the cover image if selected in the album images to be sized independently to the height in the album. A value of 300-400 is often suitable but adjust to suit the particular image you have chosen for the cover. \n* Specifying a value for **Border Radius** allows the cover image to have rounded corners. A value of 6 will match it well with the corners of the gallery below.\n\n\n## Pre-Album text\nThis section is inserted between the cover page and the gallery. A screenshot is shown below:\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/392eb6f2-82bd-4d16-a185-ebd573eb73fb.jpg)\n\n* The **Show pre-album text on this page** checkbox turns on or off this section. \n * **Pre Album Text** is a markdown enabled field that allows you to provide some text in between the cover page and the album.\n","contentHtml":"<h1>Editing Album Elements</h1>\n<p>This page explains the various album elements that affect the album appearance broken down into the following sections: </p>\n<ul>\n<li>How images are selected for an album</li>\n<li>Album Settings</li>\n<li>Titles and Event Linking</li>\n<li>Cover Image and Introductory Text </li>\n<li>Pre-Album text</li>\n</ul>\n<p>The image below shows the different album elements and these are now explained in the remaing sections below. To make any changes to album elements, you need to be logged into the site as an administrator. If you haven&#39;t done that yet, <a href=\"https://ngx-ramblers.org.uk/how-to/committee/logging-in\">follow this guide</a>.  </p>\n<p><img src=\"https://ngx-ramblers.org.uk/api/aws/s3/site-content/d50b8b80-2f72-4e41-9d73-a0f96584a2bf.jpg?1718759698272\" alt=\"\"></p>\n<h2>How images are selected for an album</h2>\n<ul>\n<li>On a page that contains the album you want to edit, Toggle <strong>edit site</strong> from the website header, the page content will then be put into edit mode.</li>\n<li>You should be able to now see the album in edit mode with a <strong>Row Type</strong> of Album as shown below:</li>\n</ul>\n<p><img src=\"https://ngx-ramblers.org.uk/api/aws/s3/site-content/71769410-4d37-4b2a-b22f-c63d8b575542.jpg\" alt=\"\"></p>\n<ul>\n<li>It&#39;s important to realise that the images for an album are not stored in the album itself. The album stores a reference to a list of images by means of the <strong>Album Name</strong> dropdown to the right of the <strong>Row Type</strong> dropdown at the top of the album.</li>\n</ul>\n<p><img src=\"https://ngx-ramblers.org.uk/api/aws/s3/site-content/ed0d60a8-fe0e-4564-96be-9563d3310142.jpg\" alt=\"\"></p>\n<ul>\n<li>In the screenshot above, you can see a number of existing albums that can be selected from the <strong>Album Name</strong> dropdown. Choosing a different value from this dropdown will populate the album with images from that album instead.</li>\n<li>Because of the linking between the album and the album name, it&#39;s quite possible to have more than one album on your site, referencing the same album name, but formatting the images differently.</li>\n<li>If you want to create a completely new image list for the current album, you can do this by clicking on the green button to the right of the dropdown labelled <strong>new</strong>. The dropdown then changes to an input field that expands to the remaining size of the row as shown below:</li>\n</ul>\n<p><img src=\"https://ngx-ramblers.org.uk/api/aws/s3/site-content/5aec72f0-edb9-4593-863a-152914c1b183.jpg\" alt=\"\"></p>\n<ul>\n<li>This input field autocompletes any existing albums based on how much you&#39;ve typed into the field, but you are free to type any value in here. If a completely new value is entered, this means that you will be initialising a new image list from scratch, rather than selecting images from an existing one.</li>\n<li>If you decide that you&#39;d rather select images from an existing image list again, click the <strong>existing</strong> button to the right of the input field and the dropdown will be displayed again.</li>\n<li>Once, you&#39;ve made the selection of images from the right album name, you can then edit these images as explained in the <strong>Album Settings</strong> section below.</li>\n</ul>\n<h2>Album Settings</h2>\n<ul>\n<li>This is the first tab that appears when you first put the album into edit mode.  Below is a typical screenshot of this tab:</li>\n</ul>\n<p><img src=\"https://ngx-ramblers.org.uk/api/aws/s3/site-content/5387cc28-7e88-4fb6-9a07-dd45b5d7dead.jpg\" alt=\"\"></p>\n<ul>\n<li>The <strong>Album Settings</strong> tab contains a preview of the Gallery itself which will be displaying images from the <strong>Album Name</strong> dropdown list at the top of the Row. \nDepending on whether the album type is <a href=\"https://ngx-ramblers.org.uk/how-to/committee/images/albums/carousel\">Carousel</a>, <a href=\"https://ngx-ramblers.org.uk/how-to/committee/images/albums/gallery\">Gallery</a> or <a href=\"https://ngx-ramblers.org.uk/how-to/committee/images/albums/grid\">Grid</a>, the options will be different. However the screenshot above shows the  <a href=\"https://ngx-ramblers.org.uk/how-to/committee/images/albums/gallery\">Gallery</a> view which allows the following settings to be controlled:<ul>\n<li><strong>Album View</strong> - can be <a href=\"https://ngx-ramblers.org.uk/how-to/committee/images/albums/carousel\">Carousel</a>, <a href=\"https://ngx-ramblers.org.uk/how-to/committee/images/albums/gallery\">Gallery</a> or <a href=\"https://ngx-ramblers.org.uk/how-to/committee/images/albums/grid\">Grid</a>.</li>\n<li><strong>Thumb position</strong> - can be Top, Right Bottom, Left and controls the position of the thumbnail selector.</li>\n<li><strong>Slide interval in seconds</strong> - the speed at which slides automatically cycle to the next one. If value is zero no cycling occurs.</li>\n<li><strong>Carousel Height</strong> - the height in pixels that the carousel will the displayed at. A good range of values for this is between 350 and 400.</li>\n</ul>\n</li>\n<li>Below the Album settings is a preview of the Gallery itself which will be displaying images from the <strong>Album Name</strong> dropdown list at the top of the Row.</li>\n<li>The remaining button of interest in this tab is the labelled <strong>Edit Images in album &gt;</strong>. Clicking this allows you to add or edit images which is explained in more detail in <a href=\"https://ngx-ramblers.org.uk/how-to/committee/images/albums/uploading-images\">uploading images</a>.</li>\n</ul>\n<h2>Titles and Event Linking</h2>\n<p>The Titles and Event Linking elements allow a <strong>Title</strong> and <strong>Subtitle</strong> to be displayed at the top of the page, optionally with an automatic link created to an existing event. </p>\n<ul>\n<li>If the <strong>Show Titles on this page</strong> checkbox is checked, this means that the title will be displayed in a <em>Heading 1</em> font at the top of the page and the Album Subtitle will be displayed below it in a  <em>Heading 2</em> font. If the checkbox is not checked, the titles if defined will not be displayed on the current page, but will be used to populate the album index data if this album is referred to in any album indexes.</li>\n<li>The <strong>Link to Event Type</strong> dropdown allows an automatic link to be created which will be rendered as the <strong>Subtitle</strong>. By default the <strong>Event Type</strong> value will be <strong>Walk</strong> but <strong>Social Event</strong> can also be selected. </li>\n<li>To the right of the <strong>Event Type</strong> dropdown are <strong>Walks From</strong> and <strong>Walks To</strong> date selectors which provide a date range for populating the <strong>Link to Walk</strong> dropdown (these will be labelled as <strong>Social Event</strong> if that event type has been selected in the prior step):</li>\n</ul>\n<p><img src=\"https://ngx-ramblers.org.uk/api/aws/s3/site-content/9728c78b-8d91-48bb-ae57-c1be59aa254e.jpg\" alt=\"\"></p>\n<ul>\n<li>If an event link has not yet been created, click  the <strong>Link to Walk</strong> dropdown and a list of events within the date range you have selected will be displayed:</li>\n</ul>\n<p><img src=\"https://ngx-ramblers.org.uk/api/aws/s3/site-content/5573eb3f-99ce-45dc-9b48-a704fd5e2ef8.jpg\" alt=\"\"></p>\n<ul>\n<li>In the event select field, you can type in a partial value to filter the list. </li>\n<li>If an event has already been selected and you want to choose another or remove the link completely, click the clear button on the right of the event dropdown:</li>\n</ul>\n<p><img src=\"https://ngx-ramblers.org.uk/api/aws/s3/site-content/8ee1ca5e-ef33-4b4e-8205-926287fc5e9c.jpg\" alt=\"\"></p>\n<ul>\n<li>Once you&#39;ve found the event that relates to the current album, click it and the link will be automatically populated with a link preview shown alongside it:</li>\n</ul>\n<p><img src=\"https://ngx-ramblers.org.uk/api/aws/s3/site-content/66cbc7a9-a46b-4a2d-aaa1-df50d975d463.jpg\" alt=\"\"></p>\n<ul>\n<li>If you now toggle <strong>site edit</strong> from the header, you will see the album title and subtitle displayed at the top of the page:</li>\n</ul>\n<p><img src=\"https://ngx-ramblers.org.uk/api/aws/s3/site-content/4feb9183-38c3-430a-998b-8dce79522e93.jpg\" alt=\"\"></p>\n<h2>Cover Image and Introductory Text</h2>\n<p>The Cover Image and Introductory Text tab allows the elements that sit between the headings and the gallery to be configured. Below is a screenshot of what a fully populated section looks like:</p>\n<p><img src=\"https://ngx-ramblers.org.uk/api/aws/s3/site-content/4dff0601-747a-405c-9a45-00719ab1ef68.jpg\" alt=\"\"></p>\n<ul>\n<li>The <strong>Show Cover Image and introductory text on this page</strong> checkbox turns on or off this section. If not checked and the Cover image has been selected, it&#39;s used as the image when this album appears in an album index.</li>\n<li><strong>Introductory Text</strong> is a markdown enabled field that allows you to provide an overview of the photos in this album </li>\n<li>Specifying a value for <strong>Cover Image Height</strong> in pixels, allows the cover image if selected in the album images to be sized independently to the height in the album. A value of 300-400 is often suitable but adjust to suit the particular image you have chosen for the cover. </li>\n<li>Specifying a value for <strong>Border Radius</strong> allows the cover image to have rounded corners. A value of 6 will match it well with the corners of the gallery below.</li>\n</ul>\n<h2>Pre-Album text</h2>\n<p>This section is inserted between the cover page and the gallery. A screenshot is shown below:</p>\n<p><img src=\"https://ngx-ramblers.org.uk/api/aws/s3/site-content/392eb6f2-82bd-4d16-a185-ebd573eb73fb.jpg\" alt=\"\"></p>\n<ul>\n<li>The <strong>Show pre-album text on this page</strong> checkbox turns on or off this section. </li>\n<li><strong>Pre Album Text</strong> is a markdown enabled field that allows you to provide some text in between the cover page and the album.</li>\n</ul>\n"}