[image field] image replacing improvement

• virgodesign

• December 30, 2015 at 9:23 pm

The acf image field could be drastically improved by adding an action button that let a user to change image in only one click.
Actually you have to do two steps to change an image. You have to remove the current image (first click) and then choose another image (second click) from media library popup.

You can merge this two steps in one by adding a new easy action button as shown in the screenshot below.

clicking the new swap button a user can change image fast and in only one action.

Please take in strong consideration this improvement.
It can be also extended to the others media fields.

image-replac....jpg

• John Huebner

• January 1, 2016 at 2:59 am

This has been requested several times in the past. I will attempt to bring this to the developer’s attention.

• EdwinSnotje

• October 13, 2020 at 11:53 pm

I had the same issue with a client who didn’t think of deleting the image in order to select a new one (or to upload a new one). I solved it by preventing ACF to hide the ‘Add new image’ button that is visible when no image is selected yet. If you have an admin.css stylesheet just add this:

.acf-image-uploader.has-value .hide-if-value {
    display: block;
    clear: both;
    float: left;
    margin: 1em 0;
}

It’s the first directive that does the trick, the rest is for some proper formatting of the button when there is an image present.

If there isn’t an admin stylesheet you just enqueue one with this rule.

The button remains visible when there is already an image, so you can use it to select a new one. It works for replacing.

I changed .po file accordingly to reflect this possibility: change ‘Add image’ to something like ‘Select image’ so it’s more generic.

• John Huebner

• October 14, 2020 at 1:51 am

@edwinsnotje very nice start, I wanted to add this to a current project as soon as I saw your reply. Try this:

.acf-image-uploader.has-value .hide-if-value {
  display: block;
  clear: both;
  float: left;
  margin: 1em 0;
}
.acf-image-uploader.has-value .hide-if-value p {
  visibility: hidden;
}
.acf-image-uploader.has-value .hide-if-value p a {
  visibility: visible;
  float: left;
  color: transparent;
  padding-right: 2.5em;
}
.acf-image-uploader.has-value .hide-if-value p a:before {
  visibility: visible;
  content: "Change Image";
  position: absolute;
  color: #0071a1;
}