Event Image Guidelines

Event Image Guidelines

Event images are displayed on the page for the event, as well as in event cards. The image ratio is the same for both areas, so you’ll only need to create one image.

Because the website is responsive, the image may be cropped horizontally on some smaller displays resulting in large parts of the image being cut off.

You can compensate for this by following these guidelines:


  • Event images should be 900px wide by 420px high
  • The general “safe zone” (outlined in green and purple) for the most important area of the image is a 428-594px-wide area in the middle of the 900px wide image. If you keep your logo, etc., within that area, it will be less likely to be cut off in any way on most screen/browser sizes.
  • On most current smartphones, the event image will generally never display smaller than 282px wide by 420px high (outlined in red).

       


Below are some examples of how an event image is displayed on different screen sizes. We have added a gray background to the 900x420px image so you can see how wide the image actually is.


In general, on an Event page the event image will display like this:


 


It will display similarly in an event card: 

  


On smaller screens or smaller browser windows, you’ll see that more of the sides of the image are cropped:

 


On an iPhone or similarly sized smartphone, you’ll see only a 282px wide section in the center of the image is displayed:




    • Related Articles

    • Image

      Use this widget to display a single image on your page. You can choose an image from those already uploaded or upload a new image.   After you drag an Image widget onto your page, you can configure it to display an image.    Click the Edit button  in ...
    • Editing Image Properties

      After you have uploaded an image, you can configure various properties of the image including resizing and cropping.   You can get to the image properties anywhere images are used via the Edit all properties button you’ll see after choosing or ...
    • Creating a New Event

      1.      From the main menu, choose Content » Events.        You are now in the Events section of the admin area. You will see all events from all chapters, as well as MPI Global events. You do not need to sort in order to create a new event. 2.      ...
    • Uploading Images

      You can upload images in a variety of ways, and you’ll probably most commonly upload images where you need them, i.e., within a content area or while creating an event, but you may also need to upload several images at a time.   These instructions ...
    • Event Cards

      The Event Cards widget will display one large event card, or a group of three or four event cards.   Large Card Medium Cards   Small Cards   This widget will not be auto-populated with any content, so you will always have to define which events you’d ...