This story is about enriching the article story with images. An image can be added to the story by clicking the add icon and selecting the image icon in the option bar. At this position the image will be inserted. The image can be changed, resized and cropped. Meta data can be added to the image.

PLEASE NOTE: Although the mockups appear in a new visual design please ignore the styling. Only focus on mechanics & functionality!

Add Image to the story, change image, delete image

1. Click add icon and select the image icon in the option bar.

2. A placeholder will be inserted.

3. Click on the placeholder or "select image" button and the asset chooser will pop up to choose an image (or drag & drop file to the placeholder area).

4. Once an image has been chosen the image and form fields for meta data are visible in the article story.

5. Click the "add" icon on the image.

6. The asset chooser re-opens and you can choose a new image.

7. Click the "delete" icon on the image.

8. The image is deleted and the placeholder will re-appear.

Resize & crop image

1. Click the "crop" icon on the image.

2. The edit image dialog opens and you can edit the image (crop, rotate, flip) as given with the Magnolia actions.

Edit meta data

1. Use Tabulator or click into the form fields below the image.

2. The meta data can be entered into the fields.