# Images

# Overview

All images used in VPM Luminate pages were uploaded to Luminate image library.

# How to Update Images

In order to update images, overwrite the existing image in the Luminate image library.

  1. Locate the image in the Luminate image library.
  2. Identify the image dimensions and file extension.
  3. Prepare the new image. It should have the same file extension and dimensions (unless you are overwriting the file to correct an error in the existing image's file extension or dimensions).
  4. Click the edit link next to the image.
  5. Upload the new image and click save.
  6. Wait at least 15 minutes for server to clear the image cache.
  7. Clear your browser cache and reload the page on which the image appears to make sure the new image displays correctly.

# Background Images

A background image added using the fullBackgroundImage custom session variable will be styled with the following CSS properties:

.background--image {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

This means background images:

  • Are fixed in place; the background does not move when a user scrolls down a page.
  • Are vertically and horizontally centered.
  • Will not "tile" or repeat vertically or horizontally, no matter how tall or wide the browser window is.
  • Are stretched to fill the full width and height of the browser window (note: the image does not stretch to fill the full width or height of the page. The height of the webpage is often significantly greater than the height of the browser window).

Taken together, this means that parts of the background image will be cut off if the aspect ratio of the image is different from the aspect ratio of the user's browser window. For instance, if a selected background image is taller than it is wide, and the user views the page in a browser window that is wider than it is tall, the image will have to stretch horizontally to fill the browser window width, leading the browser to crop a large portion of the top and bottom of the image.

You may need to crop or resize images in order to make them appear the way you would like them to. To accommodate larger browser windows, we recommend using background images that are at least 1500px wide while also taking care not to use background images that will take an excessive amount of time to load on devices with slower internet connections (aim for less than 1 mb).

# Image Dimensions

Below are suggested image dimensions for the images used on each page in VPM's Luminate instance, grouped by the page on which they appear.

# Day Sponsorships (Member Center)

Top Banner: 840px wide (can be any height)

VPM Logos for Day Sponsorship Options Tables: 200px x 75px

# Giving Promo (Member Center)

Banner: 840px wide (can be any height)

# Promo Boxes (Member Center)

Promo image: 350px x 280px (5:4 aspect ratio)

# Quarterly Update (Member Center)

Promo image: 703px x 469px (3:2 aspect ratio)

← Member Center Templates →