Adding Images and other media

Images and other files are all kept in the Media Library which can be accessed directly from the dashboard using the main administration menu, or from Add Media or similar buttons when you are editing content. In general, upload any supporting media files (images, documents, etc.) on the page in which they will be used.

The theme uses two sizes of image for elements like CardsBanners and Featured Images. These are square (at least 400px) and rectangular (aspect ration 2:1, at least 800px x 400px). It is always advisable to crop images which are used in these elements before they are uploaded to ensure they display correctly. Images which are inserted into pages should be at least 800px across, unless they are aligned to the right or left with the text of the page.

Please ensure that any images used on the site are Copyright free or have Creative Commons licenses which allow their re-use and adaptation to the sizes used on the site (i.e. allows derivatives to be made). If you source images from Flickr, use the advanced search form, or use a service such as Compfight. Other sources of royalty-free images are pixabay and unsplash.

Creative commons Flickr images should be credited to their creators by linking to the image and the user profile in the caption, as well as linking to the Creative commons license the image was issued under.

Adding Images

You can open the Media Library by clicking on the Add Media button which is usually displayed above a rich text editing area. There are other parts of the theme (Featured Images and the Widgets in the Widgets Page Template used for Landing Pages for example) which also have various buttons and links to open the Media Library to facilitate the inclusion of images.

Choosing an existing image from the Media Library

The Media Library opens to show you the files/images which have been uploaded to the site so far. You can make a selection here by clicking on the image, then clicking on the blue button in the bottom right corner.

If you are inserting an image into a Post or Page, you can specify the image size, alignment, and whether you would like the image to link to something in a form at the bottom of the right hand pane in a section called Attachment Display Settings.

When you align an image to the right or left, text will wrap around the image. Aligning an image centrally or with no alignment will break the text where the image is inserted.

Linking from the image to the media file will result in the image loading at its full size when clicked, linking to an attachment page will display the image along with its caption and description in a separate page, and linking to a Custom URL will cause that URL to load when the image is clicked.

There are some image sizes which are derived from your original by WordPress – you should be able to choose the size you want to insert using the drop-down menu.

Upload form in the Media Library

If you need to upload a new file, click on the Upload Files tab and you can either select files from your local filesystem or drag and drop files to upload them.

Once you have added an image to the editor, you can change the alignment, image size, link or add a caption by clicking on the edit tool (pencil) when you select the image in the editor.

Adding Files

Adding files (PDF documents and other downloads) is done using the same interface, but in this case you may want to just copy the URL of the file once it has been uploaded, then close the media library and add a link to your text using the URL. If you click on the Insert into page button, the title of the file will be used to link to the file URL and inserted in the editor where you cursor was when you opened the Media Library.

When you upload documents, try to convert them to PDF format (preferably PDF/A compliant) rather than using document formats such as Word and Powerpoint. Only use these if the intention of distributing the document is that it may be edited easily by the user, and then consider using other formats such as RTF (Rich Text Format) if possible. If you are distributing MS Office documents, also be aware of the versions of the software required to display or edit them correctly, and ensure your intended audience has access to the software (saving them as Word 97/2003 .doc format rather than .docx format, for instance).

Adding Video and other embedded content

Embedding content on your site from services such as youtube, vimeo and soundcloud can be achieved using standard WordPress Embeds. These work by detecting URLs in the content of pages and posts, and automatically embedding content from these URLs if the service is supported. Please be aware that embedding content from these services may result in cookies from these services being set in visitor’s browsers. I you do embed content on your site, please ensure you declare all cookies on your privacy page.

It may be possible to embed content from other services which provide embed code to use on your site in the form of an <iframe> tag. For example, the embed code for a youtube.com video looks like this:

<iframe width="560" height="315" src="https://www.youtube.com/embed/EweWaCekXR" frameborder="0" allowfullscreen></iframe>

You can change this embed code to a WordPress “shortcode” by changing it to:

[iframe width="560" height="315" src="https://www.youtube.com/embed/EweWaCekXR" frameborder="0" allowfullscreen]

Note: All <iframe> and <script> tags are stripped from the WordPress editor when your content is saved, so embedding using scripts is not permitted, and <iframe> tags should be converted to shortcodes before saving.