Refactor images

[hollandjg]

It looks to me as though the handling of images on the whole – where they get stored, how they are divided up, and whether you can set images for the layout components from the CMS (you can't right now) – needs another look, but that's a different PR. It feels like, with this PR, we're getting the hang of handling images!

Originally posted by @hollandjg in https://github.com/thepolicylab-projectportals/project-portal-theme/pull/651#pullrequestreview-1690708586

[JRWallace]

Project portal images overview

There are several types of images in project portal and they are configured in different ways:

Project Images are the images you can see rendered on project pages.

• All configuration happens in the the project collection in packages/project-portal-content-decap/src/cms/cms.js
• The images are stored in the example-site repo in the /static/image folder (the media_folder in the collection).
• These images are not referenced in the gatsby-config files.
• These images can be adjusted by the end user in CMS.

Favicon is the image that is shown in the browser tab.

• The image is stored in faviconPath, by default is packages/gatsby-theme-project-portal/images/default-icon.png
• Default settings can be adjusted in the theme by editing packages/gatsby-theme-project-portal/gatsby-config.js, which is populated by the defaultOptions function in packages/gatsby-theme-project-portal/utils/default-options.js.
• Default settings for faviconPath can also be adjusted in example-site by editing siteMetadata in packages/example-site/gatsby-config.js.
• To my knowledge, these files cannot be adjusted by the end user (e.g., not adjustable in CMS).

Theme Images are images that are tightly tied to the components in the theme, including things like banner, navbar, and footer images

• themeImages for example-site are stored in themeImageDirectory (e.g.,packages/example-site/content/theme-image/bottom-banner.png)
• These defaults can be adjusted in packages/gatsby-theme-project-portal/gatsby-config.js, which is populated by the defaultOptions function in packages/gatsby-theme-project-portal/utils/default-options.js.
• The graphql queries in the layouts (like packages/gatsby-theme-project-portal/src/layouts/Layout.tsx) dictate which images should be used for navbarLogo, bottomBannerLogo, and footerLogo -- for example this code chunk says the navbarLogo should be a file called navbar with a png, jpg, or jpeg file extension (?).

    navbarLogo: file(
      name: { eq: "navbar" }
      extension: { in: ["png", "jpg", "jpeg"] }
      sourceInstanceName: { eq: "themeImages" }
    ) {
      childImageSharp {
        gatsbyImageData(height: 64)
      }
    }

• The socialShareImage is also part of the themeImages and is stored in the themeImageDirectory and is specified in packages/gatsby-theme-project-portal/src/hooks/Head.tsx
• To my knowledge, these files cannot be adjusted by the end user (e.g., not adjustable in CMS).

Contact Icons are the images that are used as the image for contacts.

• The images are stored in the same folder as the .json content files (e.g., packages/example-site/content/contact/first-contact.png and packages/example-site/content/contact/first-contact.json)
• These defaults can be adjusted in packages/project-portal-content-decap/gatsby-config.js, which is populated by packages/project-portal-content-decap/utils/default-options.js (only for contact and image, but not theme-image, which is set by the gatsby-theme-project-portal project in default-options.js and gatsby-config.js).
• Which image goes with which contact can be defined in the .json file (see packages/example-site/content/contact/the-boss.json for an example).
• Additional configuration happens in the the contact collection in packages/project-portal-content-decap/src/cms/cms.js
• These images can be adjusted by the end user in CMS.

Images are the background images that are part of the header-with-image component.

• By default, they are stored in packages/example-site/content/image.
• These defaults can be adjusted in packages/project-portal-content-decap/gatsby-config.js, which is populated by packages/project-portal-content-decap/utils/default-options.js (only for contact and image, but not theme-image, which is set by the gatsby-theme-project-portal project in default-options.js and gatsby-config.js)
• Additional configuration of public_folder and media_folder happens in the the cardPage and page collection in packages/project-portal-content-decap/src/cms/cms.js
• The images for the cardPage collection can be adjusted by the end user in CMS (as of issue #746).