Using Images and other Media


          Help and Guidance 2021: Modified Page: Version 1.1

Combined from two earlier pages. Under reconstruction.




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].

Information on media items


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

  • Descriptive information to help us manage our large set of media and these can be used to help searching for existing items:
    • Name
    • 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. It can also help label files.
    • Copyright -  so we can document this under images.


View Modes

Now we don't always want an identical screen format for handling images, we want to be able to have a range of them according to circumstance. So there are a set of View modes from which we can choose. The basic ones are 'Default' and 'Media library'. Now we can define some more so the first thing to do is define the name in /admin/structure/media/manage/image/display where in 'Custom display settings' there is a link Manage view modes to let you do that. Once done go back to 'Custom display settings' where the new name will appear and click against the name to use it and do a Save. The new name then appears as a tab alongside 'Default' and 'Media library' which lets you define the edit form and display to use when using the view mode.

We can now use the new view mode for distinct image fields in nodes, but to be able to use them within the editor we need to do some more configuration. This done at Text format and editors where for example we could choose 'Genuki HTML' then right at the bottom choose 'Embed media' and under "View modes selectable in the 'Edit media' dialog" tick the newly defined view mode. That means we can now choose that mode for an image we have added via the editor.

In order to use that View mode for an image within the editor, click the 'Edit media' button above the image where you can change the alt= text in the <img> html, where it is positioned and Display option lets you choose the View mode. It seems that the view modes it displays are all that are in the configuration list and not just the ones defined for the media type being used. So if we had one for responsive images that would be visible for files as well. So we need to choose appropriate names for type specific modes.

Our view modes are:

  • Default - minimal changes from what we expected in Drupal 7. Additions being Label and Copyright but no styling changes.
  • Media library - used in all the media library management but we don't offer this as a user display option.
  • Basic - The same as our initial Default. Provided to make things clearer and guard against any future changes to the default from affecting an individual item.
  • Churches - Used for pictures in church nodes. May be useful for large embedded images.
  • Embedded file - the Basic 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.
  • Responsive image - A simple responsive image style for embedded images currently using the wide responsive style. Use churches for larger images but using less screen space.

Image styling

Image styling is the means to define how an image appears on the page, and you specify that within Media types / Image /  Manage Display where for the image field where you can choose Image or 'Responsive Image' and then choose from the options within them. The very basic is to choose Image and then 'Original image' to do manipulation at all. To do something different there are two ways forward.


The Image set are a range of fixed size options such as various sized thumbnails. If you choose one of these Drupal will resize you image and save a copy at a different path, using that one when it is displayed. This uses more storage on the server but does make the page download faster. The media styles are defined at /admin/config/media/image-styleswhere we can manage those.

Responsive image

These are the styles used to provide responsive images where you specify options for different screen sizes. A small images can scale quite reasonably on smaller screens, but on large ones they look poor as there is not enough detail in the image to provide the detail. These styles are managed at /config/media/responsive-image-style .

When defining responsive styles that differ according to the size of the screen you need to be aware of the viewports/breakpoints that are defined in our theme and use those rather than assuming you can define your own. Use our Churches style as a model and don't change the min-width values. the ones to change are the nnvw where nn is a percentage and vw specifies view width.