Skip to main content area Skip to institutional navigation Skip to sub-navigation

Style an Image

See the Layouts & Styles Guides section for exaples of styled images and the Best Practices section for suggestions on when to use the different options.


Adding a photo frame with a drop shadow:

  1. Insert an image into the WYSIWYG of a Web Page Content item.
  2. Click on the image to highlight it.
  3. Select the "Insert/Edit Image" button in the toolbar of the WYSIWYG.
  4. In the dialogue box that appears, chose the "Appearance" tab.
  5. Select "photo" from the "Class" drop down field.
  6. Continue styling or formatting your image as desired.
  7. Click the "Insert" button at the bottom when you are done.

Watch the video >>


Adding a border:

  1. Insert an image into the WYSIWYG of a Web Page Content item.
  2. Click on the image to highlight it.
  3. Select the "Insert/Edit Image" button in the toolbar of the WYSIWYG.
  4. In the dialogue box that appears, chose the "Appearance" tab.
  5. Input a number of pixels in the "Border" field.  For example, enter a "1" for a 1 pixel border.
  6. Continue styling or formatting your image as desired.
  7. Click the "Insert" button at the bottom when you are done.
Watch the video >>

Creating a Lightbox:

Note: To create a lightbox, you will need two images uploaded to dotCMS.  One should be the smaller size that is inserted into the webpage and the other should be the larger version displayed once the image is clicked on.

  1. Insert an image into the WYSIWYG of a Web Page Content item.
  2. Click on the image to select it.
  3. Select the "Insert/Edit Link" button in the toolbar of the WYSIWYG.
  4. Click the browse button to the right of the "Link URL" field
  5. Navigate to the folder in dotCMS where you uploaded the larger of your two images.
  6. Click on the image you want to select it.
  7. Back in the "Insert/Edit Link" dialogue box, click the "Advanced" tab.
  8. Type "lighbox" in the field labeled "Classes".
  9. Go back to the "General" tab and confirm that the "Class" drop down now reads "lightbox".
  10. Enter a description into the "Title" field.
  11. Continue styling or formatting your image as desired.
  12. Click the "Insert" button at the bottom when you are done.
Watch the video >>