Update image location sponsors 2458

[JasonY188]

Fixes #2458

What changes did you make and why did you make them ?

-Delete the existing assets/images/sponsors directory along with its contents
-Move the file directory assets/images/about/sponsors one level up so it becomes assets/images/sponsors
-Changed the paths for: sponsors.yml, about-card-sponsors.html, partners.yml, citizen-engagement.html
-Updated the code in sponsors.html

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

Visuals before changes are applied

website.

Visuals after changes are applied

[github-actions]

Want to review this pull request? Take a look at this documentation for a step by step guide!

From your project repository, check out a new branch and test the changes.

git checkout -b JasonY188-update-image-location-sponsors-2458 gh-pages
git pull https://github.com/JasonY188/website.git update-image-location-sponsors-2458

[luke-karis]

Edit: Sorry I wasn't able to finish the review by 3/20 :( I promise I will have this reviewed by Monday 3/21
Review ETA: End of Day 3/21
Availability: Monday 3/20 5pm - 7pm

[usaboo]

Ugh sorry for the delay ->
Review ETA: End of Day, Saturday (March 19th, 22)
Availability: Saturday(19th March, 22) -> 11AM - 1PM(EST)

[usaboo]

Hi Jason, after running your branch on Docker, I was able to verify that the sponsor section in the about page looks exactly the same as before.

However images at the bottom of the citizen-engagement page look slightly different. I suspect that may be because, the current Code For America logo image (/assets/images/sponsors/logo-cfa.svg) and you are trying to use (/assets/images/sponsors/code-for-america.svg) are fundamentally not same image with both having different dimension. This if you look carefully results in a slightly different layout with the Organizations We work With section in the Citizen Engagement page of your fork looking slightly expanded than it actually is. Please refer to the images I have attached below --> the first one is the current website look and the second one is from your fork.

Also at the bottom of the current home-page, the sponsor images do not look correct, they appear a little shrunk. Please refer to the images I have attached for reference --> the first image is the from the current home page and the second image is from the homepage of your fork.

The changes to the partners.yml and sponsors.yml files look correct.

I honestly don't know if you can solve this or not, I think it is worth bringing it up in the dev meeting on Tuesday(March 22nd) and hopefully we can come to a resolution.

[luke-karis]

Hey @JasonY188 thanks for working on this issue! I have noticed some of the same issues that Utkarsh indicated with his review when running your code locally. I will give this another look tomorrow before the weekly meeting and add more comments if need be.

[luke-karis]

One minor comment I have unrelated to your code is about your commit messages. It's generally a good idea to make each commit message contain a little information about the change so that you can easily go back and see what was changed when.

[JasonY188]

Thanks @luke-karis and @usaboo for reviewing my pr. After our discussion, I will try to resized the images.
ETA 03-25
Availability 4hrs

[SAUMILDHANKAR]

@JasonY188 Just wanted to follow up if you were able to resize the images or if it was too much hassle. Feel free to request a re-review based on your findings. Also, request you to share an update on your pre-work checklist as well. Thank you.

[JasonY188]

@SAUMILDHANKAR I tried resizing the svg, but I'm not getting the desired result. When I tried increasing the size of the image, I am only seeing changes in the sponsors section of the about page, not in the home page. I will keep trying and provide an update on 03-29.

[JessicaLucindaCheng]

Leaving a note per our discussion on Tue, Mar 29: try editing the SCSS files related to the images to try to fix sizes of the images.

[SAUMILDHANKAR]

@JasonY188 Just wanted to let you know that we discussed this PR in our Dev/PM agenda. As per the discussion, it is fine to use any image format (svg, png, jpeg etc) as long as the pages look fine. So, feel free to make the changes. Please let us know if there are any updates. Thank you.

[JasonY188]

Hi @SAUMILDHANKAR,

Thanks for the update. I made a change in the _home.scss file so the svg images are a bit larger now. I will try using the previous images again and make a comparison to see which is better look.

