- An image editor that allows contributors to upload an image and then pan/zoom/crop to a specific image size.
- An editor that allows contributors to overlay caption on top of the cropped image.
- Output of multiple cropped & captioned images into a responsive, pinterest-style display
Creating the Image Editor Custom Field
Starting from a codebase with limited pan/zoom cropping functionality (http://danielhellier.com/imagecrop/), we refactored the jQuery component to support fixed-sized crop areas as well as implement a bounding box and also tied in a slider component to enable easy-to-use zooming. We also added in the capability to transmit the scaling/cropping coordinates to an application server for server-side processing.
Adding Text Captioning by using a Draggable, Editable <h3> Element
For this project, we needed to give contributors the ability to place a text overlay on the image. The word “and” would need to be automatically converted to uppercase and have a style applied via CSS. To enable the users to choose a color, we used the spectrum plugin for jQuery which generally worked as advertised.
Creating a Pinterest-Style Render Handler
Would you like to know more?