Home › Forums › General Issues › Show gallery "remove" icon not just on hover
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!
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!
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.
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!
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;
}
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!
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.
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 😢🤣
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.
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!
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!
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
Accordions are a great way to group related information while allowing users to interactively show and hide content. In this video, Damon Cook goes in-depth on how to create an accessible accordion block using ACF PRO’s Repeater field.https://t.co/RXT0g25akN
— Advanced Custom Fields (@wp_acf) March 2, 2023
© 2023 Advanced Custom Fields.
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.