img Tag Refactor: _includes/about-page/about-card-sustainability.html - sdg2.svg

[roslynwythe]

Prerequisite

1. Be a member of Hack for LA. (There are no fees to join.) If you have not joined yet, please follow the steps on our Getting Started page and attend an onboarding session.
2. Before you claim or start working on an issue, please make sure you have read our How to Contribute to Hack for LA Guide.

Overview

We want to change an img HTML tag ending with a slash (<img.../>) to an img tag without an ending slash (<img...>) so that the codebase is consistent with how we use img HTML tags.

Action Items

• In your local IDE, navigate to _includes/about-page/about-card-sustainability.html
• Remove the ending slash in the img HTML tag by changing

<img src="/assets/images/sdg/sdg2.svg" alt="2 Zero Hunger" />

to

<img src="/assets/images/sdg/sdg2.svg" alt="2 Zero Hunger">

• The file may contain more than one instance of an img tag with a closing slash. Only change the single instance specified above. Do not leave any blank spaces before the closing bracket.
• Using Docker, check the page remains the same in mobile, tablet, and desktop views as on the current website (See 1 in the Resources/Instructions section below)

Resources/Instructions

1. Webpage(s): https://www.hackforla.org/about
2. This issue is tracked in HfLA-Website: img Tag Audit spreadsheet's img with Ending Slash tab, which is part of Rollout Plan: Refactor code with img HTML tags to end without a slash #4362

[ExperimentsInHonesty]

@roslynwythe I am not sure how the inclusion of this

For QA to validate change: https://github.com/hackforla/website/blob/gh-pages/assets/js/current-projects.js

helps me QA the change

[roslynwythe]

@ExperimentsInHonesty that was part of the template before I was assigned to the epic so I'm not sure I know exactly the reasoning behind it but I believe the idea is that you could browse to that file, search for the image filename specified in the issue title, and view the updated code. Please advise re: a better means of supporting QA.

[ExperimentsInHonesty]

@roslynwythe wouldn't I just check the about page and that specific image?

@ExperimentsInHonesty that was part of the template before I was assigned to the epic so I'm not sure I know exactly the reasoning behind it but I believe the idea is that you could browse to that file, search for the image filename specified in the issue title, and view the updated code. Please advise re: a better means of supporting QA.

[github-actions]

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

[aidanwsimmons]

i. Availability: today untill 6pm, tuesday aftenoon-evening
ii. ETA: EOD today

[github-actions]

@aidanwsimmons

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Monday, February 19, 2024 at 11:06 PM PST.}

[aidanwsimmons]

Progress: issue seems to be resolved- ive verified my gh-pages branch is up to date, but im not seeing a back slack at the end of the tag as specified by the action item.
Blockers: see above
unasigning myself from issue

[JessicaLucindaCheng]

As Aidan mentioned above, this problem seems to be already fixed:

website/_includes/about-page/about-card-sustainability.html

Line 49 in ca51380

<img src="/assets/images/sdg/sdg2.svg" alt="2 Zero Hunger">