Using Images and other Media

Introduction

You can insert images (most common formats) and other media files (including pdf and spreadsheets) into pages (nodes) In most cases this is done within a block of text that is being editied with CkEditor using the "Insert from Media Library" button. In a few cases (eg Church nodes) you are able to link an image or file directly.

For the item to display in the relevant page it has to be available on the GENUKI server in the Media Library. For images the default settings will make the image visible, although you may want to change some features eg size and position. For files there are options either to provide a link to the file or, in some cases, to be viewed within the page. Both spreadsheets and pdf documents can be viewed in a page with the correct settings.

There is a howto on Insert and Upload Media

Media entities

Drupal provides a variety of media types. We use [three]:

• File This includes file types: txt rtf doc docx ppt pptx xls xlsx pdf odf odg odp ods odt fodt fods fodp fodg key numbers pages.
• Image This will deal with png gif jpg jpeg.
• Remote video connections to YouTube, Vimeo [for admin use only].

Each media type has its own distinct set of options whilst each type uses the same media technology so they are handled in a similar way but with different configured options. In the following description it covers images as we have done very little for other media types.

Whilst there are a number of things to consider about usage of media items, as described below, the only thing you need to do is to select a View Mode which best meets you needs.

Information on media items

There are some fields common to all media types:

• Name - The equivalent of the Title field in nodes
• Author - as with nodes this field holds the the id of the user who maintains this particular media item.
• Url alias - The basic url for media items is /media/nnn and you can define an alias so that when media items are viewed, a more useful value appears in the breadcrumb trail. (Similar to replacing /node/nnn with a more useful url).

We have provided  the ability to add additional fields for image media items.

• Descriptive information to help us manage our large set of media and these can be used to help searching for existing items:
  • Category - a sub type to help categorise items. 
  • County
  • Place name - where we can  tag those related to a particular place 
• Display information with the item:
  • Label  - for adding text under the image.
  • Date.
  • Notes - a more extensive description such as when you may write more information on the back of a printed photograph.
  • Copyright.

Styling

The size of the image that appears in the web page will depend on the the image style, of which there are three types:

• The original image size.
• Fixed - where you chose a particular image size defined for that style. Drupal automatically creates a resized copy of the image uploaded into the media library.
• Responsive - Fixed image sizes are good for particular circumstances but larger images don't display well on small screens as scroll bars are frequently needed to handle them. Responsive styles remove the scroll bars by automatically re-sizing the image as it is displayed within the browser. There are sub types which help manage images of various sizes. Narrow windows can handle most image sizes in good manner, but wide windows can result can result in small images being blown up to >100% so much so that appear grainy. So there are some sub types that will restrict the image width in large windows.
  • Wide handles large images.
  • Narrow for small images

Automatic link

A view mode which we have selected frequently does not display all the information we have available for an image. So there is a mechanism to enable an automatic link to be added to it, so a click will show the complete media item where a user can also access the full sized image, or a link just the full sized file. However if you want to add your own link to an image then do not select a view mode with the built in link as otherwise you link won't be available.

View Modes

When we add media within text via the editor button for that, you need to select a View/Display mode to meet your requirements.

Our view modes for images are:

The default option when adding media images via the editor is Basic. There are two more used internally and which should be avoided as they are likely to change. Default is used to display media items but is currently still used for some other content so we cannot change that yet to the best format yet.

If none of these meets your needs we can consider adding additional ones usually based upon other built-in Drupal styles. When you have used the embedded media tag in the editor, the html source produced contains the name of the display mode. So you should be able to use search/replace to make bulk styling changes in a set of nodes.

For files we have:

• Embedded file - the default option just provides a link to the file, this one embeds the file within the web page allowing you to view it within any other content provided with this node.