Support

Account

Home Forums Feature Requests [image field] image replacing improvement

Solving

[image field] image replacing improvement

  • 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.

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

  • 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.

  • @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;
    }
    
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

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.