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

[github-actions]

Hi @Adaakal, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:-
i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?)
ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[ExperimentsInHonesty]

@Adaakal, if you want to keep this issue, you need to move it to in progress column and give your
i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?)
ii. ETA: (When do you expect this issue to be completed?)

[ExperimentsInHonesty]

@Adaakal I am unassigning you from this issue because you have already done a small issue. I will let you know as soon as there is a medium size issue for you to do. You are at the top of the list.

[github-actions]

Hi @drakenguyen4000, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:-
i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?)
ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[drakenguyen4000]

i. Availability: M-F 6-9pm
ii. ETA: 3/30/23