Explore The Transformation Options within The Froala New File Uploading Tool
Tired of the same old image editing options in your content editor? Get ready to unlock a new world of creative possibilities with Froala’s latest file-uploading feature!
Froala integrated Filestack to bring you a powerful, user-friendly file uploader that goes way beyond basic image cropping and resizing. With the Filestack integration, you can now transform your uploaded images in ways you never thought possible – right from within the Froala editor.
Imagine being able to apply eye-catching filters, adjust the brightness and contrast, or even swap out the background of your images, all with just a few clicks. Sounds intriguing? In this post, we’ll dive into the various image transformation options available through the Filestack TUI and show you how to unleash your creative side while building content for your Froala-powered website or app.
By the end, you’ll be equipped with the knowledge to take your visual content to the next level and leave your readers thoroughly impressed. So, what are you waiting for? Let’s get started!
Getting Started with the Transformation UI
To use the Transformation UI within the Froala editor, you’ll need to follow a few simple steps:
- Get a Filestack API Key: Filestack is the service that powers the Transformation UI. Get a free Filestack API key now.
- Include the Required Scripts and Stylesheets: In your HTML file, you’ll need to include the Filestack JavaScript library, the Transformation UI scripts, and the Transformation UI stylesheet. This will give you access to all the powerful image editing tools.
- Configure the Froala Editor: When you initialize the Froala editor, you’ll need to provide your Filestack API key in the
filestackOptions.filestackAPIsetting.
Here’s an example of what your HTML code might look like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" name="viewport" content="width=device-width, height=device-height, initial-scale=1.0,
maximum-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet"
type="text/css" />
<link rel="stylesheet" href="https://static.filestackapi.com/transforms-ui/2.x.x/transforms.css" />
</head>
<body>
<div id="froala-editor"> </div>
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>
<script src="https://static.filestackapi.com/filestack-js/3.32.0/filestack.min.js"></script>
<script src="https://static.filestackapi.com/filestack-drag-and-drop-js/1.1.1/filestack-drag-and-drop.min.js"></script>
<script src="https://static.filestackapi.com/transforms-ui/2.x.x/transforms.umd.min.js"></script>
<script>
new FroalaEditor("div#froala-editor",{
filestackOptions{
filestackAPI: 'yourAPIKey',
}
});
</script>
</body>
</html>
With this setup, an “Image Transformation” button will appear when you click on an image uploaded using Filestack. Clicking this button will open the Transformation UI, allowing you to edit the image in various ways before inserting it into the Froala editor.
If you want the Transformation UI to be available immediately after uploading an image using the “Filestack Upload” button, you can enable the transformationsUI option within the filestackOptions.pickerOptions setting.
<script>
new FroalaEditor("div#froala-editor",{
filestackOptions{
filestackAPI: 'yourAPIKey',
pickerOptions: {
transformationsUI: true,
}
}
});
</script>
Now when you click “Upload with Filestack”, you can select an image to upload. Once the image is uploaded, a thumbnail will appear, and an “Edit” button will appear on the right. Clicking the “Edit” button will open the transformation UI, allowing you to edit the image before inserting it into the editor.
If you are using a front-end framework, check the following guide:
Explore Transformation UI: A Powerful Image Editing Tool
The Transformation UI is an intuitive image editing tool that appears when you click on an image uploaded using Filestack. This tool allows you to make various changes and enhancements to your images right within the Froala editor.
When you open the Transformation UI, you’ll see the image displayed in the center of the editor. At the top, you’ll find a few helpful controls:
- Undo Button: On the left, you’ll see an “Undo” button that allows you to revert any changes you’ve made to the image.
- Zoom Options: In the center, you’ll find zoom controls that let you adjust the size of the image within the editor.
- Cancel and Save Buttons: On the left, you’ll see a “Cancel” button to close the editor without saving any changes, and a “Save” button to apply your edits and insert the updated image into the Froala editor.
At the bottom of the Transformation UI, you’ll find a variety of transformation options, including filters, adjustments, and overlays. Simply click on the option you want to apply it to the image. The changes will be shown in real time, so you can preview the results before finalizing your edits.
This powerful image editing tool empowers your users to create visually stunning content with ease. By allowing them to enhance and transform their images right within the Froala editor, you’re giving them the ability to elevate the visual appeal of their content and captivate their audience.
Available Transformation Options
The Transformation UI within the Froala editor provides a range of powerful tools to enhance your images. Let’s dive into the key features:
Crop
The Crop tool allows you to select a specific area of the image and remove the unwanted parts. This is useful for focusing the viewer’s attention on the most important part of the image. You can adjust the crop box by dragging the corners or edges, and the image will update in real-time. Once you’re satisfied with the crop, simply click the “Save” button to apply the changes.
Froala offers several pre-defined crop options:
- Portrait (16:9): This is ideal for social media posts, as it ensures images fit seamlessly on platforms like Instagram or Facebook.
- Square: A square-shaped crop that you can resize and position as needed.
- Circle: A circular crop that always maintains a perfect circle shape as you resize and position it.
- Custom: A rectangular crop that you can freely resize and position to suit your needs.
Resize
Resizing images is important for optimizing file size, fitting specific layouts, and ensuring consistent quality across devices. The Resize tool in the Transformation UI allows you to easily adjust the width and height of the image, while maintaining the original aspect ratio or changing it as needed. This gives you precise control over the final image size, helping you create a cohesive and visually appealing layout within the Froala editor.
Flip and Rotate
Users often need to flip or rotate images to correct the orientation or achieve a specific visual effect. The Transformation UI provides four options for this:
- Flip horizontally
- Flip vertically
- Rotate 90 degrees clockwise
- Rotate 90 degrees counter-clockwise
These tools empower users to optimize their images and ensure they are displayed correctly within the Froala editor.
Filters
The Transformation UI offers a variety of filters that can be applied to your images to alter their visual appeal. These filters range from subtle adjustments to dramatic effects, giving you the flexibility to find the perfect look for your content. You can experiment with different filters, adjust their intensity, and preview the changes in real time before saving the final image.
Enhance Presets
This feature smartly analyzes a photo and performs color correction and other enhancements to improve the overall quality of the image. You can choose from multiple presets to achieve the best results. Currently, it is available only when you open the Transformation UI from the File Picker. Here are the presets available with their purpose:
| Preset | Description |
| auto | Automatically selects the best enhancement settings for a photo. |
| vivid | Enhances depth and brightness in a photo. |
| beautify | Ideal for portraits, this preset scans each face in the photo and adjusts corrections individually for optimal results. |
| beautify_plus | Similar to Beautify, it applies stronger corrections with a broader range of modifications. |
| fix_dark | It is perfect for underexposed photos or dark subjects against bright backgrounds. Turning off contrast maximizes detail in shadow areas without blowing out highlights. |
| fix_noise | Detects and removes noise from photos while preserving details. Adjusts based on the ISO level and camera model. |
| fix_tint | Removes abnormal tints (yellow, blue, green, etc.) caused by various lighting conditions, such as fluorescent, infrared, ultraviolet, and tungsten lights. |
| outdoor | Enhances landscape photos by increasing color vibrancy and adjusting the contrast to reveal more detail in shadow areas. |
| fireworks | Corrects for night skies and highlights excess colors from fireworks. |
Image Adjustments
This feature allows users to adjust different image parameters to modify and enhance the visual appearance of an image. Here’s a list of different parameters you can adjust directly within the editor:
- Blur: Softens the image, reducing detail and sharpness.
- Brightness: Adjusts the overall lightness or darkness of the image.
- Contrast: Alters the difference between the light and dark areas of the image.
- Gamma: Adjusts the midtones of the image without affecting the shadows and highlights.
- Hue: Changes the overall color tone of the image.
- Noise: Adds or reduces random variations of brightness or color information in the image.
- Pixelate: This creates a mosaic effect by enlarging the pixels, making the image appear blocky.
- Saturation: Adjusts the intensity of the colors in the image.
These adjustments can be used individually or in combination to achieve the desired visual effect.
Overlay Text
The Transformation UI also allows users to overlay text on their images. This feature is useful for adding captions, titles, or other textual elements to enhance the visual communication of the content.
Users can choose from a variety of font styles, sizes, and colors, and position the text anywhere on the image. This empowers content creators to elevate their visuals and convey their message more effectively.
The text overlay tool provides a seamless way to integrate text and imagery, creating a cohesive and visually appealing final product.
Overlay Image
The Transformation UI also allows users to overlay additional images on top of the main image. This can be useful for adding logos, watermarks, or other visual elements to the image. Users can resize, position, rotate, and adjust the opacity of the overlaid image to achieve the desired effect.
This feature provides a flexible way to enhance the visual impact and branding of the content within the Froala editor. The real-time preview ensures users can experiment with different overlay options and find the perfect combination.
Image Border
The Transformation UI also offers the ability to add a border around the image. Users can customize the border width, color, and style to create a polished, professional visual look.
This feature is particularly useful for framing images, separating them from the surrounding content, or adding a decorative touch. The real-time preview allows users to experiment with different border options and find the perfect balance between the image and its presentation within the Froala editor.
Elevate Your Visual Content with Froala’s Transformation UI
The Filestack integration within the Froala editor has unlocked a whole new world of creative possibilities for content creators. With the powerful Transformation UI, you now have the ability to enhance your images in ways you never thought possible – right from within your content editor.
From applying eye-catching filters and adjusting brightness and contrast, to swapping backgrounds and overlaying text and graphics, the Transformation UI puts a suite of advanced image editing tools at your fingertips. This empowers you to elevate the visual appeal of your content and leave your readers thoroughly impressed.
So what are you waiting for? Take your visual content to new heights by exploring the Transformation UI within the Froala editor. Unlock your creative potential, captivate your audience, and watch your engagement soar. Get started with the Filestack integration today and see the difference it can make for your Froala-powered website or app.
No comment yet, add your voice below!