Citizen Engagement page: Use `image` instead of `card-image-src`

[JessicaLucindaCheng]

Dependency

• Rename citizen-engagement-cards.html #3756

Overview

We need to refactor the code on the Citizen Engagement page to use image instead of card-image-src so that we aren't duplicating information.

Details

• The image and card-image-src are fields in the project's Markdown files in _project directory. (Note: Not all of the project Markdown files have card-image-src yet.)
• The image and card-image-src fields both have the path to the project's logo image. Since this information is the same, we don't need both fields. So, we will be removing the card-image-src fields from the Markdown files in _projects directory.
• Also, the alt text for each project logo on the Citizen Engagement page is empty (meaning alt="") because the project name is displayed next to the logo. So, we will be removing the card-image-alt fields from the Markdown files in _projects directory.

Action Items

• In _includes/program-area-pages-cards.html, do the following:
  • change

    <img class="card-image" src="{{ item.card-image-src }}" alt="{{ item.card-image-alt }}"/>
    

    to

    <img class="card-image" src="{{ item.image }}" alt="">
    

  • In the if statement, remove the line:

    item.card-image-src.size > 0 and
    

• Remove the card-image-src: and card-image-alt: fields and the content of each of those fields in the following files:
  • _projects/311-data.md
  • _projects/access-the-data.md
  • _projects/engage.md
  • _projects/lucky-parking.md
  • _projects/open-community-survey.md
• Using the search function in VS Code or IDE, search for card-image-src and card-image-alt. If you find any files with that, update the code in those files accordingly.
• Using Docker, check the Citizen Engagement page looks good in mobile, tablet, and desktop views.

Merge Team, Technical Lead, or Product Manager

• Once the pull request associated with this issue is merged, go to issue Create each program area page automatically using a layout #3328 and check if all the issues listed under the Dependency section are closed. If they are all closed, move that issue (Create each program area page automatically using a layout #3328) into the New Issue Approval column, remove the Dependency label on it, and add a ready for dev lead label to it.

Resources/Instructions

• Citizen Engagement page: https://www.hackforla.org/citizen-engagement
• _includes/program-area-pages-cards.html
• Liquid template language
• This issue is tracked in Rollout Plan: Move, refactor, and add SDG info and images #4153