Alongside text, images are likely to form a very significant part of the content that populates your site.
Before you add an image to a page, you’ll want to upload it to the file manager in the Admin Area of the site. This will allow the image to be used by you and any other administrators of the site.
Once you’re in Edit mode, you’ll want to click controls in the top left hand corner, in the blue bar. If you can’t see this blue bar, you either aren’t logged in or don’t have rights to edit this particular page.
Under controls you’ll see the option cms, hover over this then click content. You’ll now see a box that you can drop into any of the grey striped placeholders on your page template. Having done so, you’ll have access to a fairly standard What You See Is What You Get (WYSIWYG) editor.
Once you have this editor, one of the options you have is called image, clicking this button will allow you to search the file manager for the image you want. Choose the image you want, and it will now appear in the content block.
Image sizing and options
To change the size of the image, you’ll need to manually modify the height and width values. Most of the time, it will be most useful to have the following values.
This will ensure that the width of the image is always 100% the width of the placeholder that it sits in. This is beneficial because it means that, as the placeholder gets smaller on smaller screen sizes, the image will reduce in size as well, but retain the correct width-height ratio, so the image doesn’t end up being distorted on mobile or tablet devices. If you would like your image to be smaller than this, you can use a different percentage in the width field.
Files
Files should be similarly uploaded to the file manager before you wish to use them.
Uploading files to a particular content area is slightly different than uploading an image. The easiest way to do this is to add a link to your file, so it opens in a new tab. You can find more information about adding links on the hyperlinks page.
Top accessibility tips
Make sure that you include "alt text” on every image you upload to your site. Alternative text appears when an image does not load properly and will be read aloud to people using screen readers to access your site.
Alt text should provide a concise but detailed description of the image and is essential for making sure your site is as accessible as possible.