{"id":"666233c660d646154ff3af45","title":"Uploading Images","path":"how-to/committee/images/albums/uploading-images","contentMarkdown":"# Uploading Images\n\n\n* The following steps explain adding one or more images to an existing album. If you want to find out about creating a new album, see [Creating a new Album](https://ngx-ramblers.org.uk/how-to/committee/images/albums/creating-a-new-album). \n* You need to be logged into the site as a [member with site edit privileges](https://ngx-ramblers.org.uk/how-to/committee/member-admin/member-privileges). If you havent done that yet, [follow this guide](https://ngx-ramblers.org.uk/how-to/committee/logging-in).  \n* Visit the page that contains the album you want to add new images to.\n* Toggle **edit site** from the website header.  The page content will then be put into edit mode where you can see and change any of the album elements. By default, the **Album Settings** tab is shown first as shown in the screenshot below:\n\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/552643bd-5fac-4f4e-b358-3adf0fe3252f.jpg)\n\n- In order to add more images, click the **Edit images in album** button (shown above highlighted in red).\n- The Album row now changes - the tabbed view of album elements temporarily disappears and is replaced with a list of editable images as displayed below:\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/3fe32e6e-e2b0-42ee-9d52-4d7031b9a70e.jpg)\n\n* This view is paginated to show a maximum of 10 images at a time. \n* In the example screenshot above,  there are a total of 16 images in the image list. There are yellow buttons that allow you to paginate forwards and backwards (e.g. page 1 shows the first 10, page 2 shows the remaining 6).\n* Adding new images can be done in 3 ways:\n* _Method 1:_ Towards the top of the Album Row is a row of green action buttons. Click the rightmost button labelled **Choose Files** and you will be presented with a file open dialog, which you use to navigate to the folder on your computer containing the images you want to add.\n\n*  _Method 2:_ You can multi-select files on a folder of your choice and drag them over the **Drop new files here to add them**  zone below the green buttons row. \n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/010fda25-32c2-49f6-ad73-6dedfa36f5ba.jpg)\n\n*  _Method 3:_  Depending on your computer, you could also drag multiple photos directly from your photo program onto this file drop zone as well as shown in the screenshot below:\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/31a2c520-e50b-4439-81b4-7ff01f4b1e96.jpg)\n\n* Drag and drop may not work on your own computer, so experiment with what works best for you.\n* If you are successful, you will see the status bar along the top change to reflect that **You have 5 unsaved images** - the ones that have been newly added, and these should be visible at the top of the list on page 1:\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/4f487b17-6fc1-412d-b2d7-d3fba19d4e06.jpg)\n\n* If you want to do cropping, resizing or tagging of images at this stage, see the separate [cropping and resizing images](https://ngx-ramblers.org.uk/how-to/committee/images/albums/cropping-and-resizing-images) or [tagging images](https://ngx-ramblers.org.uk/how-to/committee/images/albums/tagging-and-event-linking) articles.\n* Now can click **Save and Exit** and you will see a progress bar move across towards 100% as each image is saved:\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/267862ce-73bf-4b44-9d32-33e76ab713c1.jpg)\n\n* Once all files have been saved successfully, the image list should disappear and be replaced with the album edit view, with the new images showing in the preview:\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/2d655d64-5bd2-48ed-b535-f704345aa8a2.jpg)","contentHtml":"<h1>Uploading Images</h1>\n<ul>\n<li>The following steps explain adding one or more images to an existing album. If you want to find out about creating a new album, see <a href=\"https://ngx-ramblers.org.uk/how-to/committee/images/albums/creating-a-new-album\">Creating a new Album</a>. </li>\n<li>You need to be logged into the site as a <a href=\"https://ngx-ramblers.org.uk/how-to/committee/member-admin/member-privileges\">member with site edit privileges</a>. 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>Visit the page that contains the album you want to add new images to.</li>\n<li>Toggle <strong>edit site</strong> from the website header.  The page content will then be put into edit mode where you can see and change any of the album elements. By default, the <strong>Album Settings</strong> tab is shown first as shown in the screenshot below:</li>\n</ul>\n<p><img src=\"https://ngx-ramblers.org.uk/api/aws/s3/site-content/552643bd-5fac-4f4e-b358-3adf0fe3252f.jpg\" alt=\"\"></p>\n<ul>\n<li>In order to add more images, click the <strong>Edit images in album</strong> button (shown above highlighted in red).</li>\n<li>The Album row now changes - the tabbed view of album elements temporarily disappears and is replaced with a list of editable images as displayed below:</li>\n</ul>\n<p><img src=\"https://ngx-ramblers.org.uk/api/aws/s3/site-content/3fe32e6e-e2b0-42ee-9d52-4d7031b9a70e.jpg\" alt=\"\"></p>\n<ul>\n<li><p>This view is paginated to show a maximum of 10 images at a time. </p>\n</li>\n<li><p>In the example screenshot above,  there are a total of 16 images in the image list. There are yellow buttons that allow you to paginate forwards and backwards (e.g. page 1 shows the first 10, page 2 shows the remaining 6).</p>\n</li>\n<li><p>Adding new images can be done in 3 ways:</p>\n</li>\n<li><p><em>Method 1:</em> Towards the top of the Album Row is a row of green action buttons. Click the rightmost button labelled <strong>Choose Files</strong> and you will be presented with a file open dialog, which you use to navigate to the folder on your computer containing the images you want to add.</p>\n</li>\n<li><p><em>Method 2:</em> You can multi-select files on a folder of your choice and drag them over the <strong>Drop new files here to add them</strong>  zone below the green buttons row.</p>\n</li>\n</ul>\n<p><img src=\"https://ngx-ramblers.org.uk/api/aws/s3/site-content/010fda25-32c2-49f6-ad73-6dedfa36f5ba.jpg\" alt=\"\"></p>\n<ul>\n<li><em>Method 3:</em>  Depending on your computer, you could also drag multiple photos directly from your photo program onto this file drop zone as well as shown in the screenshot below:</li>\n</ul>\n<p><img src=\"https://ngx-ramblers.org.uk/api/aws/s3/site-content/31a2c520-e50b-4439-81b4-7ff01f4b1e96.jpg\" alt=\"\"></p>\n<ul>\n<li>Drag and drop may not work on your own computer, so experiment with what works best for you.</li>\n<li>If you are successful, you will see the status bar along the top change to reflect that <strong>You have 5 unsaved images</strong> - the ones that have been newly added, and these should be visible at the top of the list on page 1:</li>\n</ul>\n<p><img src=\"https://ngx-ramblers.org.uk/api/aws/s3/site-content/4f487b17-6fc1-412d-b2d7-d3fba19d4e06.jpg\" alt=\"\"></p>\n<ul>\n<li>If you want to do cropping, resizing or tagging of images at this stage, see the separate <a href=\"https://ngx-ramblers.org.uk/how-to/committee/images/albums/cropping-and-resizing-images\">cropping and resizing images</a> or <a href=\"https://ngx-ramblers.org.uk/how-to/committee/images/albums/tagging-and-event-linking\">tagging images</a> articles.</li>\n<li>Now can click <strong>Save and Exit</strong> and you will see a progress bar move across towards 100% as each image is saved:</li>\n</ul>\n<p><img src=\"https://ngx-ramblers.org.uk/api/aws/s3/site-content/267862ce-73bf-4b44-9d32-33e76ab713c1.jpg\" alt=\"\"></p>\n<ul>\n<li>Once all files have been saved successfully, the image list should disappear and be replaced with the album edit view, with the new images showing in the preview:</li>\n</ul>\n<p><img src=\"https://ngx-ramblers.org.uk/api/aws/s3/site-content/2d655d64-5bd2-48ed-b535-f704345aa8a2.jpg\" alt=\"\"></p>\n"}