Zoom and rotate image

[dhunink]

Hi,
ever since using Pro I’ve challenged myself to accomplish things with a minimum of custom coding, although I’m quite capable in PHP/JS/CSS. So far I’ve been able to achieve that for a dew years, apart from some custom CSS.

Recently I created this page which has four buttons that control the display of the image: zoom in or out, rotate left and rotate right. As it was just a POC, it isn’t perfect. For example: when change the images dimensions, the div holding the image isn’t resizing, although it’s set to auto-width and auto-height.
I could write more custom code for this, but I was wondering, given all the amazing code that has been build already into Pro, what I do to be able to rotate and zoom the image with as minimum of custom-code possible.

Thanks in advance for any pointers into interesting hints that will help me solve this without custom coding

[Ismael]

Hello @dhunink,

Thank you for the inquiry.

Unfortunately, this won’t be possible without at least a custom script or some custom css. You’ll need to add a click event listener to the anchor tags or buttons to toggle class names (e.g., rotate-90-deg ) or adjust the attributes and styles of the target element. It looks like you’ve already started implementing this with your this.rocketonclick function on the anchors. You will have to extend this to achieve the desired functionality.

You might find this APi useful: https://theme.co/docs/rivet-api

Best regards,
Themeco

[dhunink]

Hi @Ismael,

I indeed started with something, as as POC, and completed it today. I understand there isn’t some existing element or snippet inside Pro that could be used for this, so I ended up writhing my own JS.

Just in case anyone lands on this topic through a search, my solution is listed below.
I am curious tough, as I always like to learn, what exactly would be the benefits of transforming this native JS click-events to Rivet-API-events, in this example?

The page structure

The custom JS

  var img = document.getElementById("image_card");
  var img_wrapper = document.getElementById("image_card_wrapper");
  var currWidth = img.clientWidth;
  var currHeight = img.clientHeight;
  let rotation = 0;

//We only update the height; the width is auto-adjusted
function updateImageHeight(){
  if (rotation % 180 === 0) {
    img.style.height = currHeight + "px";
  } else {
    img.style.height = currWidth + "px";
  }
}

document.getElementById("button_image_size_minus").onclick = function(){
  currWidth = 0.9*currWidth;
  currHeight = 0.9*currHeight;
  img.style.width = currWidth + "px";
  img.style.height = currHeight + "px";
}

document.getElementById("button_image_size_plus").onclick = function(){
  currWidth = 1.1*currWidth;
  currHeight = 1.1*currHeight;
  img.style.width = currWidth + "px";
  img.style.height = currHeight + "px";
}

document.getElementById("button_image_rotate_left").onclick = function(){
  rotation += 90;
  img.style.transform = `rotate(${rotation}deg)`;
  img.style.transition = 'transform 0.3s ease';
  updateImageHeight();
}

document.getElementById("button_image_rotate_right").onclick = function(){
 	rotation -= 90;
  img.style.transform = `rotate(${rotation}deg)`;
  img.style.transition = 'transform 0.3s ease'; 
	updateImageHeight();
}

[ruenel]

Hello @dhunink,

Thanks for sharing the code that you have come up with to get your issue resolved.

Cheers.

[dhunink]

Hi @ruenel,

I also asked one final question

“I am curious tough, as I always like to learn, what exactly would be the benefits of transforming this native JS click-events to Rivet-API-events, in this example?”

[nabeel]

Hi @dhunink,

In your example, converting it to Rivet API will give you multiple benefits, for example; with rivet.attach your code rebinds automatically when elements are added back to the DOM. Instead of using getElementById as in your example (which can break if multiple instances exist), Rivet encourages component-scoped logic using data-* attributes. Rivet API also prevents memory leaks and event duplication .

Hope this helps!

[JvP]

Perhaps some image manipulation tools could be added to Pro so stuff like this can be done through the UI. Would be nice.

[prakash_s]

Hello @JvP,

Thanks for your suggestion, having image manipulation tools directly within the Pro theme UI would definitely enhance usability and streamline workflows. I’ll go ahead and share this feedback with our development team for consideration in a future update.

Thanks

[dhunink]

I definitely second that! I see some real potential here!

[ruenel]

Awesome! We will be looking forward for this.