If your image is a graph, flowchart, map or includes text descriptions, you need to follow the steps to add this as complex image component instead. How
How to name your files
Our CMS contains thousands of image files, so it's important to name your file well so that you and your colleagues can find and reuse them.
...
If you're uploading several images that belong together, such as members of a council or honour roll inductees, it's a good idea to put this consistently in the image names, for easier searching. For example: "Stella Young – 2017 Women's Honour Roll".
How to upload and embed images
Resize your image so it’s in best format for your page. Then save the image to your computer.
In the Basic text component,
...
select the Media icon in the formatting ribbon.
...
Here you can either:
Search for your an existing image from in the Library tab if uploading an existing image.
If you’re uploading Upload an image for the first time, click on new image by selecting Add image, then Choose file and . You’ll then be prompted to browse your computer for your image.
...
Name
Complete the Name field. Make the name of the file meaningful to the image, so it can be easily found when searching the Media library. If it’s a photo of a well-known person, you should include their name and position in the image title. Refer to the section about naming images for more tips, but as a general rule:
The filename of your image (what it's saved as on your computer) should use hyphens between words, not spaces.
The name you give your image when you upload it to the CMS should use spaces between words.
Alternative text
Complete the Alternative text field for your image (if required). This is a description for vision-impaired users and is an important accessibility requirement. What you write depends on the context of the page and the typical users.
The only images that don't need this field to be filled out are:
Sensory images: if the image is intended to create a sensory experience – for example, an image of an artwork.
Decorative images: if the image is pure decoration, used for visual purposes only. For these types of images, you can leave the alt text field blank. In the page's code there will be two double quotes, which tells the screen reader to skip it.
| Info |
|---|
...
Find more information image types and accessibility requirements: Using images in website content |
Title
The Title is used as a tool tip when the user hovers the mouse over the image.
License Type
You'll need to
...
select one of the following license types in the drop down menu:
Copyright means that the image is protected and cannot be used without permission. Use Copyright if you're not confident the image can be shared with others.
Creative Commons Attribution 4.0 means the image can be shared or adapted. See Visit:https://creativecommons.org/licenses/by/4.0/ page for more information.
Copyright means that the image is protected and cannot be used without permission. Use Copyright if you're not confident the image can be shared with others.
At this stage the 'Restricted' checkbox doesn't do anything in the SDP instance of Drupal, so ignore this.
Click Save and you’ll see the Embed media option pop-up.
...
.
Metadata
Audience
Leave this blank
Department
Start typing the name of your department and select it from the drop-down list. This will help you to find the image in the Library.
Topic
Leave this blank.
Site
Tag this image to a site or site section so you can find the image in the Library.
Select Save image. You’ll see the Embed media item option pop-up. By default, the image will display as Embedded. This can be changed to Embedded with caption or Thumbnail.
Select Embed.
If you want to add multiple images to your page displayed in a carousel format, you can find instructions in our image gallery guide.
How to embed smaller images
When you're inserting an image in body content, the width is important because the website displays images according to the device screen size (breakpoint).
Landscape images should be 818px wide and no more than 500px high.
If a narrower image is embedded in the body text of a page, it will be expanded to fill the column width on some smaller devices. If the image file is too small it will appear pixelated. (If an image is taller than 500px it will be made narrower to display the full height. See the examples further down.)
In the examples below, the same image (156px by 156px) has been either 'embedded' or 'embedded as thumbnail'. Try reducing the size of your window – you'll see that the first image expands to fill the width of your screen (and becomes pixellated because it was a small image not intended to be displayed so large).
In the following examples, the original image in the media item is 818px by 496px.
Note: You can't embed a thumbnail and have the caption display.
Embedded as thumbnail 100 x 100px
...
Embedded as thumbnail 220 x 220px
...
Embedded as thumbnail 480 x 480px
...
How tall images behave on the front-end
This is what happens when you have an image that is 818px wide but a variety of different heights. This demonstrates that landscape images over 500px high will not be displayed at full width.
800 x 200
...
800 x 400
...
800 x 500
...
800 x 600
...
800 x 800
...
More information
...
...