Page Settings

  • Show menu: true
  • Use horizontal menu: true
  • Show sidebar: right
  • Skip to main content

    Style an Image

    Below are some of the style and display options for images as well as an explanation of when you would use each one.


    Examples:

    Ballerina with style "photo" Ballerina with lightbox style Ballerina with 1 pixel border Ballerina - plain
    "Photo" Style Lightbox Style
    (click on the image)
    1 pixel border Plain

    Explanation:

    • "Photo" Style - For most of the images in the main body of your pages you should use the "photo" style to create consistency between all the pages of the Colorado College website and to give your content a more polished look.  Adding the "photo" style when you insert an image into your page will give the image a 3D effect by adding a drop shadow.  It also makes the image look more like a physical photograph because it adds a small white frame around it.
       
    • Lightbox Style - This style is very cool and slightly more complicated.  It will almost always be combined with the "photo" style and can be used on practically any image that you include in the body of your webpages.  When the "lightbox" style is applied to an image, the image becomes clickable.  When the image is clicked on, a pop-up layer with a larger image and a caption is displayed over the rest of the webpage to show more detail.
    • 1 pixel border - A border can be added to images to give the edge more definition where appropriate.  For instance, in the images above you will notice that the ballerina is on a white background, so the white border created around the image by the "photo" style is not noticeable.  Combining the "photo" style and a thin border gives the image a more appealing look.
    • Plain - Leaving an image completely unstyled is typically not a good idea.  It looks rather flat and uninteresting.  The feel of the plain images conflicts with that of the other photos across the Colorado College site as well as the feel of the overall design.

    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, select "photo" from the "Class" drop down field.
    5. Continue styling or formatting your image as desired.
    6. 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, choose the "Advanced" 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 "Ok" button at the bottom when you are done.

    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.