Gallery Page

The Gallery page simply showcases various images from past events.

  • Source: src\pages\gallery.js

Dependencies

React from "react"

Common

  • Header from "../components/header.js"
    • Reusable component for providing links to the other major pages of the site
  • Footer from "../components/footer.js"
    • Reusable component for providing links to other parts of the site and for showing contacts
  • SiteMeta from "../components/site-meta.js"
    • Reusable component for providing meta data on the corresponding component.
  • Opening from "../components/opening.js"
    • Reusable component for displaying a header and header message/text and also acts as a wrapper

Local

  • GalleryData from "../data/gallery.json"
    • JSON file that holds all the assets of the page
  • GalleryCards from "../components/gallery/gallery-cards.js"
    • Generates a component for displaying a set of images in a slideshow (uses a library).

Composition

Page Meta Data

Provides metadata about the page, informing that it is the gallery page. Property isIndex is set to false since index has a default behavior for SiteMeta.

<SiteMeta pageName="Gallery" sitePage="/gallery/" isIndex={false} />
    ...

Displays a header to the site for linking other pages. Property isIndex is false so the header stays in a "scrolled" state.

    ...
    <Header isIndex={false} active="Gallery" />
    ...

Opening

Displays the title of the page and the opening message.

    ...
    <Opening header={GalleryData.header} headerInfo={GalleryData.headerInfo}/>
    ...

For each key (which represents a gallery category) in the GalleryData.events property, It generates a section of the gallery page.

Using a library, the images of a particular gallery section is loaded as a slideshow. This is wrapped with a Opening component to display the category's title before the slideshow (with some custom styling).

This is one of the few instances where the headerStyle property of the Opening component is used (which is a good thing). It simply applies the given inline css to the Opening's header or title.

    ...
    {Object.keys(GalleryData.events).map(category => 
        <Opening header={category} headerStyle={{"padding-bottom": "4%" }}>
            <GalleryCards images={GalleryData.events[category]} />
        </Opening>
    }
    ...