You must comply with the law when showing images on your website, specifically copyright and the data protection laws.
Before uploading an image to your site, you need to obtain
For more information, please refer to copyright guidance on the Public Affairs website and information about consent on the Data Privacy site.
It is a requirement that all images carry an 'alt text' - a text description of the content of the image which can be used by screenreaders to describe the content of the image. It must adequately explain what the image shows, and the more detail (within reason) the better - it is insufficient to simply give the title of the image.
In Mosaic. 'alt text' is field which can be completed when editing an image. Go to Manage Content > Files > Edit the image in question > Complete the 'alt text' field which is in the 'File properties' tab towards the foot of the page.
Whilst an image can be used to provide an additional way of delivering information to 'sighted' users, it cannot be the only way in which this information is provided. It is insufficient to rely on the user gathering information from an image - for example, you should not put on your site an annotated screenshot of a process, without also providing on the page a text description of how the user completes the process which you are showing. Images should be used to enhance, rather than replace, 'text-based' information.
Images for which the University owns the copyright do not require credit information on the images directly. Copyright ownership can be acknowledged on the Picture Credits page (link in the footer of your site). Template text will be provided by the project team.
You might choose to acknowledge photographers on your Picture Credit page as a courtesy, even if the copyright is owned by the University.
You must obtain the permission of the copyright owner. Mark the image in accordance with any instructions they may give you. If possible, add the year when the image was first published.
The copyright owner could be
Technical guidance on how to display photo credits in Mosaic can be found below.
The guidance below covers copyright display, management of images by template or content type, how to embed videos and add i-frames.
During the process of inserting a picture in a WYSIWYG, you will be given the option to display a caption and/or attribution:
These can be set for the picture via the options when uploading or editing an image:
When set the caption and attribution will appear as below:
When an image is used in a situation outside a WYSIWYG - for example it is used in a grid or listing, or set as a banner image - the Title text should be used to display an acknowledgement or credit. This is set via the options when uploading or editing an image (type ALT then 0,1,6,9 to input the copyright sign):
It appears when the user hovers their cursor over the image:
Ideally all uploaded images will have dimensions of at least 640 by 400 pixels. Larger images, for example to display full width within a WYSIWYG area, need to be 800 pixels wide. Banner images should be at least 1728 by 520 pixels. Smaller images can be uploaded, but will be resized and may appear pixelated to the end user. Allowed file types are png, gif, jpg, jpeg and svg. Image files must be less than 5mb.
Prepare image files in advance and give them professional and informative names, the file name will be visible to end users of the website.
Also think about the following attributes;
Alt text, caption and attribution can be added after the file has been uploaded. Further information on file names and file attributes can be found within Writing for UAS websites. The Focal point for the image can also be adjusted later. More information on Focal points can be found in section Cropping images.
One way to upload files in Mosaic is to navigate to Manage content and select the Files tab. Click on the '+ Add file(s)' button and drag one or several files into the upload field on the screen, then click 'Next'. If the files are large it can take a few minutes for the upload to finish, it is ok to leave the upload running in the background.
When editing content click ‘Browse’ to open the Media browser and search for a file to use from the site’s media library or open the Upload tab to upload a new file.
Select Edit from within Manage Files to update the attributes of an image or to replace the file in Mosaic with a new image file uploaded from your computer. Clicking Edit next to an image when editing content gets you to the same place.
Double click on an image within a WYSIWYG to change the display style or url link.
Tip! If you wish to change the image you have used click Remove and then browse for a new image. Selecting Edit and then Replace will overwrite the file in the site’s media library with a replacement.
This template uses a banner to display a hero image which will expand to the full width of the main content area. The image used should ideally be a minimum size of 1728 by 520 pixels. Using a smaller image will cause it to be expanded which could result in a blurry image. The image size doesn’t have to be exact, it will be cropped and resized to fit. Ensure the Title of the image is left blank.
The size of the displayed image in a listing will vary depending on which style the list uses. Therefore it is better to upload a listing image of at least 640 by 400 pixels where possible and let Mosaic resize. It isn’t essential to use images in a listing. If the items being displayed wont all have a listing image associated then use a listing style with no image.
Main image should ideally be a minimum size of 1728 by 520 pixels . Listing image of at least 640 by 400 pixels where possible and let Mosaic resize . Don’t need to have both. Make sure have good image if taxonomy will make it appear on the homepage.
The lead article in the Newsletter template uses layout 40:60. When inserting an image for the article choose display size Large – Width 800px max.
Subsequent articles layout is 75:25. When inserting an image choose image display size Medium or Medium square, depending on the shape of your image and the length of the article.
The image associated with a person’s details will appears on the person profile page and also when the content item is displayed in a list.
On the person page, the photo is displayed at 300 by 340 pixels but the size of the displayed image in a listing will vary depending on which style the list uses. Therefore it is better to upload an image of 640 by 400 where possible.
There are several ways to use images within a WYSIWYG content area.
An image gallery may be used where multiple images need to be displayed as thumbnails with the option to open the full size image. There is no need to upload a thumbnail version of the images.
The thumbnail gallery setting should be narrow, so the full width option is NOT ticked.
Icons to use in Information cards will be pre-loaded as image files into your site’s media library.
When an editor selects an item style for using with a Grid, List, Carousel etcetera Mosaic makes a crop of the List Images of the content included in the widget, taken from the original images uploaded into the media library. The crop is nearly always landscape and will aim to centre the cropped image over the crosshair (focal point) the editor set on the image. The exact size depends on the item style selected: different cropped versions of the image are made dependent on the selected item style.
How well this works depends on whether the original image was portrait or landscape, how big it is in relation to the crop size, and where the crosshair was set - the closer this is to the edge of the image the worse the result is likely to be.
Additional variables such as how many items are selected per row, whether the list or grid is in a narrow or wide region of a page and whether it is viewed on a desktop, tablet or smartphone can also affect the appearance of the final image used. The way Mosaic does this, is to re-frame the cropped image using an appropriate aspect ratio for the selected options/context and show only the part of the image within the frame.
There are two tips for the best way to help Mosaic to deal with this:
Where an image is not displaying well you might want to consider the following options:
Grid listing is an effective format where the articles/pages all have a listing image. Listing style to use should be Tile: Without rollover or Tile:Landscape - square image.
Videos should be uploaded to YouTube, and then use the embedding feature, rather than hosting them on Mosaic or Sharepoint. Dedicated video hosting sites provide a much better user experience, so even if it may seem time-consuming to upload it, the effort is worth it. To embed the video:
In the WYSIWYG, click the 'Insert Image or File' icon at the place where you want the video to embed.
Always ensure that before you upload the video to YouTube you have the necessary permission to do so, and that you give credit the appropriate parties.
I-frames can be used to embed content into a WYSIWYG, for example from YouTube or Oxmaps
The source site will provide a line of html code which you should copy. In the WYSIWYG on Mosaic, click the 'Source' button in the icons above the WYSIWYG region, and paste the code at the point of the page at which you want it to appear.
To comply with accessibility requirements, you must ensure that all i-frames have a title added to the code which describes the content which has been embedded. In some instances this may be included automatically, but in others you must add your own. To do this, identify the line of code you have added to the source. After the code <iframe but before the > which ends that section, type title="x" replacing x with the title of the content. So, for example:
<iframe width="560" height="315" src="https://communications.admin.ox.ac.uk/%3Ca%20href%3D"https://projects.it.ox.ac.uk/%3Ca%20href%3D">https://projects.it.ox.ac.uk/%3Ca%20href%3D"https://www.youtube.com/embed/emDgfyt3ca4">https://www.youtube.com/embed/emDgfyt3ca4" frameborder="0" title="Youtube video of Oxford University Temporary Staffing Service wordle" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Lead editors - email firstname.lastname@example.org
Site editors should only contact the lead editor of their site
See information on the UAS website support process