Jump to content

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

Jonathan Lahijani

Recommended Posts

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) { ... }
  • Like 4
Link to comment
Share on other sites

  • 2 weeks later...

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.

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...