How to disable an image in a multi-image field and give it a disabled/grayed-out look as well

[Jonathan Lahijani]

Lets say you have an multi-image field named 'images' and you want to be able to mark one or more images as disabled as well as make it visually appear as disabled in the admin.  Currently, ProcessWire does not support this natively (requested here), however we can still easily achieve this with using custom fields for files/images, introduced in PW 3.0.142, as well as a hook to achieve the visual effect.

Follow these steps (modify as needed):

• create a checkbox field called 'disabled'
• create a template called 'field-images' which will ProcessWire will detect as a custom template for the 'images' field
• add the 'disabled' field to that template
• add the following code to /site/templates/admin.php

$wire->addHookAfter('InputfieldImage::renderItem', function(HookEvent $event) {
  if($event->object->name!='images') return;
  if(!$event->arguments('pagefile')->disabled) return;
  $event->return = "<div style='opacity:.2'>{$event->return}</div>";
});

Of course, if you don't want to display disabled images on your frontend, make sure to update your selector on your 'images' field, like so:

// before (will still select disabled images)
foreach($page->images as $image) { ... }

// after (will ignore disabled images)
foreach($page->images->find("disabled=0") as $image) { ... }

[Jonathan Lahijani]

As of today, this is now a native feature on the dev branch:
https://github.com/processwire/processwire-requests/issues/520#issuecomment-1961794624

[bernhard]

@Jonathan Lahijani could you please describe the exact use case? I've never needed this and I'm wondering why one would do something like this, but I'm sure it can make sense so I'd be happy to hear an example.

[Jonathan Lahijani]

With Geffen Playhouse for example, which was launched in 2019 right before custom fields for files/images was introduced, we needed custom fields for images.  At the time, the best approach was to use the RepeaterImages module, which uses repeaters and all the functionality that comes with it.  This includes the ability enable/disable a repeater item.

In a recent update, I wanted to remove that dependency and switch to just a normal images field with custom fields, but the client still wanted enable/disable capability on images, hence my approach to it described in this post.

I think about it just like repeaters.  There are times when you want a piece of data to exist but not be visible.  Without being able to disable an image, you would have to delete it (or do some other weird hack like perhaps add an image tag), which is less than ideal.  With enable/disable capability, it brings it more in line with how multi-item fields, like repeaters, work.