Project Resources

Created on Mon Nov 21, 2022 by Damon Williams

A Project Resource is essentially a portfolio “case study” for a specific client project. The following information outlines and documents the various required, optional & extended fields that are available when creating (or updating) a Project Resource.

Project Resources can also be curated into additional collections such as Capabilities & Lab, or displayed on the homepage as a Feature Selection.

  Project Resource Request Doc

Where can Project Resources be used outside of the portfolio?

  Capabilities
  • Published Project Resources can be added to any existing Capability vertical.

    Please see the Capability Resources documentation for more information.

  The Lab
  • Published Project Resources can be featured in The Lab.

    Please see the Lab Resources documentation for more information.

  Feature Selection
  • Project Resources can be highlighted in the Featured Projects carousel on the home page.

    Please see the section below for more information.

  Feature Selections are only added to the site with Brett’s prior approval first.

What else can I add to a Project Resource?

  Extended Project Resource Fields
  • There are several optional “extended” content modules for additional content sections on a Project Resource.

    Please see the section below for more information.


  Project Resource Content Fields


Below is a listing of the available content fields (both required & optional) for a Project Resource.

  “In-Page” Field Preview

Resource fields listed below that have an eyecon (  ) in the description box have an “in-page” live preview of a dummy page to show approximately where the field may, or maynot, show up when rendered.

Clicking the eyecon will open a separate window with a “dummy” project resource. The eyecon button will change to a highlighter (  ) when this window is open, clicking this will scroll-to & highlight the targeted field content within the page.

