{"id":"653ba3c11a71940018e2b9ee","title":"Social Events","path":"how-to/committee/images/social-events","contentMarkdown":"## Exiting  Edit Mode\n\nOnce you've finished editing your image there are two possible options you can take:\n\n- Choose **quit** to undo your changes and not save them to the website.  \n- Choose **save** to upload the cropped/resized image to the website and automatically link the saved image to the content you are working on. If you are editing an existing image, the website will be overwritten with your changes, so be sure this is what you want to do!\n\nOnce you've clicked the **edit image** button, an image editor will temporarily be inserted into the place you are working as can be seen on the right. Within this editor, you have the ability to: \n- Add a new image. You can do this either by:\n   - Clicking the **Choose File** button.\n  - Or dragging a file into **Or drop file here** zone with the dotted line around it. You can either drag an image directly from your photo program, or from the file system on your computer.\n- The current image will be loaded into the image editor.\n- You can replace an existing image with a new one by following the steps above.\n- Rotate, flip or zoom the image if it's the wrong orientation or zoom setting. \n- Crop the image to a different size by either:\n   - Dragging the resizing handles on the image itself.\n   - Choosing a preset from the Aspect Ratio dropdown below the image. Aspect ratio fixes the relationship between the width and the height of the image. For instance, the website home page images need to be 900 wide x 300 high to look right. Default will be _Free selection_ but there are a number of common presets available. \n- Choose how large the image will be when it's eventually saved. This is important to get right because images exported from modern phones can be several megabytes in size and this could slow down how quickly the website page displays. The file size can be chosen by dragging the horizontal slider left (smaller) or right (larger). A good size to aim for is no more than 250kb.\n- Note that when you change the cropping or file compression, you will immediately be able to preview how the image will look in the original image that you are editing. No changes are saved at this point so you can experiment with the \"perfect\" crop or zoom settings without fear of overwriting anything permanently.  \n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/69335503-e664-4428-94e5-673a1f86f7c4.jpg)\n\n# Editing Images\n\nAn important feature of [ngx-ramblers](https://www.ngx-ramblers.org.uk) is the ability for new pages to be added to the site dynamically.  Pages can contain both text and images, and the site has the ability to  add, crop and resize images at the same time that content is being created. [ngx-ramblers](https://www.ngx-ramblers.org.uk) has a built-in editor to manage all image data for the site the same way, on the [Home page](https://ngx-ramblers.org.uk/image-editor/imagesHome), [Social page](https://ngx-ramblers.org.uk/image-editor/imagesSocialEvents) carousels, [Social Event](https://ngx-ramblers.org.uk/social) thumbnails, Action buttons on the [Walks](https://ngx-ramblers.org.uk/walks) and [Committee](https://ngx-ramblers.org.uk/committee) pages and all of the images in the [How-to articles](https://ngx-ramblers.org.uk/how-to) (e.g. what you are reading now). \n\nChoose the options below to find out more about each area.\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/d3ad6349-698e-4c28-89fc-d5d10c1675e1.jpg)","contentHtml":"<h2>Exiting  Edit Mode</h2>\n<p>Once you&#39;ve finished editing your image there are two possible options you can take:</p>\n<ul>\n<li>Choose <strong>quit</strong> to undo your changes and not save them to the website.  </li>\n<li>Choose <strong>save</strong> to upload the cropped/resized image to the website and automatically link the saved image to the content you are working on. If you are editing an existing image, the website will be overwritten with your changes, so be sure this is what you want to do!</li>\n</ul>\n<p>Once you&#39;ve clicked the <strong>edit image</strong> button, an image editor will temporarily be inserted into the place you are working as can be seen on the right. Within this editor, you have the ability to: </p>\n<ul>\n<li>Add a new image. You can do this either by:<ul>\n<li>Clicking the <strong>Choose File</strong> button.</li>\n<li>Or dragging a file into <strong>Or drop file here</strong> zone with the dotted line around it. You can either drag an image directly from your photo program, or from the file system on your computer.</li>\n</ul>\n</li>\n<li>The current image will be loaded into the image editor.</li>\n<li>You can replace an existing image with a new one by following the steps above.</li>\n<li>Rotate, flip or zoom the image if it&#39;s the wrong orientation or zoom setting. </li>\n<li>Crop the image to a different size by either:<ul>\n<li>Dragging the resizing handles on the image itself.</li>\n<li>Choosing a preset from the Aspect Ratio dropdown below the image. Aspect ratio fixes the relationship between the width and the height of the image. For instance, the website home page images need to be 900 wide x 300 high to look right. Default will be <em>Free selection</em> but there are a number of common presets available.</li>\n</ul>\n</li>\n<li>Choose how large the image will be when it&#39;s eventually saved. This is important to get right because images exported from modern phones can be several megabytes in size and this could slow down how quickly the website page displays. The file size can be chosen by dragging the horizontal slider left (smaller) or right (larger). A good size to aim for is no more than 250kb.</li>\n<li>Note that when you change the cropping or file compression, you will immediately be able to preview how the image will look in the original image that you are editing. No changes are saved at this point so you can experiment with the &quot;perfect&quot; crop or zoom settings without fear of overwriting anything permanently.</li>\n</ul>\n<p><img src=\"https://ngx-ramblers.org.uk/api/aws/s3/site-content/69335503-e664-4428-94e5-673a1f86f7c4.jpg\" alt=\"\"></p>\n<h1>Editing Images</h1>\n<p>An important feature of <a href=\"https://www.ngx-ramblers.org.uk\">ngx-ramblers</a> is the ability for new pages to be added to the site dynamically.  Pages can contain both text and images, and the site has the ability to  add, crop and resize images at the same time that content is being created. <a href=\"https://www.ngx-ramblers.org.uk\">ngx-ramblers</a> has a built-in editor to manage all image data for the site the same way, on the <a href=\"https://ngx-ramblers.org.uk/image-editor/imagesHome\">Home page</a>, <a href=\"https://ngx-ramblers.org.uk/image-editor/imagesSocialEvents\">Social page</a> carousels, <a href=\"https://ngx-ramblers.org.uk/social\">Social Event</a> thumbnails, Action buttons on the <a href=\"https://ngx-ramblers.org.uk/walks\">Walks</a> and <a href=\"https://ngx-ramblers.org.uk/committee\">Committee</a> pages and all of the images in the <a href=\"https://ngx-ramblers.org.uk/how-to\">How-to articles</a> (e.g. what you are reading now). </p>\n<p>Choose the options below to find out more about each area.</p>\n<p><img src=\"https://ngx-ramblers.org.uk/api/aws/s3/site-content/d3ad6349-698e-4c28-89fc-d5d10c1675e1.jpg\" alt=\"\"></p>\n"}