How to Upload and Add Images

Uploading an image

  1. Find the image that you want to upload and make sure that:
    • File size is less than 1000 KB
    • File format is “.jpg” or “.png” file
    • File name has as no spaces, underscores, or capital letters

  2. Navigate to the “_images” folder that can be located inside the folder you are working in

    Screenshot of the Modern Campus interface highlighting how to upload an image using the CMS upload buttonOpen the image full screen.


  3. Use the “Upload” button and then select "Add" to add the image from your computer that you would like to upload

  4. After selecting an image, use the “START UPLOAD” button

    Screenshot of the CMS upload image interfaceOpen the image full screen.


  5. You can upload more than one image at a time (as long as they are all valid)

  6. If the file is too large or has an invalid filename, it will alert you through an error message.

    Screenshot of an error the CMS upload selection menu can give users if the images cannot be uploaded. Open the image full screen.


  7. You can change the filename directly in this interface by using the three dots and selecting “rename”, you cannot fix the file size from here, you have to do that in Canva or PhotoShop

  8. After uploading the image(s), you will be redirected to the the images folder that includes your newly uploaded images with the status as "Unpublished"

    Screenshot of the CMS image selection menu that users can scroll through to make edits such as publish an imageOpen the image full screen.


  9. Now select the checkboxes on the left side of the image(s) that you want to publish to use.

    Publish the imageOpen the image full screen.


  10. There should be new options that appear at the top of the file navigation menu with an option "Publish"

  11. To publish the files you selected, use the “Publish” button

If the image is not published, it won't show up when you add it to the page.

Adding an image

Now that the image is uploaded to the site, it can be used on a page. To use the image on your page:

  1. Go to the page you want the image to be on
  2. Check out the page, select "Edit" and navigate to the content region that you want the image to be in. Within the text region, set your cursor where you want the image to be.

  3. Use the “Insert component” button (spiral icon) and select the “Image with Caption" component.

    Screenshot of the CMS toolbar menu selecting the add component icon.Open the image full screen.


  4. Select the “Insert” button to add the component.

    Screenshot of a user adding an Image with a Caption component to their page using the CMS component selection menuOpen the image full screen.


  5. You will be directed to the "Image with Caption" component form. Use the "File icon" on the "Image" field to browse the image you want to add to the site

    Screenshot of the Image with a caption menu where users will add content to their specified fields.Open the image full screen.


  6. You will have to navigate through the site in order to find the image you uploaded and published above

    Screenshot of the Image with a caption component field where users will have to select an image from the image library.Open the image full screen.


  7. Add alt text and a caption (if applicable) and choose if it should be floating to the left, right or neither.

  8. If the image is not published or you have not added alt text the image will not show up

  9. Use the insert button and then save the page, the image should now be added to your content area
Categorized As
Elements
Centennial Walkway bordered by the Student Union and Student Services West buildings

Welcome to SDSU

ApplyVisitGet Info