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.
Features:
-
Move a element visually:
-
Resize an element visually:
-
Rotate and element visually:
-
Move, rotate and resize the same elements in the back-end workflows. Keeping sync between both front-end and back-end transformations.
-
Lock the aspect ratio for resizing.
-
Restrict the transformations to a bounding container.
-
Set the color of the controls box.
-
Set snap distance for move, resize
-
Set angle resolution for rotation
Limitations:
- Restrict and aspect ratio only work for visual transformation. Back-end actions will not be restricted.
Gotchas:
- Remember the hash or dot for class and ID field.
- The restrict field should be an element ID. Remember to include the has e.g. #myBox
- 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:
-
First install the amazing classify plugin.
-
Make sure that you have activated the Expose Element ID option in Settings=>General
-
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.
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! -
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 -
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.