Rotator

Many of our sites use an image rotator to display photos or billboards that can link to different parts of the site. Here are a few examples of sites using the rotator:

The rotator is best used at the top of the front page of your site.

Cropping & Uploading Images

  • Open your photos in Photoshop or Corel. Make sure your images are at least 700 pixels wide.  Crop your images to 700px by 310px by following these instructions for Corel, and these instructions for Photoshop. Close and save your images.
  • Login to your WordPress Dashboard and click Media.
  • Click Add New and upload your cropped images. After uploading each image, click edit:
    Dreamweaver-3
  • On the top right corner of your page, click and copy the File URL. Paste that URL into a notepad document and set aside. Repeat this process until all of your images are uploaded.

Adding the Code

  • To add a rotator to your site, start by copying this entire block of code. (Highlight and copy the block under “Under RAW Paste Data”)
  • Login to your WordPress Dashboard and edit your home page.
  • Click the Text tab at the top right of your editing window.
  • Click to place your cursor at the top of  the editing window. Hit return to create a line break between the top of the page and any other content on the page.
  • Paste the code at the very top of the page. Below is how it should look in Text view (click to enlarge):

rotator

 

Customizing the Code

  • Each line (highlighted in orange below) represents a slide in the rotator.
    Dreamweaver-4
  • With the Text tab still selected, locate the first placeholder image link (http://placehold.it/700×300/321321/ffffff) between the quotation marks. Replace the entire link with the first URL of your uploaded image. 
  • Repeat this process until all placeholder links have been replaced.
  • If you would like to have a short caption or tagline to accompany your slide, then modify “Tagline 1” Be sure to keep the quotation marks intact. If you do not want a tagline, remove the text between the quote marks.
  • If you would like the slide in your rotator to link to a webpage, then replace the # in href=”#” with the desired URL. Be sure to keep the quotation marks intact around your link. If you do not need to link your rotator, leave it as is.
  • If you need additional lines, duplicate an existing line. If you need fewer, delete lines as needed.
  • Preview and Update your page.