Forum Academy Marketplace Showcase Pricing Features

[New Plugin] Visual Move, Rotate, Resize

Move, rotate and resize an element or class of elements.
Elements can be transformed both visually and interactively on the front end or in workflows on the back end.

:high_brightness: Features:

  1. Move a element visually:
    move

  2. Resize an element visually:
    resize

  3. Rotate and element visually:
    rotate

  4. Move, rotate and resize the same elements in the back-end workflows. Keeping sync between both front-end and back-end transformations.

  5. Lock the aspect ratio for resizing.

  6. Restrict the transformations to a bounding container.

  7. Set the color of the controls box.

  8. Set snap distance for move, resize

  9. Set angle resolution for rotation

Limitations:

  1. Restrict and aspect ratio only work for visual transformation. Back-end actions will not be restricted.

Gotchas:

  1. Remember the hash or dot for class and ID field.
  2. The restrict field should be an element ID. Remember to include the has e.g. #myBox
  3. The plugin back-end actions are standalone and should be used only for simple transformations when you don’t wan the visual element.

Go checkout the demo!

We are actively monitoring this thread. If you have an questions, bug reports, feature request, please let us know. We aim for a 24hr response time during the working week.

You can also reach out at [email protected]

Click here for the Editor

Instructions:

  1. First install the amazing classify plugin.

  2. Make sure that you have activated the Expose Element ID option in Settings=>General
    Screenshot 2022-03-16 135229

  3. For a visual element.
    3.1) Drag the visual transformation element onto your page.
    3.2) Set its visibility to off.
    3.3) Add the class or element id into the class field. Classes need a dot (.img) and IDs need a hash (#myImg).
    3.4) Make sure your element has the same class/ID. Using classify you would put “myImg{addClass:” img"}" in the ID Attribute field to add the ID myImg and class img to your element. See the classify docs for details.
    Screenshot 2022-03-16 135945
    3.5) Complete the other option fields on the Visual Transform element as needed.
    3.6) Add a workflow to make the Visual Transform Element visible once the page is loaded.
    3.7) Load your page and play!

  4. Back-end Workflows
    4.1) For back-end workflows to work, you need to make sure you have a visual transform element on your page an visible.
    4.2) Click Add Action => Element Actions => Move / Rotate / Resize a Visual Transform
    4.3) Complete fields as required
    4.4) Fire action

  5. Additionally there are standalone back-end actions. Be warned these don’t play nice with elements that are also being used by the visual component. Use the element back-end actions for these.
    5.1) Click Add Action => Plugins => Move & Rotate or Resize
    5.2) Fill out fields as needed.
    5.3) Fire actions.

7 Likes

Hello, this is awesome! I have a question however. Would this work for mobile apps as well? I was originally using the JQuery bubble drag and drop plugin but it just randomly stopped working about two days ago, not sure why. So if this could work for mobile apps, it would be fantastic!

Hi @julpereira82 !

It does work on mobile! We are busy doing some refactoring and optimizations to better serve mobile apps, those should be done by the end of the week.

Hi there i just discover this awesome plugin, i have a few presale questions

  1. can change the style of the resize dots?
  2. can turn on the Lock Aspect Ratio with shift?
  3. can resize any element?

Hi @yorgio1024

To answer your questions:

  1. Currently you can only change the color of the resize dots.
  2. No there are no keyboard shortcuts.
  3. Works with most elements. Videos don’t work at the moment.

Any update for this plugin?

Hi @yorgio1024

There have been some minor updates. The font size now can be set to change with resize of the element, there has been some backend refactoring and states are handled better. An aspect ratio and dot size change are on the roadmap but not due for a couple weeks.