Introduction #

WordPress allows all Users to upload a range of media to enhance the visitor experience. This guide discusses media types, and how they are uploaded and managed using the WordPress Media Library. Placing an image or other media into a document is discussed separately.

It is recommended that the webmaster and content creators are familiar with digital editing of images. A wide range of tools and packages are available, for example, Adobe Photoshop or GIMP.

Media Types #

WordPress can handle a wide range of media files, including:

• Images (jpg, jpeg, png, gif ico)
• Audio (mp3, wav)
• Video (mp4, wmv)
• Documents (pdf, docx, xls)

The following points should be noted:

• It is not possible to upload videos through SiteWorks due to storage considerations. but should be stored on sites such as YouTube,. To place a video into a website, the Embedded Link block or Embed blocks should be used.
• PDF documents are preferred over other text document formats (e.g. odt or docx) as they can be locked to prevent editing or printing from a download.

Media Generated by Artificial Intelligence #

This section should be considered a draft and is subject to review.

With the increasing availability of Generative AI tools, many u3a may wish to use the approach to add media (typically logos, images or text) to their sites. In doing so the following points should be noted:

• AI should be seen as a starting point for, or a tool used in, generating, material.
• u3a’s should not publish written material 100% generated by AI, as any generative AI tool is susceptible to bias (in particular gender, people of colour and disabilities), errors and mistakes. In addition, the generated text will probably not have the correct tone or voice for a u3a.
• Images can easily be generated by AI, but they should only be used if an existing image, stock image or a new image cannot be used.
• When generative AI media is used:
  • Copyright and GDPR considerations must be fully considered.
  • Full transparency must be applied for example the following addition to the caption and Alt Text should be considered – This content was generated with the help of [insert tool here], and its use has been carefully reviewed by the website administrator and/or the committee.

Image Specific Considerations #

Understanding Image Sizes #

One of the important points to understand regarding images is the relationship between the initial size of the image and the version that is displayed on the monitor, tablet or smartphone. Typical sizes are:

• A digital phone can take 12Mpx (megapixels) images, which equates to a 3000×2000 pixel image for a 3:2 aspect ratio.
• A modern digital camera image can exceed 24Mpx, which equates to a 6000×4000 pixel image, which requires 69MB of storage.
• A typical desktop monitor display resolution is 1920×1080 pixels.
• A tablet’s screen resolution depends on the manufacturer but is typically between 1280×800 and 786×1024.
• A mobile phone has a screen resolution of 480×800 to 1440×2560 depending on the model. The most common resolution is 720×1280.

The memory requirements for an image are dependent on both the size of the image and its format. A modern digital camera can produce an image over 60MB in RAW format, this is far more than what is required for a webpage. For this reason, before uploading an image, it is highly recommended that the content provider adjusts the resolution of an image and converts the image to a lossless compressed format (e.g. jpg, jpeg). When edited and in the correct format, an image for displaying on a website should not exceed 100KB to 150KB in size.

If you try to upload an image which has a height or width greater than 1920px, the Imsanity plugin will adjust its resolution, i.e. the number of pixels in the image. Imsanity reduced the resolution by using a special algorithm, not cropping the image. The aspect ratio of the image is not changed. Thus image size is traded against image definition. The Imsanity settings are available from the Dashboard using Settings ⇒ Imsanity.

Suppose you upload an image significantly smaller than 1000×1000 pixels. In that case, the displayed image will not be sharp at full screen on a desktop or laptop monitor, unless the display area is reduced, during content-creation. It should be noted that mobile devices (tablet or phone) have different screen sizes, hence the importance of checking image quality before publication, to confirm a page’s readability on all devices, as discussed here. This should be undertaken before publishing a new or updated page

It is also important to note that on a standard desktop monitor, the maximum width of a displayed image on a SiteWorks page, with the browser magnification set to 100% is 840px.

Use of Alternative Text #

It is important to recognise the importance of Alternative text or Alt Text, this is a feature to help visually impaired users understand images and is used to convey the “why” of the image as it relates to the content webpage. When the page is displayed using software tools for the visually impaired, this description is read aloud along with the page content. It should also be noted that this text is also used to support Search Engine Optimisation.

A description of the image should be inserted in the Alt Text box provided when the image is uploaded. The following points should be considered when writing the Alt Text for all non-decorative images.:

• Avoid the use of “image of” or “photo of”.
• Keep the text short (less than 240 characters) and descriptive. A good description is concise but accurately describes what’s in the image to understand its context.
• It’s not necessary to add text in the Caption field in many cases. 
• If the image is complex, for example, a chart, diagram, or illustration, consider conveying the information using the Alt Text and the adjacent page text.
• The same image used in two or more places may require different alternative text, as the page context may have changed. Hence it should be noted that any changes made to the Alt Text when editing a page are not reflected in any other occurrence of the same image, including the media library.

