A jQuery script to rearrange images and labels for the Select Image field in Ninja Forms. This code ensures images appear above the label text by swapping their positions dynamically. It waits for Ninja Forms to fully load before applying the changes, adds a 5px bottom margin to images, and is optimized for WordPress compatibility.

ninja-forms-select-image-rearrange-label-image-position.js

/**
 * Rearranges label and image elements in the Select Image field
 * @author Faisal Ahammad <[email protected]>
 */

jQuery(document).ready(function ($) {
  function waitForLabels() {
    if ($(".listimage-container label").length) {
      $(".listimage-container label").each(function () {
        var $this = $(this);
        var image = $this.find("img");
        var text = $this.contents().not(image);

        $this.empty();
        $this.append(image);
        $this.append(text);

        image.css("margin-bottom", "5px");
      });
    } else {
      setTimeout(waitForLabels, 100); // Retry after 100ms
    }
  }

  waitForLabels();
});