Or, there always is the... “kitchen sink” project screenshot.

  You've just filtered everything out, and broke the internet...
  No fields to show with the selected filters...
  • Client
    Name (or ID) of the `Client Resource` to add this `Project Resource` too.
  • Title
    Title/name of the resource. Avoid using backslashes.
  • Alternate Project Title (optional)
    Alternative title/name of the resource, this will override the `Title` above. Avoid using backslashes.
  • Long Title (optional)
    Alternate long title/name for the resource. If set, this will override the `Title` in some display locations. Avoid using backslashes.
  • Brief statement which follows the hero display and before the content body copy. Copy used in this field will also be used in several other resource fields and potentially other collection child references (i.e., capability case study, lab case study, etc.).

    ‡ This copy also doubles as the `Description` which is used for SEO & meta purposes.

  • Comma separated list of focus keywords describing the project. Used for SEO purposes as well as potential use in cross-resource relationship connections.
  • Tags (depreciated)
    Tags for this resource.
  • Partners (depreciated)
    Comma separated list of the project partners.
  • Year the project was launched/executed. May differ from the resources `published_on` date. Generally used as a design element in the portfolio resources hero section.
  • Listing of the individual services   rendered for the project.
      Data Integrity & Consistency

    To ensure we do not end up with duplicate “service” representations in the CMS, please check the currently available services list   for an existing service to assign to a Portfolio Resource. If a service does not exist in the system and is to be added, please provide the required service item details noted below.

    Service Item Details (fields for a new service)
    • Service Name
    • Service Icon (SVG, Colorized)
    • Service Description (optional, not displayed)
  • Listing of the individual technologies   applied to the project. Currently only displayed on the `Capabilities` & `Lab` feature pages.
      Data Integrity & Consistency

    To ensure we do not end up with duplicate “technology” representations in the CMS, please check the currently available technologies list   for an existing technology to assign to a portfolio resource. If a technology does not exist in the system and is to be added, please provide the required technology item details noted below.

    Technology Item Details (fields for a new technology)
    • Technology Name
    • Technology Icon (SVG, Colorized)
    • Technology Description (optional, not displayed)
  • Germination Category (depreciated)
    Germination category classification (sort options).
  • Germination type category   classification for the project. (Carried over from the previous site and refactored as the “Format” in relation to the project)
      Data Integrity & Consistency

    To ensure we do not end up with duplicate “germination type/format” representations in the CMS, please check the currently available Germination Types/Formats list   for an existing germination type/format to assign to a portfolio resource. If a germination type/format does not exist in the system and is to be added, please provide the required germination type/format item details noted below.

    Germination Type/Format Item Details (fields for a new germination type/format)
    • Germination Type/Format Name
    • Germination Type/Format Description (optional, not displayed)
  • Display State (optional)
    Used to allow selection and/or modification of project resources. i.e., “featured” project badge, “featured” project carousel, etc.
    • Normal (default, fallback)
    • Featured
    • Hidden (depreciated, no longer used)
  • Publicly available absolute URL at which the project can be seen and/or interacted with.
      Achy Breaky Link URL's

    Be sure to keep track of the status of the URLs over time. As they may go dark from being retired or simply just no longer available at the location provided. At which time the project URL can either be updated or removed.

  • Project URL link label text. Link and label are only displayed if a `Project URL` is defined. Label text defaults to “View the Work” if nothing is provided.
  • Content
    Descriptive body copy for the project.
    • At least two (2) paragraphs of equal length.
      • The area that this content is displayed is configured via CSS (i.e., `column-count`) to layout in a 2-column fashion on med-lg displays, and 1-column on mobile/small tablet.
      • The copy can be broken up into more than (2) paragraphs for easier web readability.
        • Keep in mind, the browser automatically wraps this text as it deems fit based on device & viewport dimensions. We have very minimal (if any) control over “when” the breaks and/or wraps actually occur between the columns. This is where breaking the copy up into more/less paragraphs can help nudge it towards a more desirable flow.
    • Character count should be kept to a maximum of around 1,800 characters total (including spaces).
    • This copy can contain internal or external links if provided or requested.
    • This copy can contain basic HTML formatting options (i.e., bold, italic, underline, etc.).
  • Content Layout (1-2 Column) (optional)
    Option to display the case study content in (1) or (2) column fashion (i.e., older/legacy projects with single sentence (or less...) content display better as 1-column). Defaults to `2-Column`.
  • Featured Image (depreciated)
    Featured display image for the project (if none, 1st Project Images is used; Also appended to the Project Images array slides).
  • Gallery of select images for the project, displayed in sequential order primarily within a carousel UI component.
    • Try to keep image selections to a maximum of 10.
    • Format, Quality/Compression & Framing
      • JPG @ 1920x1080
      • File should be high quality and run through a compression engine such as iloveimg.com   or tinypng.com  .
      • Try to ensure focus of the image is within the inner 1/3, also make sure to limit or eliminate text, logos, or otherwise legible elements falling outside of this area. This is to ensure that the image will work across multiple responsive display sizes & various masking placements.
      • A stylistic mask will typically be applied to the featured images and/or video dynamically with CSS. You do not need to include the masking treatments in your images (unless composition requires it).
    • File Naming
      • Images named in sequential order that they are expected to be displayed.
        • Should start at “_00” and then increment from there. (Or, “_HERO” followed by sequential numbering). 
          i.e., “IMAGE_BASE_NAME_HERO.jpg”, “IMAGE_BASE_NAME_00.jpg”, “IMAGE_BASE_NAME_01.jpg”, etc.
        • Do not include “version” and/or “author” conventions to the filename.
          i.e., “IMAGE_BASE_NAME_00_002b_DW.jpg
      • NOTE: The first image in the gallery sequence (*_00.jpg) will automatically double as the “feature” and/or “hero” image when linked to from a collection of resources (i.e., news, portfolio, etc.).
    • ALT Text (SEO Enhancement)
      Please provide ALT text to use for each image.
      Alternative (Alt) Text is meant to convey the “why” of the image as it relates to the content of a document or webpage. It is read aloud to users by screen reader software, and it is indexed by search engines. It also displays on the page if the image fails to load.
      • Add alt text all non-decorative images.
      • Keep it short and descriptive, like a tweet, around 100-280 characters.
      • Don’t include “image of” or “photo of”.
    • Hero Carousel Display
      If there is a “Project Video” defined, it will be prepended to the carousel UI component before all of the defined “Project Images” as the first “cell”. Once the video has played through, the carousel will continue and cycle through the set of project image cells and then loop back to the video cell infinitely.
    • First Image in Collection
      • will be used as the initial hero, or feature image where necessary.
      • will be used as the poster image for project videos where one was not provided.
      • will be used as the share image for the project resource, unless there is a specific “Facebook” and/or “Twitter” share image defined.
  • Video highlighting the project.
    • Project videos are prepended to the `Project Images` array and will be displayed in the Hero Carousel UI. Carousel based videos in the hero area will autoplay through its duration, and then transition through the array of images.
    • A poster image is required with each video.
    • Format, Quality/Compression & Framing
      • MP4 @ 1920x1080
      • File should be high quality and run through a compression engine such as Handbrake  .
      • A stylistic mask will typically be applied to the featured images and/or video dynamically with CSS. You do not need to include the masking treatments in your images (unless composition requires it).
    • Poster Image
      • JPG @ same dimensions/aspect ratio as the video (i.e., 1920x1080, 16:9, etc.).
      • File should be high quality and run through a compression engine such as iloveimg.com   or tinypng.com  .
  • Collection of awards & news (logos) garnered by the project.
      Data Integrity & Consistency

    To ensure we do not end up with duplicate “award/news logo” representations in the CMS, please check the currently available Awards & News Logos listing   for an existing logo to assign to a portfolio resource. If an award.news logo does not exist in the system and is to be added, please provide the required award/news item details noted below.

    Award/News Logo Item (fields for a new award/news logo)
    • Award/News Logo
      SVG, Colorized
    • Title Text
      Text to be displayed below the logo, also doubles as the ALT text for the logo image instance.
    • URL (optional)
      URL to the award/news site and/or page.
  • Collection of news & PR attributions garnered by the project.
    *The Project News has been depreciated and is now combined with the Project Awards.
  • Facebook Gallery (depreciated)
    Toggle Facebook gallery option.
  • Facebook Gallery URL (depreciated)
    Facebook gallery URL.
  • Facebook Gallery Thumbnail 1 (depreciated)
    Facebook gallery thumbnail image.
  • Facebook Gallery Thumbnail 2 (depreciated)
    Alternate Facebook gallery thumbnail image.
  • Facebook Share Image (optional)
    Alternative share image for Facebook metadata. Overrides resource defaults.
  • Facebook Share Title (optional)
    Alternative title text for Facebook metadata. Overrides resource defaults.
  • Facebook Share Description (optional)
    Alternative description text for Facebook metadata. Overrides resource defaults.
  • Twitter Share Image (optional)
    Alternative share image for Twitter metadata. Overrides resource defaults.
  • Twitter Share Title (optional)
    Alternative title text for Twitter metadata. Overrides resource defaults.
  • Twitter Share Description (optional)
    Alternative description text for Twitter metadata. Overrides resource defaults.
  • Legacy Project (optional)
    Yes/No option to force case study to display legacy project elements (i.e., older projects with small/low-res hero image sources). Defaults to `No`.

