Please Note: The image rotator is a complex feature, and it is recommended that individuals who edit the rotator are highly proficient with Dreamweaver and HTML.
If you exerpience difficulties while attempting to set up an image rotator, you may need to re-download the Cal Poly Web Template, obtain a fresh copy of the rotator.lbi, and start over.
- Hero template (.PSD file)
The hero template appears on home pages only. This template will apply the vignette and correct sizing.
- Download instructions (.PDF) for working with the file
Selecting and Storing Images
All images for the rotator should be stored in the images folder of your website. Dimensions of these images should be 730 pixels wide and 333 pixels tall. Images with different dimensions will not display properly, so prepare all images using the dimensions above. Once the images are properly sized and stored in the images folder, they can be used to replace the sample images.
Editable Text Fields
1) "Read All Stories" should not be removed, it is in place in compliance with accessibility standards. This text should link to a page that contains all of the articles displayed within the rotator.
2) The date should be changed to reflect the correct date of the article publication.
3) This field is for the title of the article.
4) A brief caption can be added in this field to describe the article, or provide a lead-in for the full article.
5) This text should link to a page that contains the full article of the current image being displayed in the rotator.
Adding or Removing Additional Articles
By default, the rotator features slots for five articles. If your site requires additional articles, or if you have fewer than five articles, the rotator can be adjusted to accomodate your needs. The process is a little tricky, but can be accomplished by following the steps described below.
First, click an image from one of the articles in the rotator (If you are deleting an article, make sure to select the image of the article you wish to remove). Note that
<img> is selected in the gray bar at the bottom of your Dreamweaver window, as shown below.
Next, click on
<div.heroBlock> in the gray bar at the bottom of your Dreamweaver window. The article should now be selected (as shown below).
Now that the article is selected, the instructions will differ depending on if you are deleting the article or adding an additional one.
To Remove the Article
<div.heroBlock> selected, press the delete key. This should remove the selected article.
To Add an Additional Article
<div.heroBlock> selected, copy the article with Cntrl + C or Edit > Copy. With
<div.heroBlock> still selected, press the right arrow key once. The article should no longer be selected. You can now paste the copied article with Cntrl + V or Edit > Paste. The new article should appear directly beneath the article you copied, and can now be edited and updated with new information.
The new article should be identical to the article you copied, so if you are working on a small window you may need to scroll up to confirm that there are now two copies of the article.