Optimizing, Uploading and Inserting Images for UND.edu

Information on how OmniUpdate Campus users can optimize, upload and insert photos into their web pages on UND.edu. (Note: please see Recommended Photo Sizes for additional information.) Image filenames should be lowercase with dashes, and be simple, neutral and descriptive. If a file contains a date (example: 190219), please keep that in that date in the file name, so campus photographers can easily search and find the image.

Optimizing Photos for Web

Large images can slow down the load time for users. And search engines like Google can rank your website lower if it contains large images. To reduce the file size, but still maintain the quality, we recommend optimizing your photos for web.

The first step is choosing the right format. We recommend using JPG or JPEG files, which is the standard format and offers a good balance or quality and file size.

We recommend the following Optimization tools:

OmniUpdate Campus can also compress images, but we recommend you be careful when using the OU photo editing tool. It may over-compress or blur your images, so make sure to test and review your image before publishing.

Uploading an Image

Images should be uploaded to your /_files/images/ folder.

Navigate to /_files/images/ and click Upload button

  1. Drag the file or files to upload from the local computer to browser. (Multiple files may be selected and uploaded at one time. On a PC, use Control+Click, Shift+Click, or click and drag to select multiple files. For a Mac, use the Command key to select multiple files.) 
  2. Alternatively, click the Add Files button to browse and select local files.
  3. The ability to overwrite files may be enabled and available by clicking the Overwrite Existingcheckbox.
  4. Files may be renamed at this point by clicking Rename, entering the new file name, and pressing the Enter key or clicking out of the field.
    Note that if there are invalid filenames or the file exists already and Overwrite Existing has not been checked, the modal will not allow the upload to be initiated.
  5. Click Start Upload to upload the files. When completed, the green success message is displayed. Click Close and select and insert the image from the Select Image modal. 
  6. Images need to be published or submitted for approval before they are live on the web.

In​​​​​sert/Edit Image Tool

When editing main content, the Insert/Edit Image tool is available on the default toolbar for the WYSIWYG Editor.

The Insert/Edit Image tool provides access to multiple functions related to images, image management, and code markup for images. At the very simplest, it can be used to link to an image and provide a description for it, which is usually required. On the other hand, Insert/Edit Image can also be used to:

  • Upload an image and edit it with the Image Editor
  • Manually enter a URL of an image to insert on the page
  • Browse to an image that was previously uploaded in order to link to it, including the ability to choose from an auxiliary site
  • Provide metadata about an image in the form of an Image Description (alt tag) and Title (title tag)

Image Styling Snippet

The best way to add an image is to use the Image Styling snippet.

  1. Navigate and place your cursor where you'd like to add an image.
  2. Click the Insert Snippet button (looks like a puzzle piece) to add your snippet.Click the insert snippet icon
  3. Search for snippet called Image Stying and select it. A preview will appear in the right window.
  4. Click Insert
  5.  image style snippet preview
  6. Select the alignment you'd like your photo to have. Left will add styling and add to left, Right will do the same and right align. None will apply no style. None is best if you'd like the image to appear as a full-width in the body copy.
  7. Select the default image and replace. (See Inserting an Image below for instructions.)
  8. Add a caption. Place your cursor in the white caption box and type caption if desired. Captions are optional, however, studies have shown the users are more likely to stop and read your caption than other body copy.
  9. Save and close the WYSIWYG to preview the image.

Image Styling Example:

universal image styling example

 

Inserting an Image

  1. To insert an image, position the cursor where the image should be inserted and click the Insert/Edit Image icon. This shows the Insert/Edit Image modal.
  2. The location of the image can be manually entered in the Image URL field, but to take full advantage of link management, click the Browse icon to browse to the image as in this manner the image will be assigned a dependency tag.Browse icon Insert Image Browse 
  3. The Select Image modal is shown. Edit ImageNote that the view of the images can be toggled between a list and thumbnail view by clicking the icons to the right of the Filter field.
  4. Once the image has been selected, click Insert. Alternatively, double-click an image in the list or thumbnail view.
  5. From the Insert/Edit Image modal, enter a value for the Image Description field.
  6. Click Insert. The image is shown in the context of the page within the WYSIWYG Editor.

Note: When linking to an image or other binary file from staging the file must be published to production. This can be accomplished by making sure that the Include Unpublished Dependencies checkbox is selected.

Editing Your Image in OmniUpdate

OmniUpdate Campus has a basic image editor you can use to update your photos. However, please note that OU may compress your image, and we recommend you crop to the desired size before uploading into OmniUpdate.

The Image Editor can be accessed by clicking the hyperlinked image name in the Pages list view

Resize

The Resize tool includes the ability to specify a new width and height for the image. The original ratio for the image dimensions can be kept intact by selecting the Preserve Ratio checkbox.

Crop

The Crop tool can be used to crop the image, either by selecting a predefined aspect ratio or by determining a custom crop size. When Custom or any of the predefined ratios are selected, a crop box will appear. Users can then adjust the crop for the image by dragging the crop handles located on the edges of the crop box. Clicking the Swap width & height checkbox will swap the dimensions of the crop box width and height (e.g., a crop box with dimensions of 150x300 pixels would swap to 300x150 pixels).

Rotate

The Rotate tool rotates the image 90 degrees in a clockwise direction with each click.

Zoom

The Zoom tool can be used to manually enter a percentage of the original image size to be displayed in the Edit Image panel for editing. The plus and minus magnifying glass buttons may also be used to increase or decrease the viewing size. Zoom does not alter the size of the image on the staging server; it is only to aid users in the Image Editor.

The Original button reverts the image to the original size.

The Zoom to Fit button resizes the image to fit into the panel for viewing.

Undo/Redo

The Undo and Redo functionality is available after performing another editing function. Undo reverts the last function performed (one level back). The Redo function reapplies the last function removed by the Undo tool (one level forward).

Save and Publish

The edited image must be republished in order to appear correctly on the rendered webpage.

Additional Information and Reminders

  • Adding an image description is important for accessibility, as it provides text for screen-readers or other instances where the image is unable to be viewed 
  • Note: All binary files including images are uploaded to the staging server and must be published to the public-facing web server. Image files can be manually published with any publish action, or if having been inserted on a page without publishing, the Dependency Manager will provide a checkbox on the Publish modal so that any unpublished dependencies are also published.

Contact Us

Chat with Tech Support Submit a Ticket Call 701-777-2222

Details

Article ID: 71889
Created
Tue 2/12/19 1:42 PM
Modified
Wed 3/17/21 1:05 PM