Image Editor

Last Updated: Aug 12, 2024
documentation for the dotCMS Content Management System

dotCMS offers an image editing tool for the modification of uploaded image/binary image file types.

Note:

  • The Image editor is available only on dotCMS Enterprise licensed editions.
  • The Image editor does not work with SVG image files.

To use the image editor first upload an image file to a folder on the website browser. Now edit that image and click on the “Edit Image” button below the image thumbnail.

Edit an uploaded image

The image editor has tools for users to do all of the following to an image:

  • Resize
  • Rotate and/or Flip
  • Crop
  • Adjust Brightness, Hue, and Saturation
  • Compress an image
  • Save an image in another format
  • Clip an image and store in the dotCMS Image Clipboard

In the example below, the original image is being resized to 25% of its original width using the resize slider. Alternately a width or height can also be typed into the resize dimensions boxes provided to resize the image. The image editor will scale the image proportionally so that no stretching is allowed when image sizes are adjusted. Remember that ANY changes to an image can be undone by clicking on the name of the filter under filters:

Resize image

The Brightness, Hue, and Saturation levels of the original image have been modified below to add a surreal or alien effect to the image. To undo the changes to this example, the Hsb filter is clicked on under Filters to remove this modification while still allowing the resize filter to remain.

Brightness, Hue, and Saturation

Clicking on the cropping tool button in the image editor will display a cropping screen that overlays the image (see below), simply drag the bottom right hand corner of the cropping screen to adjust the cropping size. Alternately, the cropping screen dimensions can be altered by typing height and width values to the left of the crop button. The cropping screen can be moved by clicking and holding down the mouse button in the center of the screen and moving the mouse over the image to position the screen over the original image. To crop the image, simply click the crop button again once the cropping screen has the proper dimensions and position for the desired crop of the original image.

Cropping tool

Once the image is properly edited and ready for placement inside a piece of content, simply click the “clip” button at the bottom of the image editor to save the image to the dotCMS Image Clipboard. Then save the desired changes to the image by clicking the save button.

Special Note: If the image is a binary image inside a piece of content, then the content will also need to be saved, otherwise the saved image changes to the binary content field will be lost.

Be aware that saving the properties in the image editor does not save the changes to the file until the file (or content if binary image), is saved. After the file is saved and re-edited, the properties (width, height, filesize, etc.), will reflect the changes made from the image editor.

Save image

Now that the image has been edited, saved in the dotCMS Image Clipboard (in the image editor), and saved, the image can then be placed in a WYSIWYG field in any piece of content by clicking on thedotCMS Image Clipboard tool button in the WYSIWYG.

Image clipboard

To place a image saved to the dotCMS Image Clipboard, simply open a piece of content with a WYSIWYG field, place the cursor at a place in the WYSIWYG field where the image should be placed, and then click the dotCMS Image Clipboard button (shown above). After clicking on thedotCMS Image Clipboard tool, a window will display all the images that have been clipped during the current browser session.

After placing the image in the WYSIWYG, click on the image and then click the image icon in the WYSIWYG toolbar to edit the General, Appearance, and Advanced image properties (see below). This will allow for the quick addition of padding, borders, alignment, etc, on the image.

Align image

The example article below shows the image that was edited above placed directly into this documentation using the dotCMS Image Clipboard* tool available in the WYSIWYG field.


Garden of the Gods - Colorado Springs, CO


Recreational opportunities

The Garden of the Gods park contains numerous trails for hiking, walking, mountain biking and horseback riding. One of the most popular trails, named Perkins, has been paved in an effort to combat the erosion of the park's central garden caused by its numerous visitors. Visitors receive frequent reminders to watch out for rattlesnakes in the hot days of summer.
This is a very popular bicycle-riding area because of the scenic views, safe one-way recently paved roads, and healthy clean air.

Genesis of the park

Entrance to the park is free according to the wish of Charles Elliott Perkins, whose children donated the land to the city of Colorado Springs in 1909.

Name

The name of the park dates back to August 1859 when two surveyors helping to set up nearby Colorado City were exploring the nearby areas. Upon discovering the site, one of the surveyors, M. S. Beach, suggested that it would be a “capital place for a beer garden.” His companion, the young Rufus Cable, awestruck by the impressive rock formations, exclaimed, “Beer Garden! Why it is a fit place for the gods to assemble. We will call it the Garden of the Gods.” The beer garden never materialized, but the name stuck.
In 2006 a dinosaur species discovered there, was named after the park: Theiophytalia kerri.

Text Source: Wikipedia- Garden of the Gods

On this page

×

We Dig Feedback

Selected excerpt:

×