i cant change upload image on my forms

hello, I am trying to do in my form that can upload and

crop a photo with cropperjs but I have a problem and it

 seems that the id used in the input of the product form

 is not <input type="hidden" name="feat_image_id"

 class="dokan-feat-image-id" value="<?php echo esc_attr
(
 $feat_image_id ); ? >"> because when I set it up it

 works but if I put that id "feat_image_id" does not
 
recognize it as the main photo of the ad I need to know

 how would the id to implement the cropperjs on our
 
website because we have problems with the images to
 
upload them take very long and we realized that if you
 
upload a photo of 2000x2000 takes about 4 sec then our
 
solution would be that the customer can crop before

 uploading the images greetings and thanks I leave the

 codes I have that if I work..: but dont save it in my

 forms on new product or edit product


edit-product-single.php

<input type="file" id="image-upload-input" name="image" accept="image/*">
<div id="image-preview"></div>

fuctions.php

function initialize_cropper_js() {
    ?>
    <script>

jQuery(document).ready(function($) {
document.addEventListener("DOMContentLoaded", function() {
    var imageUploadInput = document.getElementById('image-upload-input'); // Reemplaza 'image-preview' con el ID o la clase de tu campo de selección de imágenes en el formulario de Dokan
    var imagePreview = document.getElementById('feat_image_id');

    imageUploadInput.addEventListener('change', function() {
        var file = this.files[0];
        var reader = new FileReader();

        reader.onload = function(e) {
            var img = document.createElement('img');
            img.src = e.target.result;
            imagePreview.innerHTML = ''; // Limpiar la vista previa anterior
            imagePreview.appendChild(img);

            var cropper = new Cropper(img, {
                aspectRatio: 1 / 1, // Opcional: define la relación de aspecto deseada
                viewMode: 2, // Opcional: modo de vista (0, 1, 2, 3)
                dragMode: 'crop', // Opcional: modo de arrastre ('crop', 'move', 'none')
                responsive: true // Opcional: activar el modo responsive
            });
        };

        reader.readAsDataURL(file);
    });
});
});
    </script>
    <?php
}
add_action( 'wp_footer', 'initialize_cropper_js' );

• This topic was modified 8 months, 3 weeks ago by gabryah69.
• This topic was modified 8 months, 3 weeks ago by gabryah69.