Homepage photo collage

About this component

The very top of the homepage has an animated photo collage, overlaid with an intro blurb and apply button. The goal is to give a quick intro to PCC through imagery, to show that PCC will meet people where they are (that they belong), and to give people a chance to apply if that is their goal.

Guidelines

The homepage committee will have a quarterly review of the collage images, and choose new images as needed. Images should:

  • Be fun and inviting.
  • Show a variety of subject matter (campuses, people, activities, etc.) with equal representation for all four campuses.
  • Include at least one image of Poppie the Panther.
  • Accurately represent our college community.
  • Be high quality and use a variety of colors and compositions.
  • Show timely and seasonal imagery if possible.
  • Avoid triggering topics and stock photography.
Styling

Collage: The collage has columns of images that scroll at slightly different speeds, encouraging people to wait and see the rest of the images. The images themselves show campuses, people, and activities to help paint a general picture of what PCC is like. The collage has a slight dark overlay to make it less overwhelming behind the intro text and button.

Animation: The animation includes a pause button for those that need less motion. If you pause the animation, the images stop moving. If you then play the animation, the collage fades out and back in to prevent flashing images.

Intro text and apply button: The intro text is large and eye-catching. Both sentences should fit on one line on standard desktop screens. The button is green to draw attention to it and set it apart from the other buttons on the page.

Responsive behavior for Homepage photo collage

On large screens there are 4 columns of images, on medium screens there are 3 columns, and on small screens there are 2 columns.

How to use for Homepage photo collage

Editable in the HTML (see “development info”).

欧洲杯决赛竞猜app_欧洲杯足球网-投注|官网ment info for Homepage photo collage

Stylesheet location: /_source/homepage/styles/_photo-collage.scss

Edit the root-level index.html file.

  • Images: Strips of images that scroll together, reducing the total number of images the page has to load.
    • The individual images don’t have alt text. Instead, the entire photo collage has a general description of what the images are supposed to convey: “Collage of photos from all around the college. Includes images of architecture, student groups, and events.”
    • The strips should be 667px wide. On launch, strip 1 (the fastest) had five horizontal images, strip 2 had two vertical images, strip 3 (the slowest) had two horizontal images, and strip 4 had three horizontal images.
  • Intro text and apply link: Hardcoded on the page.
Example of Homepage photo collage

Desktop view

Photo collage: desktop

Tablet view

Photo collage: tablet

Phone view

Photo collage: phone

Animation

Photo collage: photo scrolling and pause/play animation