Show gallery "remove" icon not just on hover

• Galapagos23

• February 7, 2023 at 3:10 pm

Hi!
In desktop, you can hover over the images uploaded and a remove icon appears, so you can delete that particular image.

The problem is that in mobile view the icon never shows. I tried with CSS, but couldn’t find a way to make that icon appear all the time.

Any guidance will be greatly appreciated!

• John Huebner

• February 22, 2023 at 6:52 pm

.acf-actions.-hover {
  display: block !important;
}

• Galapagos23

• February 22, 2023 at 10:28 pm

Hi!
Tried it but no luck, the icon does not show.
I’m using frontend Admin, but I also tested this only with ACF in the backend. And in mobile (using an actual phone) there is no way to remove the images uploaded to a gallery.

I need that feature to allow users to edit their post, which is mainly focused on pics.
I used WP forms a while ago, and they had an X beside every pic, so you could remove it.

Getting back to ACF, the css trick should work right?, but I can not find the exact element to show not only on hover. I tried
.acf-icon.-cancel:hover
a.acf-icon.dark.-cancel:hover
a.acf-icon.dark:hover

Thanks again for the help and guidance!

• John Huebner

• February 23, 2023 at 9:43 am

I gave you the exact CSS you need above. It works when I test it. If this is not working for you then I suggest you contact support or submit a ticket through your account.

• Galapagos23

• February 26, 2023 at 12:28 pm

Thanks @hube2 but to be honest that code is not doing anything in my end :S

Sorry for being asking the same thing in 2 threads, I thought this was not being watched anymore.

But @hopkirk described this problem very eloquently, the fact of the matter if it is currently impossible to remove images from a gallery in a front end form.

I described the specific problem in this thread
https://support.advancedcustomfields.com/forums/topic/show-gallery-remove-icon-not-just-on-hover/

Thanks!

• Ireels

• February 28, 2023 at 4:12 pm

Thanks for advice

• John Huebner

• March 1, 2023 at 1:48 pm

The css i gave before is incorrect. That is for an image field. For a gallery field this is the code that needs to be added

.acf-gallery .acf-gallery-attachment .actions {
  display: block !important;
}

• Galapagos23

• March 1, 2023 at 9:25 pm

Thanks @hube2 once again!

Indeed, that code now shows the black X, but it is not functional. I touch it on a mobile phone and does not remove the image.
In desktop there is a hover state which turns the X to red, and when clicked, the image can be removed.

This whole idea of allowing the X visible at all tines, is because there is a bug with the mobile version. On iOS when a gallery image is touched, the details screen appears but due to a bad css, the “remove” text is not reachable.
And on Android, touching the image does nothing altogether.

Sorry for being a pain, but I’m struggling with this issue for over a month now.
I can’t seem to find a way to remove images from a gallery via mobile phone. And I really need it.

Thanks!

• John Huebner

• March 2, 2023 at 9:31 am

I am limited on the mobile devices I can test, but showing the “X” works fine were I can test it and allows me to remove images from the gallery.

It is not so much a bug as it is the fact that you need to “hover” over the image for the X to appear. Mobile devices do not have a “hover” state. I think that this is something that has been overlooked by the devs and is something they need to create a solution for.

I do not know why removing the images from the gallery when you show the action links is not working for you and that is not something I can debug since I cannot reproduce that. My only real guess is that you have a JavaScript conflict on mobile that is causing it.

• Galapagos23

• March 3, 2023 at 6:54 am

Hi @hube2
I believe it is an OS thing.
I was testing in 4 different Samsung devices. Now I borrowed an iPhone and it works fine.

Unluckily most of my users have Android devices 😢🤣

• John Huebner

• March 3, 2023 at 9:33 am

I tested on an android using firefox and was able to remove images from a gallery field after adding the CSS code, although I had to reload the page once because it freaked out when deleting the image the first time. Like I said, this is really something that the developers will need to look at. My experience is that WP and many plugins do not support mobile very well.

• Galapagos23

• March 3, 2023 at 4:35 pm

I see! Thanks @hube2 for the deep investigation and time you take to check this!

I will look into with more detail and get back if I find the conflicting plugin in case someone runs into this problem too.

Thanks again!

• Galapagos23

• March 5, 2023 at 3:17 pm

Hi again! Just to give a heads-up to the developers.

It works fine on Firefox. It doesn’t work on chrome or native Samsung internet app.
Unfortunately, I don’t have a way to investigate the dev tools via mobile, but I’m sure it has to be something pretty easy to fix. Or maybe it can be solved with a PHP snippet?

Anyway thanks again!