XF 2.2 AI gave me code to allow drag to resize images

colcar

colcar

Active member
I asked ChatGPT to write some code that would allow my users to click and drag images to resize them.

I'm not used to adding js to my templates so I'm not sure which template to put it in, if it goes in the HEAD or BODY or if it needs to be converted into Xenforo code or something?

Simple advice would be greatly appreciated. Here is the code it gave me:

Code: 
<script src="https://cdn.interactjs.io/v1.10.17/interactjs/index.js"></script>

    $(document).ready(function() {
  interact(".bbWrapper img")
    .draggable({
      onmove: function(event) {
        var target = event.target;
        var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
        var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

        target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
        target.setAttribute('data-x', x);
        target.setAttribute('data-y', y);
      }
    })
    .resizable({
      edges: { left: true, right: true, top: true, bottom: true },
      onmove: function(event) {
        var target = event.target;
        var x = (parseFloat(target.getAttribute('data-x')) || 0);
        var y = (parseFloat(target.getAttribute('data-y')) || 0);

        target.style.width = event.rect.width + 'px';
        target.style.height = event.rect.height + 'px';

        target.style.transform = 'translate(' + (x + event.deltaRect.left) + 'px, ' + (y + event.deltaRect.top) + 'px)';
        target.setAttribute('data-x', x + event.deltaRect.left);
        target.setAttribute('data-y', y + event.deltaRect.top);
      }
    })
    .on('tap', function(event) {
      event.preventDefault();
    });

  // Reset image position and size on double-click
  $(".bbWrapper img").on("dblclick", function() {
    var target = event.target;
    target.style.transform = '';
    target.style.width = '';
    target.style.height = '';
    target.setAttribute('data-x', 0);
    target.setAttribute('data-y', 0);
  });
});
 
Sort by date Sort by votes
I've tried putting it in page_container and helper_js_global just as it is below but it doesn't work unfortunately.

If anyone can offer some advice I would appreciate it (y):)

Code: 
<script src="https://cdn.interactjs.io/v1.10.17/interactjs/index.js"></script>

    <script>
$(document).ready(function() {
  interact(".bbWrapper img")
    .draggable({
      onmove: function(event) {
        var target = event.target;
        var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
        var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

        target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
        target.setAttribute('data-x', x);
        target.setAttribute('data-y', y);
      }
    })
    .resizable({
      edges: { left: true, right: true, top: true, bottom: true },
      onmove: function(event) {
        var target = event.target;
        var x = (parseFloat(target.getAttribute('data-x')) || 0);
        var y = (parseFloat(target.getAttribute('data-y')) || 0);

        target.style.width = event.rect.width + 'px';
        target.style.height = event.rect.height + 'px';

        target.style.transform = 'translate(' + (x + event.deltaRect.left) + 'px, ' + (y + event.deltaRect.top) + 'px)';
        target.setAttribute('data-x', x + event.deltaRect.left);
        target.setAttribute('data-y', y + event.deltaRect.top);
      }
    })
    .on('tap', function(event) {
      event.preventDefault();
    });

  // Reset image position and size on double-click
  $(".bbWrapper img").on("dblclick", function() {
    var target = event.target;
    target.style.transform = '';
    target.style.width = '';
    target.style.height = '';
    target.setAttribute('data-x', 0);
    target.setAttribute('data-y', 0);
  });
});
</script>
 
Upvote 0 Downvote
Kevin said:
What are you trying to accomplish that the existing editor functions in XF to resize images doesn't do? 🤔


Did you ask ChatGPT? 🤣
Click to expand...
When I use Reddit I have a browser extension called Reddit Enhancement Suite that has a "drag to resize" function where you can click and drag on images to enlarge them, I want this functionality for my forum if possible.

Actually I did ask ChatGPT what template to put it in, it said either page_container or helper_js_global
 
Upvote 0 Downvote
colcar said:
When I use Reddit I have a browser extension called Reddit Enhancement Suite that has a "drag to resize" function where you can click and drag on images to enlarge them, I want this functionality for my forum if possible.
Click to expand...
But what are you trying to do that the existing editor can't do? 🤔

When you insert an image into the XF editor and then click on it you can drag the corners to make the image inline smaller or larger.

3951143570_c1a8a2495e_k.webp1677037433556.webp
 
Upvote 0 Downvote
colcar said:
<script src="https://cdn.interactjs.io/v1.10.17/interactjs/index.js"></script>
Click to expand...
This isn't the correct URL as far as I can see. It's not the one they're using in their documentation.

HTML: 
<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>

Also rather than using <script> tags for the code, we'd recommend using <xf:js>.

This ensures the script is deferred to the correct position. Notably it needs to be included after jQuery is loaded, and using <xf:js> tags instead of <script> tags ensures that.

With those changes, it kinda works but I suspect you'll want to make more changes. I suspect you don't want the images to be movable, for example.

You'll also likely run into issues with images that would load the lightbox. Each time you let go of one of the resize handles, the click is registered to open the lightbox.

I can't really give any more insight or suggest how to fix that.
 
Upvote 0 Downvote
Chris D said:
This isn't the correct URL as far as I can see. It's not the one they're using in their documentation.

HTML: 
<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>

Also rather than using <script> tags for the code, we'd recommend using <xf:js>.

This ensures the script is deferred to the correct position. Notably it needs to be included after jQuery is loaded, and using <xf:js> tags instead of <script> tags ensures that.

With those changes, it kinda works but I suspect you'll want to make more changes. I suspect you don't want the images to be movable, for example.

You'll also likely run into issues with images that would load the lightbox. Each time you let go of one of the resize handles, the click is registered to open the lightbox.

I can't really give any more insight or suggest how to fix that.
Click to expand...
Ah ok thanks everyone for your help, was mostly interested to know if AI could churn out working code for XF.

I doubt I have the skill or patience to get this working but if anyone sees an addon with the functionality I want please do let me know (y)
 
Upvote 0 Downvote
You must log in or register to reply here.
Back
Top Bottom