On December 15th, we will be implementing a crucial update to SiteNow images
Friday, December 8, 2023
Media display options
The display options are highlighted in yellow.

This update specifically addresses a lingering issue related to media display options in What You See Is What You Get (WYSIWYG) text areas on all SiteNow v2 and v3 websites. 

Previously, when selecting display options for images in WYSIWYG text areas, there was a persistent bug causing images to display at a fixed 768-pixel width, irrespective of the chosen option.

The display options are:

  • "Small - [image crop]"
  • "Medium - [image crop]"
  • "Large - [image crop]" 
  • "Full - [image crop]"

We are pleased to announce that our upcoming update will rectify this issue. 

Following the update, each image style will accurately reflect the selected size. For instance, selecting "Large - Square" will now showcase the image at a width of 1024 pixels. 

Note: The "Original," "Small," "Medium," and "Large" options are not a part of this update and will continue to display at the current size. 


How this will affect my pages?

We understand the importance of how these changes may affect your website, and we encourage you to review the screenshots and table comparisons below.

As you can see in the table below, the images have been fixed at a 768-pixel width, irrespective of the chosen option. 
Note: "Medium - [image crop]" options will not be affected by this change. 

Display name Width before Width after 
Small - No crop
Small - Square
Small - Ultrawide
Small - Widescreen
768 px 384 px
Medium - No crop
Medium - Square
Medium - Ultrawide
Medium - Widescreen
768 px 768 px
Large - No crop
Large - Square
Large - Ultrawide
Large - Widescreen
768 px 1024 px
Full - No crop
Full - Square
Full - Ultrawide
Full - Widescreen
768 px 1312 px

For a full list of SiteNow images sizes, visit https://sitenow.uiowa.edu/documentation/media/images-and-files.


Before and after example

The example below shows how an image that was previously set to "Small - Square" in the display options will now appear at a smaller pixel width after this update. 

Before and after example of the small image style


How to adjust your images

Here are a few things that you can do to prepare for this update

1. Use the Find text tool. 

Go to "/admin/find-text" on your site and search for small or large image sizes by search for "data-view-mode="small__" to find all the small images like in the screenshot below.  You can replace the "small" with "large" or "full" to check for the the other display options.  Make sure to uncheck "Render markup" to view the results.  This will show you a list of pages where the image styles are set. 

Find text tool search example


2. Review your top pages in Google Analytics

Look at your Google Analytics data and make a list of your most visited pages.  After this update is deployed, review your top pages first for any images that may appear larger or smaller than you initially intended.  


How to update an image style

To update an existing image style, edit the page or layout text area block and click on the "Edit media" button in the WYSIWYG highlighted in the screenshot below. 

Edit media example
Media display options
Select a new display option for your image.

Then, select a new image display option and click the "save" button on the popup.