ETA: 04-11
Availability: 4hrs

.

[kathrynsilvaconway]

ETA 04/10 by 10pm EST
Availability 2hrs
**Note: I will review this this weekend if @JasonY188 is able to make the changes before Sunday night. If not, I will review it as soon as they are made.

[JasonY188]

@SAUMILDHANKAR

The issue I found is that the original code uses two different sets of sponsor images, one for the home page and one for the about page. Since the images are not identical, if we use the home page sponsor images, the about page images will be off and vice versa. Even adjusting the scss, I am not able to make the images look like before. On April 7th, the screenshot is the changed made on the sponsor section of home page. Today's screenshot is the change made on the sponsor's section of the about page.

Please let me know which is preferred, or if you have any other suggestions.

[luke-karis]

Re-Review:
ETA: 5/2/22
Availability: Thursday 1hr, Saturday and Sunday 1-2 hrs

[luke-karis]

Hey Jason, great job sticking with this, you're making great progress and the images look way better! I have two minor comments:

I noticed that there is some more spacing on the citizen engagement section you worked on.
Here is the original:

And here is what shows up when I test your changes locally

My other comment is I noticed that in the about page in the HfLA in the news section the CNN and GT images and links are swapped. Could you merge in the most recent website changes and make sure this looks good? It doesn't seem like you touched this code so I hope it's something funky with my computer and not a weird bug.

Current ordering:

Ordering when I run your branch locally:

[JessicaLucindaCheng]

@luke-karis @JasonY188 I looked at the code for the Press and I think the order of the Press has to do with the way Jekyll process the for loop in the Liquid templating language. Thus, for now, it is fine if the order is different from how you see it locally vs on the live website for the Press section.

[answebdev]

Availability: 2 hours
Review ETA: 5/6/2022 (end of day)

[answebdev]

@JasonY188 Just wanted to check in on the current status, particularly on the "Organizations We work With" section in the "Citizen Engagement" page. Like @luke-karis , I also see a difference in spacing locally - there is more spacing in yours (see second image below):

Original

Locally

Secondly, like @luke-karis , I also noticed that in the About Page in the "HfLA in the News" section, the CNN and GT images and links are swapped. Though, according to the last comment made by @JessicaLucindaCheng , this is okay for now.

Original

Locally

