Have you ever wanted to know how in Drupal to add an image to a field group? A use case where you might want to do this could be an engineering or product design form that needs users to add a schematic and supply text or number values in the same field group.

In our case, we had a client that needed precisely that kind of functionality. They needed the ability to upload a diagram of the part to be displayed beside the dimension form elements.

Unfortunately, this isn't something that is quickly done right out of the box with Drupal. To solve the problem we created the "Field Group Image" contributed module. This simple module makes it easy to associate a single image with a field group and have it displayed inside the field group along with any fields.

Granted, it would also be feasible to use CSS/JS, and some reworking of where a regular image field would appear so as to be positioned inside of another element container, this module will be helpful to people who aren't quite as familiar with those techniques.

Module Configuration

After downloading and installing the module, you can configure a field group image on the Manage Fields tab of a content type (or any other fieldable entity). There are three new settings when editing a field group:

  1. Group image: A file upload field to add the image
  2. Image style: The image style to use when displaying the image
  3. Image position: The location of the image within the field group. Options are above, below, left, or right.

 

Images may be added to field groups under form or display settings. When the node add form is displayed, the image will be shown in the field group.

As a module developer, you can allow images on your own custom field group types by implementing hook_fgi_allowed_format_types()

/** * Implements hook_fgi_allowed_format_types(). */ function module_fgi_allowed_format_types() { return array('module-custom-field-group'); }

 

 

 

This module was developed for simple uses where a single image is displayed in a field group. The markup module was designed for more advanced display only content.