Exercise #4: Editing/Cropping an Image

  1. In the WCMS Classroom site, browse to  “sample-images-for-training” folder and select one of the pictures inside that folder.
  2. Click “...More”, then click “Download” and put it on your desktop
  3. Open a new window in your browser and go to https://ucsc.github.io/web-tools/images/
  4. Click on “Read Instructions” and read them
  5. Select “Upload Image”
  6. Select the image from your desktop
  7. From the Image Resizer, click “Select a Preset Option”, and select Banner Image (Left Navigation and List Pages)
  8. Click “Crop Image”
  9. Click “Download” (for Safari users, right-click the image and choose Save as… to your computer)
  10. Now, make a thumbnail image with the same instructions but select Square Thumbnail (from the list of Preset Options)
  11. Rename your file and add”-thumb” at the end of the file name
  12. Upload your photo back into the WCMS “sample-images-for-training” folder.

Back to Content Editor Training