As for the Sponsors section on both the Home Page and About Page, the issues mentioned above seem to have been addressed, as they look fine for me locally now (if the images look off a little, it's because of the way I cropped them - they actually look fine online).

Sponsors Home Page - Original

Sponsors Home Page - Locally

Sponsors About Page - Original

Sponsors About Page - Locally

So basically, I'm wondering what the current status of the "Organizations We work With" section in the Citizen Engagement page is.

[usaboo]

Hi @JasonY188 , thanks for your work on this issue. I am so sorry I haven't been as prompt about my reviews. I have been traveling over the past 2 weeks.

However I do want to add something, @answebdev, @luke-karis , the sponsor section on homepage does not look for me in the deployed branch and Jason's branch, which is not what you see Adolf.

This is what I see on the deployed website's home-page,

This is what I see in Jason's branch's home-page running on my docker,

Honestly, I feel it looks better in Jason's branch but that's for another day. I was wondering if I was doing everything right, or if we missed something.

[JasonY188]

Thank you all for reviewing my pr. In regards to the Citizen-Engagement page in the Organization We Work With section, it's the same issue I was facing with the Sponsors section. The images being replaced are not the same in size or resolution as images replacing them. So with the new images there will be visual differences. I'll look into adding css to the single image for Code for America, but I'm not sure that is the way to go.

Original Image

Local Image

ETA 05-10
Availability 4hrs

[JessicaLucindaCheng]

@JasonY188 You could ask Design at Sunday's meeting before you make additional SCSS changes to see what they think and give you feedback.

[answebdev]

@usaboo I don't know why you are not able to see the same thing as me. Sometimes I have issues where I am not able to see changes locally. In this case, it has been suggested to clear the browser's cache, though I have not actually tried doing this before. My understanding is that sometimes the file watching gets messed up and you need to rebuild everything. Saumil has suggested before deleting the _site folder, deleting the .jekyll-metadata file, and then building it back up from scratch. I believe I've tried this before, and it worked for me. If using Chrome, I found that it has also worked in incognito mode. These are some things you may want to try, if it is in fact the case of not being able to see your changes locally.

[JasonY188]

@JessicaLucindaCheng. I could not attend last Sunday's meeting and most likely cannot attend this coming Sunday's meeting. Is there an alternative?

[JasonY188]

@JessicaLucindaCheng @SAUMILDHANKAR After Sunday's discussion, in the Citizen-Engagement page in the Organizations We Work With section, I will make SCSS changes to the Code for America image and reduce the gap between the images of the top and bottom rows to mirror the appearance of the live page.

ETA 05-21
Availability 4hrs

[JessicaLucindaCheng]

@JasonY188

@JessicaLucindaCheng. I could not attend last Sunday's meeting and most likely cannot attend this coming Sunday's meeting. Is there an alternative?

I'm so sorry I missed your question. If you have a question in the future and I don't respond, please Slack message me.

[usaboo]

ETA - Thursday 11PM PT
Availability - 1 hour

[answebdev]

ETA - 5/25/2022 (end of day)
Availability - 2 hours

[answebdev]

@JasonY188 Thank you for your updates. I checked the code and the updates you made, and I was able to see the changes you made in the code locally. As for the "Organizations We work With" section in the "Citizen Engagement" page, the extra spacing that was there previously is no longer there, and it looks better now.

Locally

Website

As for the About Page in the "HfLA in the News" section, the CNN and GT images and links are still swapped. However, as was previously commented, this is okay for now.

As for the Sponsors section on the Home Page, although it now looks like the proposed changes and matches the screenshot of the visuals after changes are applied (see initial comment in PR), it does not look the same as it currently does live, and in the original issue, the last action item states to "Ensure that the sponsors (bottom of the page) in the current homepage look the same after the changes", so I'm not exactly sure which of the two is the way it is supposed to be (unless I misunderstood something). What do you think, @JessicaLucindaCheng ?

Sponsors Home Page - Locally

Sponsors Home Page - Website

Finally, on the About Page, the images look the same as they previously did, and the same as on the live site.

Sponsors About Page - Locally

Sponsors About Page - Website

[JessicaLucindaCheng]

@answebdev

As for the Sponsors section on the Home Page, although it now looks like the proposed changes and matches the screenshot of the visuals after changes are applied (see initial comment in PR), it does not look the same as it currently does live, and in the original issue, the last action item states to "Ensure that the sponsors (bottom of the page) in the current homepage look the same after the changes", so I'm not exactly sure which of the two is the way it is supposed to be (unless I misunderstood something). What do you think, @JessicaLucindaCheng ?

As mentioned in #2984 (comment), the homepage sponsors' images should now look like the ones on the about page. Thus, the changes that Jason made to the sponsor images on the homepage are fine.

[usaboo]

Good job on your consistent work on this issue @JasonY188. As far as i can see,

• the Sponsor section images in the homepage look fine ~ if they are supposed to be like the ones on about page.
• Next the spacing between the organizations we work with section images in citizen engagement section looks fixed now.

So everything looks good me.

Maybe others could find some bug that I may have missed.

[answebdev]

@JessicaLucindaCheng Thank you for clearing that up. I think I either missed that comment, or just understand something else, so thank you for the clarification. @JasonY188 With that cleared up, everything else looks good to me now. Great job!

[luke-karis]

This looks good to me! Thanks for your continued work on this, you've done a great job pushing through and getting this done.