Update the Organization images list under the Citizen Engagement page so it's dynamic

[macho-catt]

Dependency

• Update partners.yml so each partner have a program-area property #2459

Overview

We need to update the Citizen Engagement Page so that the data is dynamically rendered using liquid.

Action Items

• Under the section "Organizations We Work With," update the html so that the images are rendered from the data files
  • Use liquid to loop through the list of images under the partners.yml file
  • Check the program-area property. If the value is "Citizen Engagement" the image should be rendered
  • Be sure to include the alt attribute in the loop
    • The alt text for each image will simply be the name of the organization
• Ensure that the page still looks and functions the same after the refactor

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

partners.yml
Citizen Engagement Page
citizen-engagement.html
Using liquid with jekyll

[jdingeman]

@ExperimentsInHonesty - added the point about the alt text that I meant to earler. I believe this issue is ready to go the backlog.

[github-actions]

Hi @Skydodle, 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 :)

[Skydodle]

Availability: Wednesday & Friday 7 to 9pm
ETA: Wednesday 3/8/2023

[Skydodle]

I have a blocker. I was able to use liquid to loop through partners.yml and render the images only if the organization's program-area value is "CItizen Engagement".

However, there is only one organization in partner.yml that is classified as "Citizen Engagement", vesus the original web page that has 8 organizations displayed. I just want to confirm if this is correct?

If you open partner.yml, only the first one (LA Department of Neighborhood Empowerment) has program-area as "Citizen Engagemnt".

Original page showing 8 organizations(hard coded):

Render based on partners.yml, only one:

[jdingeman]

@Skydodle - that's a good catch. I can bring this up with Bonnie during leads meeting.

[jdingeman]

@Skydodle - go ahead and go with your solution. Product needs to update the partner list so that we can update our files accordingly. Your solutions shows the most accurate representation at this time.