Topics Map > Functional/How-to
Topics Map > WordPress

WiscWeb - WordPress - Using Photoshop to crop images

There are several page elements that have set image size limits. This document will walk you through the process of setting a pre-defined crop area, as well as provide the specific image sizes for page elements.

To set the crop area for an image, follow these steps. This document uses the Hero Image (WiscWeb - WordPress UW Theme - Using the Hero Content Area ) area as the example, but these steps can be followed for any one of the page elements that require images.

  1. Open your image using Adobe Photoshop. Make sure that the image is larger than 1600 px by 500 px. You can use the campus photo library at https://go.wisc.edu/photo.

  2. Click on the Cropping tool icon (Cropping Tool Icon) or press "c" on your keyboard.

  3. At the top of the window, click on the Ratio Pulldown Menu drop down menu.

  4. Set the drop down value of that screen to W x H x Resolution.

    Ration Drop Down Menu setting to WxHxResolution

  5. Set the three fields values, from left to right, to 1600px, 500px, and 72. These will define what your custom crop area will be locked to.

    Setting the width and height values for custom crop area

  6. Once those values are set, you will be able to crop your images to a defined width and height.

    Cropping a picture

  7. When you have the crop set to the area that you want, click the Check Mark icon at the top of the window to accept the crop.

    Check mark icon to accept crop
Below, please find the image sizes recommended for various page elements (in pixels):
  • Image Carousel (in page) – 600 x 400
  • Faculty / Staff – 400 x 400
  • Alternating Content Boxes – 900 x 600
  • Featured Image (Post) – default Thumbnail
  • Featured Content Block – 900 x 600
  • Posts Listing – default Thumbnail



Keywords:image, editing, photo, crop, hero, hero content   Doc ID:73864
Owner:Matthew G.Group:WiscWeb CMS
Created:2017-06-07 09:31 CSTUpdated:2017-11-21 08:54 CST
Sites:WiscWeb CMS
Feedback:  0   0