Tag: images

You can float images by adding the class right or left. Optionally, pair this with the code data-size="" to specify an image’s size.

• full – image will fill 100% of its container
• medium – image will fill 60% of its container
• small – image will fill 40% of its container

HTML

<img src="" alt="image alt text" data-size="full">
<img src="" alt="image alt text" data-size="medium" class="right">
<img src="" alt="image alt text" data-size="small" class="left">

Image Sizes for Responsive Templates:

Page with left navigation, full width top of page: 1001 pixels by 350 pixels
Spotlights: 400 pixels by 300 pixels

For more information, see: Style Guide/Images.

See sample layout pages here.

Image Standards:
Images should be used at 100% of their size at 72 dpi for best loading time for the page.

JPEG:
The better format for posting photography online. JPEG images can contain millions of colors and can be compressed to your desired size. We recommend:
Photoshop Quality level 80 — small images
Photoshop Quality level 60 — large images

GIF:
Generally used for non-photographic images of 256 colors or less, such as buttons, icons and arrows.

Photography:
When using photography, make sure to follow copyright regulations. When appropriate, give credit to photographers.

The images owned by Clemson University may be used on Clemson University Web sites. Photos are available for download from Photo Services . If you need further photography assistance, you may contact Creative Services or fill out the request form for Photo Services.

For more information, see: Brand Guidelines/Photography.

This is how to add rotating images to the feature area on your home page.

Create a new text file and copy the content in red below into it. Save the file as rotateImageOnRefresh.js and upload it to Cascade. Place it in the same folder as your index page.

<!-- SET THE MAX FEATURE COUNT (Total -1) -->

var maxFeatureNo = 4  <!-- 5 total - 1 = 4 -->

var featureNo
var myFeature = new Array()

<!-- CHANGE img src= to the file path of your image --!>

<!-- MAKE SURE YOU HAVE ONE FOR EACH FEATURE IMAGE -->

myFeature[0] = '<img src="images/features/01.jpg" width="688" alt="Put your ALT tag here" border="0">'

myFeature[1] = '<img src="images/features/02.jpg" width="688" alt="Put your ALT tag here" border="0">'

myFeature[2] = '<img src="images/features/03.jpg" width="688" alt="Put your ALT tag here" border="0">'

myFeature[3] = '<img src="images/features/04.jpg" width="688" alt="Put your ALT tag here" border="0">'

myFeature[4] = '<img src="images/features/05.jpg" width="688" alt="Put your ALT tag here" border="0">'
<!-- DONT TOUCH --> featureNo = Math.round(Math.random() * maxFeatureNo) document.write(myFeature[featureNo]) 
<!-- IF NOTHING DISPLAYS ON THE PAGE THEN SOMETHING IS WRONG -->
Edit your index page. Copy the following content in red where you want your images to be displayed.
<script src="pathToFile/rotateImageOnRefresh.js"></script>
Submit your index page. Publish the rotateImageOnRefresh.js file, your index page and all the images that will rotate when the page is refreshed.
											

You can upload a file into Cascade as you are inserting it into your page. (Be sure the appropriate extension is part of the file name: pdf, .jpg or .doc.)

Insert an image:

1. Click inside the content region where the image will be placed. For example, if you would like the image to be in line with the top of the text, you will place your cursor before the first sentence.
2. Choose the “Insert/Edit Image” icon  from the WYSIWYG editor.
3. Click the file chooser icon.
4. Select the folder where the image will be saved (such as the image folder). The Upload option is now available from the Browse menu in the upper left corner.
5. Click Upload.
6. Select the image to be uploaded and choose Open.
7. The Select File box in Cascade will contain the path of the file you have chosen to upload.
8. Choose the Upload button.
9. Choose the Confirm button and confirm that the file has been uploaded to Cascade.

Inserting a link:

1. Select the text or image to link from
2. Choose the “Insert/Edit link” icon  from the WYSIWYG editor.
3. Click the page chooser icon.
4. Select the folder where the file will be saved (such as the documents folder). The Upload option is now available from the Browse menu in the upper left corner.
5. Click Upload.
6. Select the file to be uploaded and choose Open.
7. The Select File box in Cascade will contain the path of the file you have chosen to upload.
8. Choose the Upload button.
9. Choose the Confirm button and confirm that the file has been uploaded to Cascade.

Images can be placed either before or after your text has been added.

1. Click inside the content region where the image will be placed. For example, if you would like the image to be in line with the top of the text, you will place your cursor before the first sentence.
2. Choose the “Insert/Edit Image” icon  from the WYSIWYG editor.
3. Choose the internal tab to insert an image from Cascade. You can also upload images to Cascade during the insert image process.
4. Select the file icon to browse to the image folder.
5. Select the image  and choose confirm.
6. Add the alternate text for the image including “Clemson University, Clemson, SC” at the end of each entry.
7. Do not enter anything in the width/height boxes since your image should already be sized correctly.
8. Choose insert.

The image alignment styles are available from the WYSIWYG editor’s Styles drop down menu.

1. Select the image you have placed on your page.
2. Select the Styles drop down menu from they WYSIWYG editor’s top row.
3. Select the left or right style.
4. Submit the page.

The left and right styles automatically add the correct amount of vertical and horizontal spacing around the image so you don’t have to do anything extra to add that. The left and right styles do not however, add a border around the image. To add a border around your image you must edit the html.

1. Take your page into edit mode
2. Select the html button from the WYSIWYG toolbar to bring up the html editor
3. Find the paragraph tag in front of the image tag – it should look like this: <p><img
4. Edit the paragraph tag and insert the border information – it should look like this: <p><img
5. Select the Update button to update the html
6. Submit the page