Images

[Page under development]

Introduction

The GENUKI system contains many thousand of images.  Most images are photographs of churches and scanned images of old maps.

Prior to the move of GENUKI to a Content management System (CMS), images were uploaded by Maintainers to the Genuki server using a separate Secure File Transfer Protocol (SFTP) facility (e.g. WinScp for Windows, or Transport for Mac).  The image files were then stored in a set of folders along with all the other HTML page files.  These folders were organised into counties, and then towns/parishes.

With the move of GENUKI to the Drupal Content management System (CMS), it has given us the opportunity to improve the way we store and access our Genuki images on the server.  The purpose of this page is to describe in some detail how images are now to be stored in Genuki.

The fundamentals

Now that GENUKI resides on a CMS, we will be managing our Images using the Drupal Media module.  This facility allows all of our images to be stored and managed within a Media Library that resides within the Genuki system.  Each time a maintainer adds a new image to Genuki for the first time, the system will upload the image from the Maintainer's local computer, or from the internet, and store the image in the Media Library.  Behind the scenes, as the image is being stored in the Media Library, it becomes a "managed file" and is allocated a unique "File ID".  This allows other information to be stored in the library  along with the image - a title, a caption, and alternative text.  Thereafter, one or more Genuki pages may use this image that is stored in the library, simply by referencing this file in the library.

How is an image displayed on a Genuki page ?

There are two ways that an image can be shown on a Genuki page:

• Specific fields - in some of our node types we have specific fields that are used to reference images.  For example, on our Church nodes there is a field specifically identified for holding one or more photographs of a church.
• General Text - it is now possible to embed images within general text.  This is done via our WYSIWYG editor in the relevant text.

Adding an image to a specific node field

Using the example of church photographs, if we wish to add a new photograph to a Church node, this is done as follows:

• Open the Edit screen of the Church Node
• Scroll down to the Picture field, and click the "Browse" button in the "Attach media" section.  After a short pause, you are presented with the "Media browser" popup screen
• Use the "Upload" tab to select and upload a new image from your local machine.  This will then upload the image file into the Genuki Media Library.
• Having uploaded the image file, click "Next".  This will present you with a screen that will allow you to enter additional information if required - Alt Text, Title, Caption, Credit
• Click "Save" to save the additional information
• Click "Save" to save the node

Having added an image to a node, it is then possible to edit the node again, and edit or remove the image and/or additional information.

Adding an image to a general text field

It is now possible to add an image to any text area (ie. multiple lines) field in Genuki using the WYSIWYG editor.  This is done as follows:

• Open the Edit screen of the relevant node
• Scroll down to the relevant text field, and click the "Media browser" button (insert image here) in the WYSIWYG toolbar.  You are then presented with the "Media browser" popup screen described in the previous selection.
• Use the "Upload" tab to select and upload a new image from your local machine.  This will then upload the image file into the Genuki Media Library.
• Having uploaded the image file, click "Next".  This will present you with a screen that will allow you to enter additional information if required - Alt Text, Title, Caption, Credit
• Click "Submit" to save the additional information
• Click "Save" to save the node

Having added an image to a node, it is then possible to edit the node again, and edit or remove the image and/or additional information.

NB.  If you were to inspect the html source behind the new image you will see a block of unusual markup of the form ( [[{"fid":"nnnnn","view_mode":"default"......}}]] ) where nnnnn is the File ID.  This is the internal workings of the Drupal system referencing the image in the Media Libary.  However, when the node is saved and displayed to the end user the unusual markup is converted to normal <img> html tags.

Adding an image to a general text field - further details

Once an image has been embedded into a text field using the WYSIWYG editor, there are some additional facilities available when editing a node:

• Image alignment - An image can be centered, or left-justified, or right-justified, using the alignment buttons in the WYSIWYG toolbar
• Image borders - it is hoped to add a simple facility for adding a border to the image.  NB.  This is not available yet
• Image resizing - it is hoped to add a simple facility for resizing an image on the page.  NB.  This is not available yet
• Image Properties - Double-clicking on an image currently shows the usual "Image properties" popup box.  NB.  It is not yet clear whether this popup box will remain, or be replaced by an enhanced properties box
• Contenxt menu - Right-clicking on an image shows the context menu.  The "Image properties" can then be selected as described in the previous item
• Media browser - if an image is selected by a single click, the "Media browser" button is highlighted in the WYSIWYG toolbar.  Clicking this button will then display the Media browser, allowing the image details to be edited.

Managing images in the Media Library

Once an image has been loaded into the Genuki Media library, it is stored in the system as a "managed file".  This is a different entity to a node where most of our Genuki content is held, but it is similar in concept.  Should you wish to see the master entry for the file in the Media Library, it can be accessed by the url /file/nnnnn, where nnnnn is the File ID of the image.  From the file page, it is possible to edit the file details, view the "usage" of the file in the systme, and if necessary delete the file altogether.  NB.  It is unlikely that most Maintainers will ever need to access the underlying image files in the system, but this explanation is included for completeness.

Conversion of Genuki-1 images files into Drupal

At the time of writing (April 2018), Genuki image files are held in a variety of locations.  All of the church photos have already been loaded into Drupal by Phil, as part of the Church database conversion in late 2017.  However, apart from Church photographs, most other images are still held in the Genuki-1 /files/... folder structure.  This includes all images embedded in general text maintained by the WYSIWYG editor.  During the course of May 2018, it is planned that Ken Greenslade will convert all of the remaining Genuki-1 image files into the new Genuki Media Library.  It is NOT intended that individual maintainers will carry out the conversion themselves.

Summary

This is a significant change to the way images are managed in the system by the Genuki Maintainer community.  We are also using lots of new modern Drupal facilities for the first time.  Therefore, it is likely to be several weeks / months before the conversion is complete, and the online facilities for Maintainers have been refined and fully developed.  All maintainers are encouraged to report all issues and ideas for improvement to the central project team.