Page Settings

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

    Upload an Image

    Creating and editing content will often times require you to add images to page content. Below is information on how and the best ways to get photos on webpages.


    Uploading Images:

    • It's best to have an "images" folder in the main level of content for your site in dotCMS. This will allow you to keep all your images in one place to allow for easier searching, sorting, and organization.
    • Most of your image editing (cropping, color adjustment, file size) should be done before uploading an image into dotCMS.  dotCMS does have some image editing features for your convenience, but they are fairly limited.
    • Make sure your image is named descriptively before uploading it.
      • "JohnSmithBigSmile.jpg" is a much better name than "0507-R45Q7632465.jpg"
    • Remember: Before doing anything else when creating content, you should choose the folder where you want to save your image file or "CC - Photo/Image" item.

    Image File Preparations:

    Most of your image editing should be done before you upload the file into dotCMS, which has limited image editing capabilities.  This practice will also help eliminate confusion when looking at your files in dotCMS and it will conserve space.  Review the recommenations for organizing your image files and learn more about the different ways you can upload images to use on your site.

    Several set image dimensions are required in various standard places throughout the site.  Below is your guide to which sizes are used in what locations.

    Image Info BoxIf you ever have a question about what dimensions your image should be and you happen to already be in dotCMS, please note that you can also find image dimensions information by clicking in the "Information" icon of the container where you are adding your image.

    How to Resize Images before Uploading to dotCMS

    Excluding background/banner photos, it’s best to resize photos to smaller than 800 pixels (width) by 800 pixels (height) before uploading. If your page has photos that have been uploaded to dotCMS at a large pixel size (e.g., 2000px by 3000px), your webpage will load slowly because of the photo size; even though you may have set the photo to display at a smaller size, the page will still load the original file size.

    On a Mac

    • Open the image in "Preview" 
    • Click the "Tools" Menu and then click "Adjust Size..."
    • In the "Image dimensions" dialog box that appears, type in the desired width in pixels, or percentage, which will then adjust the height to scale proportionately. Make sure that "Scale proportionally" is checked
    • Click OK and save your image

    On a PC

    • Open the photo in "Paint"
    • Click the "Resize" button in the "Home" tab
    • In the "Resize and Skew" dialog box that appears, adjust the size in percentages or pixels. Make sure "Maintain aspect ratio" is checked
    • Click OK and save your image

    Image Descriptions and Titles

    It's very important when inserting images that you fill in a description in both the "image description" and "title" fields that you'll see in the insert image dialogue box.  This is extremely important because site visitors who may have screen readers or text-only browsers rely on these fields in order to understand your page.  See below for the difference:

    It's very important to use the "Image description" and "title" field when inserting an image
    This picture is good - both the "image description" and "title" fields were filled out (you can tell by mousing over the image for a few seconds, you get a text description) This picture is bad - neither the "image description" nor "title" fields were filled out, making this image impossible for screen readers or text-based browsers to understand (when you mouse over, no text appears)

    Uploading Files into dotCMS

    Uploading to a folder:

    1. Using the Website Browser in dotCMS, navigate to the folder (typically, it's the "documents" or "docs" folder in your main folder) where you want to save your image.
    2. In the upper right of the screen, click on the "Add New" drop down (▼symbol) and select "Image or File".
    3. Keep "File Asset" as the type by simply clicking "Select" when prompted with the "Select the type of File Asset you wish to upload:" dialogue box.
    4. In the "Upload New File" field, click the "Choose File" button.
    5. Browse to the image on your computer, select it, and click "Choose".
    6. Fill in the "Title" and "Description" fields and then click "Save and Publish".

    Watch the video >>


    Uploading multiple images to a folder:

    1. Using the Website Browser in dotCMS, navigate to the folder where you want to save your images.
    2. In the upper right of the screen, click on the "Add New" drop down (▼ symbol) and select "Multiple Files".
    3. Keep "File Asset" as the type by simply clicking "Select" when prompted with the "Select the type of File Asset you wish to upload:" dialogue box.
    4. Click "Select file(s) to upload"
    5. Browse to an image on your computer, select it, and click "Choose".
    6. Continue browsing and choosing files until all of your files have been included.
    7. Click "Save and Publish".

    Watch the video >>


    Uploading from the WYSIWYG:

    1. Using the Website Browser tab, navigate to the page where you will be adding the image and double click on the name of the page to preview it.
    2. Edit the Web Page Content item where you want to add the image.
    3. Place your cursor in the WYSIWYG where you want the image to appear.
    4. Click the "Insert/Edit Image" icon in the toolbar.
    5. In the dialogue box that comes up, click on the icon to the right of the "Image URL" field and browse to the folder in dotCMS where want to save the image when you upload it.
    6. At the top of the dialogue box click "Upload New File".
    7. Next to the "Upload New File" field, click the "Choose" button.
    8. Browse to the image on your computer, select it, and click "Open".
    9. Fill in the "Title" and "Description" fields.
    10. Click "Save and Publish"
    11. Continue styling and formatting the image as usual.

    Watch the video >>


    Uploading to a CC - Photo/Image content item:

    1. From the "Content" tab of the Admin Screen, choose "CC - Photo/Image" from the "Type" drop down box.
    2. Select "Add New Content" in the upper right area of the screen
      OR
      search for an existing "CC - Photo/Image" content item, right click on it, and choose "Edit".
    3. Select the "Folder" using that drop down where you would like to save the "CC - Photo/Image" content item.
    4. Fill in the "Title" field.
    5. Click "Browse" next to the "Image" field and navigate to the folder where the image is saved
      OR
      you can upload an image by clicking on "Upload New Image" at the top of the dialogue box and completing that process before continuing.
    6. Fill in the "Caption" for the image.
    7. Select your "Department" or "Office" from the selection boxes.
    8. Tag your content item with appropriate keywords.
    9. Click "Save" or "Save and Publish".

    Watch the video >> 


    Related Links

    Contact

    Charlotte "Lo" Wall '19
    Web Communications Paraprofessional
    lwall@coloradocollege.edu
    719-389-6139