Custom fields can be very helpful for attaching content to your images, for example a link, a title or a caption. The new ImageExtra module provides a way to set up custom fields that are tied to an image field.

Some time ago I developed a module (FieldtypeImageExtra) which extends Fieldtype Image with the ability to add custom fields to an image. This worked well but it had a somehow restricted applicability and did not meet all of our needs. There of course are other useful image modules like CroppableImage or ImageFocusArea, but up to now there was no possibility to combine image cropping with custom fields support. So you had to decide whether to add image cropping or the possibility to add custom fields because each of those modules sets up their own field type (and input type) which cannot be combined.

The new module ImageExtra allows you to have both functionalities.

The now obsolete module FieldtypeImageExtra will not be developed any further. But be careful: if you decide to use ImageExtra with an existing site you'll have to start from scratch. So please make sure to backup your data - just in case you need to go back -, because the old settings are not compatible with the new module's format.
Here's the reason: FieldtypeImageExtra created a single column in the belonging table for each custom field and for each language.

`caption` varchar(1024) NOT NULL,
`caption1360` varchar(1024) NOT NULL,
`caption1362` varchar(1024) NOT NULL,
`location` varchar(1024) NOT NULL,
`location1360` varchar(1024) NOT NULL,
`location1362` varchar(1024) NOT NULL

Since ProcessWire 2.5 a description field which also provides multi language support is included in core. Thus content gets saved in a JSON structure like this now:

{"0":"You know, there are better ways to manage a design team.","1012":"Wissen Sie, es gibt bessere Möglichkeiten, ein Design-Team zu leiten.","1013":"Te tiedätte, on olemassa parempia tapoja hallita suunnittelutiimi."}

I decided to adapt this behavior. This means you get only one column for each custom field containing JSON in ImageExtra. So a database table field_images might look like this:

Installation

Clone the module and place ImageExtra in your site/modules/ directory.

git clone https://github.com/justonestep/processwire-imageextra.git your/path/site/modules/ImageExtra

Having cloned the module, log in to ProcessWire admin, click Modules and check for new modules. Now click Install next to the new ImageExtra module.

Settings

Once installed you can attach as many image input fields as you want.

For each of the selected input fields the field settings will be extended. Navigate to Admin > Setup > Fields and edit the desired field. Click on the Input Tab and there is a new area called Image Extra Fields. I also moved the description field settings there.

When you click on the "Image Extra Fields …" area it extends downwards and reveals a form to set up additional custom fields.

The following fields are available by default:

• description - image description (core)
• disable multi language description
• caption - image caption to use for title/alt tag or/and caption, if empty
• orientation - image orientation
• orientation values - values to use as class names or identifiers for different image orientations
• link - image link to internal pages
• other fields - here you can add any other field by writing it (separated by comma)

For each of the activated custom fields an own column in the specific table will be created.

Caution: Just removing a custom field will not erase it, due to data persistence. If you really don't need it anymore you have to delete the column manually.

Usage

After having added some custom fields to an image field, edit a page which has a template containing this field.
Below each image you get some additional config fields - and for sure it provides multi language support.

Here are some examples:

Combine it with CroppableImage

Combine it with ImagesFocusArea

Accessing the values

This is no different than accessing the value of any other field.

$image = $page->image->getRandom();
echo $image->caption;
echo $image->location;
echo $pages->get($image->link)->url;

---

If you notice any problems or unexpected behaviour please post it in the ProcessWire forum.
Designed for use with ProcessWire 2.5.3+ http://processwire.com