Media handling - especially images

Introduction

When we first started with Drupal 7 it only managed html pages and items such as images defined in <img> tags or non-html files such as pdf's were handled in the old non-drupal manner. Since then the Drupal Media project has moved forward providing functionality to handle and manage such media. We started using it in Drupal 7 and it is now complete as part of Drupal core in Drupal 8 where we are are using it manage all our media content. We now need to make sure we have things in place to make it easy to use and understand. This is a starting point to help describe how things work and to document how to administer it all, which is a little complicated and there isn't much online documentation so far.

So to start with a few basics:

• The media files are stored in Drupal's own disk area on the server and if you mess with them it causes problems.
• Whilst information in html format is stored in nodes, information about files is stored within a different entity for media.
• There are different node types and for media there is a set of media types. So images can be described in a different way to pdf's.
• Again whilst there is a whole structure for handling the node types e.g. displaying and editing them, there is a also as similar set for handling media entities.

As far as using media in nodes we can still have image fields which we now point to media and within the editor we can also add in and manage media items when we want to add in an image or provide access to a pdf.

Media entities

So we now have media entities which of course hold information about where the file is stored and there are other basic fields such as who owns it and the media type. The basic media types are:

• Audio (not used)
• Document (not used)  - all our existing non-image media is held under the File type whilst Document also seems to handle the same file name suffixes. So this simplifies things.
• File
• Image
• Remote video (not used)
• Video (not used)

There is also the ability to add additional fields and we have done that for the Image media type adding two sorts of field.

• Those to hold descriptive information to help us manage our large set of media and these can be used to help searching for existing images:
  • Media category - a sub type to help categorise items. 
  • County
  • Place name - where we can  tag those related to a particular place 
• Then we have those to hold information we may want to display with the image:
  • Label - In the past we could manipulate the html title field in the <img> tag but that seems to have been withdrawn. So we have added a Label field for adding text under the image. It can also help label files. This cannot be made to appear as <img title=>.
  • Copyright -  so we can document this under images.

In order to administer media we go to /admin/structure/media where we define the fields to use, and the format of the edit forms and how to display them. Now for the styling of the images themselves such as sizing and whether we want responsive images that is defined elsewhere and will be described later.

Responsive images are the way things are moving forward, and instead of fixed size images the web is now tending to make them responsive to adjust their size according to the screen being used. So you can see it easily on both a phone and a large screen with the picture adjusting its size to fit the device. So we should be able to support responsive images but we need to be careful how we do this. During Drupal 8 development we found that active maps such as on the England page were being shrunk on phones which prevented them from working properly. That was because the 'Responsive images' option had been set in our theme.That was a poor description of the option as it didn't mean support for responsive images, but forced every single image to have css added to it to handle it in a responsive way whether you wanted that or not.

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.