Uploading/Embedding an Image

  • Login and Navigate (Refer Login and Navigate) to the page you want to edit and click on new/edit draft. (Refer New Draft).

  • You will be taken to edit page.

    NOTE: If you do not see the WYSIWYG editor that is because of the Text Format. Select the text format to be Filtered HTML.

 

  • Images can be uploaded by clicking on the Add media button (Highlighted button from the below screenshot) in the WYSIWYG editor.

 

  • We can add link to files that already exist in the Drupal Server or upload new files to the Server and put a link to it on the page.

    NOTE: Please remember to name your files properly. Avoid special characters and SPACE in file names. Use ‘-’ or ‘_’ instead of SPACE. Example if File name is, Homepage banner.png

    Kindly consider renaming the file name to

    Homepage_banner.png

    To make it easier to manage, (Remember there will be over 100,000 images in the server) if you could pre-fix the department name to the file you can search the document with ease later on.

    So if the above file is for career center, consider naming it as:

    Career_center_home_banner.png

    Or

    CC_home_banner.png

​

​​Uploading a New Image to the Server

We can add image using the Drupal Interface or directly through the WYSIWYG. Uploading through the Drupal Interface is helpful when you want to upload multiple images (Refer document bulk-upload).

  • Once you click on add media icon, it will open a new window.

  • Choose the file you want to upload. Click on Choose File

  • Select the Proper Folder from the drop down menu to place the file and click on Upload. It will upload the file and click Next.

  • Select the option Public Local Files Served by the Webserver and click Next.

  • Image gets stored in the Server with the name you provide in the Name field. Make sure you give a proper name like we mentioned above, so that it becomes easier to search for it later.

    If you want to look up all the image files you uploaded:

    My Workbench -> My Files

    To change the name, look for the file in the appropriate folder. Click on the file and select Edit Selected. In the name field change the name to what you want.

  • Make sure the name is correct & select the proper Folder AGAIN! For the Tag you can give it a proper tag or leave it blank. Click Save.

    NOTE: Tags can be used to pull in content from the server. Example If I want to pull in all the summer images into one page then I can use the tag name I gave to pull in data. Please give meaningful tags or leave it blank!

  • You can choose how the Image will appear on your page. You can select from a list of options. Select the one you want (preferably WYSIWYG) and hit Submit.

 

Linking an Existing Image from the Server

  • Once you click on Add Media button in the WYSIWG editor, Click on the LIBRARY (MBP) tab.

    NOTE: If you want to link to a File that YOU uploaded to the server, you can go to MY FILES (MBP) tab instead.

  • Here you can search the image. You can select the Folder you want by clicking on it & you can Filter by Type & Scheme. Select the image and hit Submit.

    NOTE: Here is where is naming scheme comes to help. You can type Summer in the search bar & all the Summer images will be displayed.

  • You can choose how the image will appear on your page. You can select from a list of options. Select the one you want (preferably WYSIWYG) and hit Submit.

  • This is how it will appear on the document.

​

Advanced Editing and Linking

  • You can double click on the image or right click on it and select Image properties. Here you can edit and link the image.

  • Once you are done with edits, go to the bottom of the page. You can save it as Draft or you can Publish the page.