{"id":"665c5d8892f59d5c0d3b79a6","title":"Carousel","path":"how-to/committee/images/albums/carousel","contentMarkdown":"# Editing Images in Carousels\n\n**Carousel** is one of the [Album views](https://ngx-ramblers.org.uk/how-to/committee/images/albums) available - the other two are [Gallery](https://ngx-ramblers.org.uk/how-to/committee/images/album/gallery) and [Grid](https://ngx-ramblers.org.uk/how-to/committee/images/album/grid). The Carousel is a good view to have for a home page given that image height can be limited as seen on [the National Ramblers landing page banners](https://www.ramblers.org.uk). Other useful features built into Carousel view that make it good for your website home page view are that images can be organised into Stories, each image can be linked to a walk or social event and have a title added along the bottom. Below is an example screenshot of a Carousel with these features annotated:\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/efd86506-ac5a-47b5-b136-fc2ca86f72c5.jpg)\n\nAnother advantage of the carousel is that recent images are selected by default based on the last 3 month's uploads, so the volume of images downloaded when you visit the page is limited. However it's no problem at all to have many hundreds of photos added to a single carousel's album, and to use [Tagging]() to quickly switch the view between different sets of images. If you want to see a carousel with around 600 images working, [have a look at this example](https://www.ekwg.co.uk/?story=summer-solstice).\n\n## Going into Edit Mode\n- In this guide we use a carousel located on the [home page](), as this is delivered by default when your site is first configured. \n- You need to be logged into the site as an administrator. If you havent done that yet, [follow this guide](https://ngx-ramblers.org.uk/how-to/committee/logging-in).  \n- If you now visit the [home page by clicking this link with the control key held down to open a new tab](), you should see content where row 1 has a row type of **Album** or **Carousel**.\n- Toggle **edit site** from the website header, the page content will then be put into edit mode as shown below:\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/4cf85845-7b3b-4c3f-a820-05684df28436.jpg)\n\n* In the above screenshot, you can see the **Row 1 Row Type** is **Album** and in the **Album Settings** tab, the **Album View** is **Carousel**. There are  a number of configuration options that affect the carousel as follows:\n* **Show Story Navigator**: checkbox to control whether the story links along the top are displayed.\n* **Show Indicators**: checkbox to control whether the pecked line is shown below the slide title (which can be clicked to go directly to an image). \n\n * **Show Image Dates**: does not apply to the carousel view - only affects grid view.\n  * **Show Image Title**: does not apply to the carousel view - only affects grid view.\n  * **Allow Switch View**: Allow the default view of carousel to be switched to Grid or Gallery by a toolbar that is displayed in the top right hand corner of the album row when the website is in presentation mode. Screenshot of this toolbar is shown to the right.\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/4efe0977-db8d-4812-81d0-47633e1cce94.jpg)\n\n* Below the Album settings is a preview of the carousel 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* 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](https://ngx-ramblers.org.uk/how-to/committee/images/albums/editing-album-elements)","contentHtml":"<h1>Editing Images in Carousels</h1>\n<p><strong>Carousel</strong> is one of the <a href=\"https://ngx-ramblers.org.uk/how-to/committee/images/albums\">Album views</a> available - the other two are <a href=\"https://ngx-ramblers.org.uk/how-to/committee/images/album/gallery\">Gallery</a> and <a href=\"https://ngx-ramblers.org.uk/how-to/committee/images/album/grid\">Grid</a>. The Carousel is a good view to have for a home page given that image height can be limited as seen on <a href=\"https://www.ramblers.org.uk\">the National Ramblers landing page banners</a>. Other useful features built into Carousel view that make it good for your website home page view are that images can be organised into Stories, each image can be linked to a walk or social event and have a title added along the bottom. Below is an example screenshot of a Carousel with these features annotated:</p>\n<p><img src=\"https://ngx-ramblers.org.uk/api/aws/s3/site-content/efd86506-ac5a-47b5-b136-fc2ca86f72c5.jpg\" alt=\"\"></p>\n<p>Another advantage of the carousel is that recent images are selected by default based on the last 3 month&#39;s uploads, so the volume of images downloaded when you visit the page is limited. However it&#39;s no problem at all to have many hundreds of photos added to a single carousel&#39;s album, and to use <a href=\"\">Tagging</a> to quickly switch the view between different sets of images. If you want to see a carousel with around 600 images working, <a href=\"https://www.ekwg.co.uk/?story=summer-solstice\">have a look at this example</a>.</p>\n<h2>Going into Edit Mode</h2>\n<ul>\n<li>In this guide we use a carousel located on the <a href=\"\">home page</a>, as this is delivered by default when your site is first configured. </li>\n<li>You need to be logged into the site as an administrator. If you havent done that yet, <a href=\"https://ngx-ramblers.org.uk/how-to/committee/logging-in\">follow this guide</a>.  </li>\n<li>If you now visit the <a href=\"\">home page by clicking this link with the control key held down to open a new tab</a>, you should see content where row 1 has a row type of <strong>Album</strong> or <strong>Carousel</strong>.</li>\n<li>Toggle <strong>edit site</strong> from the website header, the page content will then be put into edit mode as shown below:</li>\n</ul>\n<p><img src=\"https://ngx-ramblers.org.uk/api/aws/s3/site-content/4cf85845-7b3b-4c3f-a820-05684df28436.jpg\" alt=\"\"></p>\n<ul>\n<li><p>In the above screenshot, you can see the <strong>Row 1 Row Type</strong> is <strong>Album</strong> and in the <strong>Album Settings</strong> tab, the <strong>Album View</strong> is <strong>Carousel</strong>. There are  a number of configuration options that affect the carousel as follows:</p>\n</li>\n<li><p><strong>Show Story Navigator</strong>: checkbox to control whether the story links along the top are displayed.</p>\n</li>\n<li><p><strong>Show Indicators</strong>: checkbox to control whether the pecked line is shown below the slide title (which can be clicked to go directly to an image). </p>\n</li>\n<li><p><strong>Show Image Dates</strong>: does not apply to the carousel view - only affects grid view.</p>\n</li>\n<li><p><strong>Show Image Title</strong>: does not apply to the carousel view - only affects grid view.</p>\n</li>\n<li><p><strong>Allow Switch View</strong>: Allow the default view of carousel to be switched to Grid or Gallery by a toolbar that is displayed in the top right hand corner of the album row when the website is in presentation mode. Screenshot of this toolbar is shown to the right.</p>\n</li>\n</ul>\n<p><img src=\"https://ngx-ramblers.org.uk/api/aws/s3/site-content/4efe0977-db8d-4812-81d0-47633e1cce94.jpg\" alt=\"\"></p>\n<ul>\n<li>Below the Album settings is a preview of the carousel 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<li>For information on the other tabs <strong>Titles and Event Linking</strong>, <strong>Cover Image and Introductory Text</strong> and <strong>Pre-Album text</strong> see the separate page on <a href=\"https://ngx-ramblers.org.uk/how-to/committee/images/albums/editing-album-elements\">editing album elements</a></li>\n</ul>\n"}