Green field titles indicate a required field.
Blue field titles indicate an optional, but preferred field.
Grey field titles indicate the field is either `optional` OR has been `depreciated` and should no longer be used.


Feature Selection (Homepage Carousel)


Featured Projects
Example “in-page” module display.

A Project Resource may also be selected to be spotlighted on the homepage in the “Featured Projects” carousel component module.

  Feature Selections may only be added to the site with Brett’s prior approval first.

These feature selections have specific image requirements in regards to the images needed for the carousel display (i.e., background & text lockups). Please see the fields below for more information.

  • Background Image
    Transparent PNG background image plate. There should be a PSD template (Dropbox) for this image which includes any required masking treatments and positioning. The mask must be kept consistent to prevent a "shifting" appearance when one slide is faded into another.
  • Text Image
    Transparent PNG text image plate. There should be a PSD template for this image which includes any required masking treatment and positioning.
  • Text Image Alt Text (optional)
    Alternative text for the Text Image element. (Generally, same text that is depicted in the Text Image)

“Extended” Project Resource Fields


There are several optional “extended” content modules available to be enabled for adding additional content sections to any specific Project Resource.

On the page, these section modules will display after the “Project Services” section, and before the “Awards/Press” section. *Except for the “Our Role, Challenge, Solution & Success” module, this one will display before the “Project Services” section.

