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