Rollout Plan: Refactor code with img HTML tags to end without a slash

[JessicaLucindaCheng]

Dependency

• Epic: Create Issues to audit codebase for img tags ending with a slash #4922
• Epic: Create Issues for removing closing slash from img tags #5040
• epic: Refactor img tags in CONTRIBUTING.md to end without a slash #6453

Overview

We want to change img HTML tags 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.

Details

• See the write-up for the DR: img tag documentation comment ¹
• Read the roll out plan ²
• See the already started but not completed spreadsheet: HfLA-Website: img Tag Audit spreadsheet ³
• To understand the Issue Making labels, see 4 in the Resources/Instructions section below ⁴

Action Items

• Write epic 1 as outlined in the roll out plan
  • Add a link to the epic in the Dependency section above
• Write epic 2 as outlined in the roll out plan
  • Add a link to the epic in the Dependency section above
• Once all the issues are closed in the Dependency section, delete the following issue template(s):
  • .github/ISSUE_TEMPLATE/img-tag-refactor-on-website.md ⁵

Resources/Instructions

Footnotes

1. DR: img tag documentation comment ↩

2. Roll out plan ↩

3. HfLA-Website: img Tag Audit spreadsheet ↩

4. To understand the Issue Making labels, refer to the Resources section of this ER: ER: Documentation for Issue Making Levels #4678 ↩

5. Issue Template 1: img Tag Refactor on Website and its associated Markdown file .github/ISSUE_TEMPLATE/img-tag-refactor-on-website.md. This template works for any pages that are marked with Template 1 in the Template to use if <img.../> found column on the Page Audit tab. Template 1 works if the img tag is on the website. ↩

[daras-cu]

@JessicaLucindaCheng @ExperimentsInHonesty all of the dependencies have been resolved for this issue so I believe the .github/ISSUE_TEMPLATE/img-tag-refactor-on-website.md template can be deleted. What is the procedure for deleting a file? Should I open a pull request?

[ExperimentsInHonesty]

I see a bunch of files in the code base that have references to issues with /> in them. Here is the search I used. Below are all the files I found on the results that seemed relevant. Some of them are in the HfLA-Website: img Tag Audit (Roll out plan #4362), img with Ending Slash tab and some are not on the sheet at all (could have been added after sheet was made). So I think there are probably issues left to make for this. Either we reopen the following issues, or make new ones. Thoughts?

• Epic: Create Issues to audit codebase for img tags ending with a slash #4922
• Epic: Create Issues for removing closing slash from img tags #5040

Examples

website/_includes/resource-card.html

Line 18 in 5d338a1

<img src={{ page.image | absolute_url }} class='project-tmb-img project-start-guide-img' alt='project'/>

website/pages/about.html

Line 17 in 5d338a1

<img class="header-hero-image"src="/assets/images/about/about-us-header.svg" alt="" />

website/assets/js/current-projects.js

Line 720 in 5d338a1

<img src='${window.location.origin}${project.image}' class="project-tmb-img" alt='${project.alt}'/>

website/pages/credits.html

Line 32 in 5d338a1

<img class="icon-left-image" src={{ item[1].image-url | absolute_url }} alt=""/>

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

Line 56 in 5d338a1

<div class="grid-center"><img src="/assets/images/sdg/sdg-la.svg" alt="" /><br />

website/_includes/about-page/about-card-executive-letter.html

Line 3 in 5d338a1

<img src="/assets/images/about/section-header-elements/letter.svg" alt="" /></span><span id="letterBR">Letter from the Executive Director</span>

website/pages/getting-started.html

Line 100 in 5d338a1

<img class="step-img-icon-git" src="assets/images/getting-started/join-2.png" alt="" />

Example not on sheet

website/CONTRIBUTING.md

Line 845 in 5d338a1

- If your images are too big, use the <img src="" width="" length="" /> syntax instead of  to format the images

website/pages/communities-of-practice.html

Line 24 in 5d338a1

<img class="header-hero-image" src="/assets/images/communities-of-practice/comm-prac-header.svg" alt="community of practice header" />

website/_includes/donation/donate-gif-text.html

Line 11 in 5d338a1

<a href="https://donate.stripe.com/bIY9Cpcg8dihfIc5kl" target="_blank" rel="noopener noreferrer"><img class="donation-png" src="/assets/images/about/donate-form.png" alt=""/></a>

website/_includes/wins-page/wins-card-template.html

Line 9 in 5d338a1

<a target="_blank" class="wins-card-linkedin-icon"><img class="linkedin-icon" alt="" /></a>

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

Line 25 in 5d338a1

<div class="metrics-vrms-title"><img src="/assets/images/about/vrms-logo.svg" alt="VRMS logo" /></div>

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

Line 2 in 5d338a1

<div class="about-us-section-header" data-hash="accomplishments"><span class="sec-head-img"><img src="/assets/images/about/section-header-elements/accomplishments.svg" alt="" /></span>Accomplishments</div>

website/.github/pull_request_template.md

Line 20 in 5d338a1

- If your images are too big, use the <img src="" width="" length="" /> syntax instead of  to format the images

[ExperimentsInHonesty]

@daras-cu In answer to your question below. No, don't create a PR just yet. We should always re-audit after a role out (audit + change issues). That way, we catch anything that we missed during each of those stages. See my comment above for what I found when I re-audited the code base. I ended up finding 14 issues to review for possible changes, if they all need changes, that ends up being 17.5% of the changes missed if we had considered this closed without checking.

@JessicaLucindaCheng @ExperimentsInHonesty all of the dependencies have been resolved for this issue so I believe the .github/ISSUE_TEMPLATE/img-tag-refactor-on-website.md template can be deleted. What is the procedure for deleting a file? Should I open a pull request?

[ExperimentsInHonesty]

We will make a new issue to create issues using this template and the results I found above

labels:
issue making: level 1
feature: refactor HTML

Make a note that leads back here to check to see if its all done and then remove the template.