Feature Images

Feature images (large images at the top of certain web pages) should be picked carefully. The photo cropper in Umbraco makes these images be 16:9 in scale. This is the ratio of a TV or smartphone screen. WVU Brand dictates that these images not be group shots or staff photos. It is preferred these be "in the moment" and focus on your primary audience. You can work with Dave Ryan and University Relations to discuss options based on your group and when photos can be shot.

When choosing a feature image

  • Use a high quality photo to avoid the image looking washed out or grainy
  • No group shots or staff photos.
    • This is dictated by WVU Brand Guidelines.
  • Focus on “in the moment” images. (See the Brand Center photography guidelines for details.)
    • Dave Ryan and University Relations can assist with taking these types of photos.

How to add a feature image

Only certain pages (e.g., home pages and landing pages) will have the option to add feature images. The options for adding such an image will typically appear in a “Feature Image” (or similarly named) tab.

If the page you are on has this option, you can add the feature image by following these general steps:

  1. The feature image property will have an empty, outlined box, typically with an icon and text reading “Click to upload”. Select this area.
  2. An “Open” dialog box should appear allowing you to browse your computer for the image you wish to use. The image will then be uploaded to the website.
    • NOTE: The file name of an image that will be uploaded to the feature area cannot contain capital letters or spaces.
  3. Depending on where the image will be used, Umbraco will crop the image to multiple dimensions and sizes. This helps to ensure that the device being used to browse the site will only download a crop that best fits the size of that device, saving the user time and bandwidth.
    • You can adjust each of these crops by selecting them and using the focus point (a dragable blue dot on top of the image) and size adjustment slider. The image itself can be moved within the cropping frame to adjust what portion of the image is displayed on the page.
  4. If a “Description” or “Alt Text” text box is available, be sure to use it to describe the image for when the image is not loaded by the user’s browser or for when a user is browsing the website using assistive technology.