Each section can be toggled on/off individually. The display order between the extra modules, currently cannot be changed. Each module section will display in the order they are listed below, or as seen in the demo page   or sample “kitchen sink” screenshot.


  • Our Role, Challenge, Solution & Success
    Example “in-page” module display.

    Somewhere along the line a project (or two) utilized this one-off content layout section.

    There are four (4) specific sub sections within this section i.e.,

    • Our Role
    • The Challenge
    • The Solution
    • The Success

    The titles are currently not configurable at this time, only the basic copy text under each section.

    • Section Enabled
      Enable/disable section. Defaults to `false` (disabled).
    • Role Text (optional, but preferred)
      Basic HTML markup text copy.
    • Challenge Text (optional, but preferred)
      Basic HTML markup text copy.
    • Solution Text (optional, but preferred)
      Basic HTML markup text copy.
    • Success Text (optional, but preferred)
      Basic HTML markup text copy.


  • Project Process
    Example “in-page” module display.

    A repeating highlight media content module.

    • Section Enabled
      Enable/disable section. Defaults to `false` (disabled).
    • Section Title (line 1)
      1st line title text.
    • Section Title (line 2)
      2nd line title text.
    • Intro Text (optional, but preferred)
      Brief introductory paragraph text.
    • Process Items (collection)
      An unlimited (but, be reasonable) number of process items where each entry consists of an image, title, & descriptive text. On larger displays, content layout format will alternate (left/right).
      • Image
      • Title
        Brief title text.
      • Description
        Brief descriptive text.


  • Video Walkthrough
    Example “in-page” module display. 

    Highlight video media content module.

    Note: This is completely separate from the `Project Video(s)` (i.e., hero video), and is displayed further down the page as a stand-alone module.

    • Section Enabled
      Enable/disable section. Defaults to `false` (disabled).
    • Section Title (line 1)
      1st line title text.
    • Section Title (line 2)
      2nd line title text.
    • Intro Text (optional, but preferred)
      Brief introductory paragraph text.
    • Video
      • Format, Quality/Compression & Framing
        • MP4 @ 1920x1080
        • File should be high quality and run through a compression engine such as Handbrake  .
        • Do not include a graphical "play" button in the composition.
        • A stylistic mask will typically be applied to the featured images and/or video dynamically with CSS. You do not need to include the masking treatments in your images (unless composition requires it).
      • A poster image is required with each video.
    • Poster Image
      • JPG @ same dimensions/aspect ratio as the video (i.e., 1920x1080, 16:9, etc.).
      • Do not include a graphical "play" button in the composition.
      • File should be high quality and run through a compression engine such as iloveimg.com   or tinypng.com  .


  • Project Extra
    Example “in-page” module display.

    General text-based content module.

    • Section Enabled
      Enable/disable section. Defaults to `false` (disabled).
    • Section Title (line 1)
      1st line title text.
    • Section Title (line 2)
      2nd line title text.
    • Intro Text (optional, but preferred)
      Brief introductory paragraph text.
    • Content (optional, but preferred)
      Basic HTML markup. i.e., bold, italic, underline, links, paragraphs, headings, etc.

Green field titles indicate a required field.
Blue field titles indicate an optional, but preferred field.
Grey field titles indicate the field is either `optional` OR has been `depreciated` and should no longer be used.



Below are some useful links & utilities when creating a Project Resource.

Document last updated on Friday February 16, 2024 by Damon Williams.