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

[macho-catt]

Dependency

• 2459

Overview

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

Action Items

• [x] Under the section "Organizations We Work With," update the html so that the images are rendered from the data files
  • [x] Use liquid to loop through the list of images under the partners.yml file
  • [x] Check the program-area property. If the value is "Citizen Engagement" the image should be rendered
  • [x] Be sure to include the alt attribute in the loop
    • [x] The alt text for each image will simply be the name of the organization
• [x] 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 #3328 and check if all the issues listed under the Dependency section are closed. If they are all closed, move that issue (#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

[github-actions[bot]]

Hi @macho-catt.

Good job adding the required labels to this issue.

Additional Resources: Wiki: How to add status labels to issues (WIP. Link will be updated when the wiki is done) Wiki: How to create issues (WIP. Link will be updated when the wiki is done)

[jdingeman]

Hey @bonniewolfe @JessicaLucindaCheng, so this issue is asking for Liquid to loop through the partners.yml file, but every line has a hard coded alt text:

<img class="org-img org-img-large" src="/assets/images/sponsors/code-for-america.svg" alt="Code for America"/>
<img class="org-img" src="/assets/images/citizen-engagement/la_neighborhood_councils.svg" alt="Los Angeles Department of Neighborhood Empowerment">
<img class="org-img" src="/assets/images/citizen-engagement/palms_neighborhood_council.svg" alt="Palms Neighborhood Council">
<img class="org-img" src="/assets/images/citizen-engagement/echo_park_neighborhood_council.svg" alt="Echo Park Neighborhood Council">
<img class="org-img" src="/assets/images/citizen-engagement/la_county_open_data.svg" alt="County of Los Angeles Open Data">
<img class="org-img" src="/assets/images/citizen-engagement/voices_neighborhood_council.svg" alt="Voices Neighborhood Council">
<img class="org-img" src="/assets/images/citizen-engagement/mid_city_neighborhood_council.svg" alt="Mid-City Neighborhood Council">
<img class="org-img" src="/assets/images/citizen-engagement/mar_vista_community_council.svg" alt="Marvista Community Council">

The partners.yml does not include an alt attribute for each partner, so if the dev tries to add a loop to render the images, then they will not show the alt text. Should we consider adding image alt attributes into the partners.yml file before releasing this issue? Or do these images not require an alt text?

[ExperimentsInHonesty]

@jdingeman we can use the name as the alt text.

Example:

• File: /assets/images/partners/digital-defense-fund.png
• Alt: Digital Defense Fund

https://github.com/hackforla/website/blob/5b542996d6294efab71e69962e391d3905801b1f/_data/internal/partners.yml#LL102-L106C28

[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[bot]]

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.