Hi,

Regarding the issue you are facing with cropper.js, the example page you shared is built using Bootstrap 3 modal syntax, while our template is based on Bootstrap 5.

Because of this difference, the modal JavaScript structure and required attributes are not fully compatible, which can cause conflicts or unexpected behaviour.

If you wish to use that cropper example together with this template, you will need to update the modal markup and related JavaScript to follow Bootstrap 5 syntax and event handling.

After aligning the modal structure with Bootstrap 5 standards, the cropper integration should work correctly.

Best Regards, Sean.

Yes, I also had a version with Bootstrap 5. The modal appears, but it can’t be selected because it’s apparently behind the toolbar. Even setting the z-index on the modal didn’t solve the problem.

Hi,

You may send us the bs5 version that you have created so that we can help you debug on our side.

Best Regards, Sean.

Hi, i use the Version Bootstrap v5.3.8. Sorry my bad english. This is the Error: TypeError: bs_modal.modal is not a function

Hi,

You might need to tell us whether this error is come from the plugin or you have customise the plugin.

Best Regards, Sean.

Hi, I haven’t changed anything; this error occurs as soon as I select the image and click crop in the modal. The modal doesn’t open if I have the template’s vendor.min.js file in the footer. If I remove it, the modal opens, but then the template’s menu functions no longer work.

This is the script: <script src=”https://code.jquery.com/jquery-3.5.1.min.js”></script>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js”></script> <script>

var bs_modal = $('#modal');
var image = document.getElementById('image');
var uid = document.getElementById('uid');
var cropper,reader,file;

$("body").on("change", ".image", function(e) {
    var files = e.target.files;
    var done = function(url) {
        image.src = url;
        bs_modal.modal('show');
    };
});

if (files && files.length > 0) {
    file = files[0];
}

if (URL) {
    done(URL.createObjectURL(file));
} else if (FileReader) {
    reader = new FileReader();
    reader.onload = function(e) {
        done(reader.result);
    };
    reader.readAsDataURL(file);
}

bs_modal.on('shown.bs.modal', function() {
    cropper = new Cropper(image,{
        aspectRatio: 1,
        viewMode: 3,
        preview: '.preview'
    });
}).on('hidden.bs.modal', function() {
    cropper.destroy();
    cropper = null;
});

$("#crop").click(function() {
    canvas = cropper.getCroppedCanvas({
        width: 300,
        height: 300,
    });
});

canvas.toBlob(function(blob) {
    url = URL.createObjectURL(blob);
    var reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onloadend = function() {
        var base64data = reader.result;
        //alert(base64data);
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "../../crop_image_upload.php",
            data: {uid, image: base64data},
            success: function(data) { 
                bs_modal.modal('hide');
});

}
    });
};

</script>

the modal:

Bild zuschneiden

<button type=”button” class=”btn-close” data-bs-dismiss=”modal” aria-label=”Close”></button> × </button> <button type=”button” class=”btn btn-secondary” data-bs-dismiss=”modal”>Abbrechen</button> <button type=”button” class=”btn btn-primary” id=”crop”>Zuschneiden</button>

sorry the modal:

Bild zuschneiden

<button type=”button” class=”btn-close” data-bs-dismiss=”modal” aria-label=”Close”></button> × </button> <button type=”button” class=”btn btn-secondary” data-bs-dismiss=”modal”>Abbrechen</button> <button type=”button” class=”btn btn-primary” id=”crop”>Zuschneiden</button>

Hi,

You may paste the script to https://pastebin.com/ and share the link here so that we know what issue that you are facing right now. OR Send us a message via https://themeforest.net/user/seantheme

p.s by right you do not need required to include the jquery again as it is already included in vendor.min.js.

Best Regards, Sean.

Here’s the link. My script is split into four files, which are joined together using include statements. I’ve now combined everything into test.php. However, I haven’t removed the PHP variables or the other includes. But I think that’s enough to assess the code.

Link: https://pastebin.com/jAdxNHnm

Password: 2z8vK5Aix7

Best Regards, Pascal

Hi,

We have quickly scan through your code and found that you are not using bootstrap 5 javascript syntax.

e.g

the modal should use vanilla js instead of jquery

from var bs_modal = $(’#modal’);

to var bs_modal = new bootstrap.Modal(’#modal’);

and

bs_modal.modal(‘show’);

change to

bs_modal.show();

Best Regards, Sean.

Thank you so much, I now have a modal, but I can’t move the frame in it and the switch cutting function no longer works either.

Hi,

We found that you are not including the vendor.min.js in your site and you have commented out the jquery. For that case, you may un-comment back the jquery before the copper js.

Best Regards, Sean.

How can I send a screenshot?

Made the changes:

https://pastebin.com/CkULtX0R

PW: h3By5LcuB1

Hi,

Regarding the issue you are facing with cropper.js, the example page you shared is built using Bootstrap 3 modal syntax, while our template is based on Bootstrap 5.

Because of this difference, the modal JavaScript structure and required attributes are not fully compatible, which can cause conflicts or unexpected behaviour.

If you wish to use that cropper example together with this template, you will need to update the modal markup and related JavaScript to follow Bootstrap 5 syntax and event handling.

After aligning the modal structure with Bootstrap 5 standards, the cropper integration should work correctly.

Best Regards, Sean.

I now have a newer version with Bootstrap 5. I’ve noticed that bootstrap.bundle.js is not compatible with vendor.min.js. I have vendor.min.js in the footer and bootstrap.bundle.js in the header.

But the way I wrote it, I get a syntax error. bs_modal.addEventListener(‘shown.bs.modal’, function() { cropper = new Cropper(image,{ aspectRatio: 1, viewMode: 3, preview: ’.preview’ }); bs_modal.addEventListener(‘hidden.bs.modal’, function() { cropper.destroy(); cropper = null; });

Console: unexpected token

bs_modal.addEventListener(‘shown.bs.modal’, function() {

...

}}; bs_modal.addEventListener(‘hidden.bs.modal’, function() {

...

});

Hi,

Thank you for your comment and feedback. Regarding your question, you may add a span with the css class for the span container inside the table header with w-30px and d-block will solve your issue.

e.g

https://pastebin.com/CCvcpmzk

Best Regards, Sean.

Hi Sean,

Thank you for the quick response. I notice that when I add a span with the css class for the span container inside the table header in the original file from the template, it alters the column width as expected.

However, when I try to implement the same span in my page/file, it does not work. Perhaps this is because of the changes I have made to the file. What are the changes I have made to the file? I changed the extension to php, included a php block before the html, made a call to a db, added php in the body, added filters for each column in the footer. Please note the file with the changes I have made:

e.g

https://paste.centos.org/view/078cbcaf

Please let me know if you think any of these changes is the cause of the column width not adjusting, or it stems from somewhere else.

Thank you, Chad

Hi,

Hi, we’ve reviewed your code and noticed that the width is set to 5px. This causes the text to overflow while still maintaining the element’s minimum width, which is why the width appears unchanged. You can try setting the width to w-100px and test again.”

Best Regards, Sean.