Images

To upload an image to the CMS:

1. click on your images folder and select New content

2. you can drag and drop the image from your computer, or use the Select files button, then click Save

3. click on the edit button to change the title of your image and to add alt text

4. once you're finished, click Save and submit or Save and approve.

Here are the image sizes you will need to use across the website.

• Banners: 1280 x 330px.

• Cards/news and events thumbnails: 600 x 400px.

• Feature slide: 1000 x 750px.

• Image and caption: 800 x 600px.

• Image gallery: 800 x 400px.

• Large CTA content block:

  • large image: 800 x 600px

  • smaller image: 600 x 400px

  • background image: 1280 x 330px.

• Staff profile image: 400 x 400px.

To edit an image's details on the CMS, click on it and select Edit. This allows you to edit details like:

• title

• alt text

• caption

• version history

• comments.

Create resized or cropped versions of an image

Click on the image, then select Create variation. This will create a copy of the image that you can resize and crop in the Image Editor. Using the options on the right-hand side, you can make the following edits.

• Image size: this allows you to resize the image. Enter a value in the width or height field, then click anywhere else on the page and the image will automatically resize, maintaing it's shape.

• Crop options: to crop the image, click and drag a box across the image. You can also crop to specific dimensions using the width and height fields in the Crop Options on the right-hand side.

• Save options: once you're happy with your changes/crop selection:

  • select which image format you'd like to save the image as (JPEG, GIF, PNG)

  • use the quality field to reduce the quality and size of the image by entering a value from 1-100 (1 being the least quality, and 100 being full quality).

To find your new image in the CMS, click on the black dropdown triangle next to the image you're editing.

Click on the image icon in the WYSIWYG menu. Navigate to the folder that contains your image, click on it, then select the image and click Insert into web page.

You can also click and drag the image from its icon in the folder tree on the left-hand side and drop it onto your page. This will bring up a set of options for editing the image before adding it to the page. 

This component allows you to add an image with a caption to your page.

1. Drag the image and caption component from the content-components folder into the editing area.

2. Open the CMS folder containing your image, then drag your image into the green box at the top-left of the component. You can also insert the image using the image button in the WYSIWYG menu.

3. Enter your caption in the green box at the bottom left.

This component allows you to add multiple images to your page in a carousel-format.

1. Compile all of your gallery images into a single folder in the CMS. Enter the caption you want for your gallery in the Title fields on each image.

2. Drag and drop the component from the content-components folder onto the page.

3. Right click on the blue box and select, Webcontrol properties.

4. Click on the blue folder button and select your image gallery folder.

5. To change the height of the images displayed, enter a value into the second field, up to 600px.

6. See the Our Athena SWAN Story page for an example of this component.