Working with images

When you click the Image Image button button using the WYSIWYG (What You See Is What You Get) editor, you will be provided a dialog box for the image settings. Images for your website must be uploaded to the Content Management System (CMS) for use on your website. Therefore, the first step is to click the “Browse Server” button to either locate an existing image or to upload an image.

Screenshot of image upload box

The Images folder lists images usable by all units. Images specific to your unit are saved in the General folder. After clicking on the General folder, use the Upload button appears for adding new images to your site.

Screenshot of IMCE file browser
 

Upload an image

Click the top Upload button and then click the Browse button. Navigate to the image on your computer and click the lower Upload button.
Screenshot of IMCE upload
 
Click the Insert file button to add an image to your webpage. You may delete and resize images from the file manager screen. You can also create directories to organize your images.
Screenshot of IMCE menu
 
You can resize an image using the file manager. Simply, select an image from the list and click the Resize button.
Screenshot of IMCE resize
Enter the new pixel dimensions by typing the width followed by the height. Next, click the Resize button.
Note: You can reference the current pixel dimensions by viewing the Width Height columns in the file list.
Screenshot of IMCE image dimensions
 
After you insert the file, there are a few more options available. 
To conform to the web accessibility standards, please type in Alternative Text to provide descriptive text for the image
Add a Border around the image
Add Horizontal (HSpace) and/or Vertical (Vspace)  spacing around your image
Set image Alignment to left or right aligned.
 

Image Captions

Image captions can be done on your own in css, or you can use a pre-defined style to easily add stylized captions.  

After inserting your image, hover your mouse over the image and click on it once.

 Screenshot of clicking on a photo

Once you have clicked on the image, click the div button in the content source bar.

Click on the div button

In the resulting popup, give it a stylesheet class of "greycaptioned".  If you would like the image to be floated to the right or left, you can also type in "floatright" or "floatleft".

screenshot of setting the class

 

Although you will need to add your caption text in the Source view your image will be surround in a grey box div and floated in the direction you indicate. To add a caption:

1. Click the Source button

2. Code similar to this will appear:
<div class="greycaptioned">
<p><img alt="alt text" src="/sites/yoursite.drupal.ku.edu/files/images/general/my_image.JPG" style="width: 180px; height: 225px;" /></p>
</div>

3. Below the line similar to this:
<p><img alt="alt text" src="/sites/yoursite.drupal.ku.edu/files/images/general/my_image.JPG" style="width: 180px; height: 225px;" /></p> 
add this code,
<p class="rtecenter">Caption</p>
replacing the word Caption with your caption text.

4. The resulting code will be similar to this:
<div class="greycaptioned">
<p><img alt="alt text" src="/sites/yoursite.drupal.ku.edu/files/images/general/my_image.JPG" style="width: 180px; height: 225px;" /></p>
<p class="rtecenter">Caption</p>
</div>

5. Optional: Click the Source button again to return to the WYSIWYG view.

6. Publish the page.

This is the caption for
Chancellor Little.

 

 


Training Calendar
CMS Help

If you are experiencing a critical issue with your live website, please contact the IT Customer Service Center at 864-8080 or itcsc@ku.edu.

For questions on CMS policy, look & feel, and all other issues, please visit our help page.

Please contact web services at 864-6415 or webservices@ku.edu for help with your site

Online help can be found under the How-To's section of this website.