For further information, content creators should consult the u3a readability guidelines for more information. In addition, the W3C has a range of resources including a decision tree.

Copyright #

When using images, text (e.g. poetry) etc, you should be aware of the web manager’s responsibilities regarding copyright. United Kingdom law relating to image copyright is discussed in the Copyright notice: digital images, photographs and the internet – GOV.UK (www.gov.uk) webpage. It should be noted that the copyright symbol, ©, is not required in UK law, and hence need not appear next to the image.

Copyright considerations will also apply to video, audio and other third-party documents. Some key points to remember:

• Consider all material on the web to be copyrighted, unless explicitly stated. WordPress provides access to the Openverse, which offers more images than a u3a could consume! However, when using this source, an image caption showing licence details, MUST NOT be deleted. In the example shown below, the image is from the NASA Apollo Image Gallery, with the reference, Image AS11-36-5303, used under the Public Domain Mark 1.0 licence.
• When a u3a member provides an image, text (e.g. a piece of creative writing) or audio file for use on their u3a website, it should be noted that the member retains copyright, unless they have explicitly transferred it to the u3a. In most cases, they have permitted the u3a to use the material. With any form of media, it is recommended that the provider’s name be added to the file’s metadata, via the description box.
• If a member of a u3a appears in an image, explicit permission, as defined in an individual u3a’s Privacy Policy must be followed.

It should be noted that copyright is bidirectional, see How copyright protects your work, hence the copyright of individual pages website produced by the u3a is protected. Hence if a photographer has supplied an image, they cannot use a copy of the page in which the image appears, for their publicity or in other material without permission of the individual u3a.

Media Library #

The media library can be accessed from the Dashboard.

Two options are presented select Media ⇒ Library to view all the media files currently uploaded, or Media ⇒ Add New to add additional media files. All Users can use the Media Library, as discussed below.

Uploading to the Library. #

Uploading a media file to the library is a simple process. From the Dashboard, or Library view, select Add New, you can then either:

• Drag and Drop the attachment from the computer’s file manager.
• Use Select File.

Once the upload process has been completed, the media file appears below the upload box:

Once uploaded a thumbnail of the images appears to the left, and two options to the right, Copy URL to clipboard or Edit. It is recommended at this stage to select Edit, the page allows you to review the image, and add additional information (metadata).

At the bottom of the screen (scrolling down as required) the content creator can enter:

• Alternative Text or Alt Text.
• The caption. This will be visible if the display option is selected in the Image or similar blocks. The caption should be checked, as some image editors add information such as “Edited in XYZ” to the caption.
• Description, including the name of the photographer, the date of uploading and any other additional information.

On completion, the information should be saved, by selecting Update.

Viewing the Library #

On selecting Library, all the media files available are visible as a grid, as you may have a hundred or more on a media-intensive site, a set of tools are available to help you navigate as required:

• List: all media is presented in a list format, with additional information including who uploaded it and when. If the media is an image file, its size following processing by Imsanity is also shown
• Grid: The default grid layout, shows all media available. Note that the images are all presented as a square thumbnail – this is for presentation only, the image has not been cropped.
• Two filter options are available:
  • By Type, this allows, sorting by type (i.e images or documents etc) or if they have been uploaded by the current user (Mine)
  • By Date, filter media by the upload date.

The contents of the library are as a default, presented as a grid of square thumbnails or icons depending on the media type. Selecting the thumbnail will bring up the details of the media item, as shown below:

In addition, four pieces of information are provided:

• The details of the media file, including size, upload date etc.
• Information including title, caption, description and alternative text, this information can also be entered by the editor or author of the page when the media file is used. If need be, copyright information can be added to either the caption or description box.
• The URL of the media can be saved to the clipboard, this is of particular use when using the block link feature.
• Other options:
  • View the page where the media is used.
  • Edit the alternative test, caption or description.
  • Download the media file
  • Delete the media file.

If the List view is selected, a list view of the library contents with a summary of the key information is provided:

Searching the Library. #

The user can search for media by three routes:

• Using the search bar at the top right-hand side of the page, this searches across all text associated with media including its URL.
• Using the media filter to select a document type – the default condition is All Media Types. This allows the user to select and view all the media of a specific type, e.g., images, documents, audio or video.
• Using the upload date filter – the default condition is All Dates. Selecting the month will show only those media files that were uploaded during that month.

Editing Image #

It is possible to undertake minimal editing of an image, this is cropping, scaling and rotation. However, it is recommended that all editing is undertaken before uploading using one of the commonly available image editing tools.

Media Files Links #

It is important to note the following regarding the links associated with a media item.

• If a file name for any reason is changed in the metadata, the initially generated URL is not changed.
• If a media item is deleted, the associated links are not deleted but need to be removed manually.