search

GSA / wp2030-microsite

Workplace microsite
https://gsa.gov/workplace
1 stars 1 forks source link

Add new insight (Nina's FOW and the path forward) - Target production no later than 4/6 #236

Closed lesliel789 closed 1 year ago

lesliel789 commented 1 year ago
JessicaMarine1 commented 1 year ago

Changing target production date from 3/27 to TBD -- the necessary approvals weren't obtained in time to launch by 3/27

weiwang-gsa commented 1 year ago

@JessicaMarine1 we need the signature image.

JessicaMarine1 commented 1 year ago

@weiwang-gsa decision was made to remove Nina's signature from the insight. I've updated the content linked above.

weiwang-gsa commented 1 year ago

@brentryanjohnson Would you mind provide the image alt for https://drive.google.com/file/d/1ZPKZILIj2Kb4yhxSDfq5BkXGSCo8JvqS/view?usp=sharing? Thank you so much!

brentryanjohnson commented 1 year ago

"Official headshot of Public Buildings Service Commissioner Nina Albert with a United States flag in the background"

weiwang-gsa commented 1 year ago

@actuallyjenn this is ready for UI review: https://federalist-85357bc9-1249-41ef-98fc-280b69ce96be.sites.pages.cloud.gov/preview/gsa/wp2030-microsite/Staging/

actuallyjenn commented 1 year ago

this looks good!

weiwang-gsa commented 1 year ago

@SamCioffi this ticket is ready for your review: https://federalist-85357bc9-1249-41ef-98fc-280b69ce96be.sites.pages.cloud.gov/preview/gsa/wp2030-microsite/Staging/

SamCioffi commented 1 year ago

Hello! My only concern is the zoom/ crop of Nina's headshot. Does the ratio or size of the headline image need to be this way, or can it be the original proportions?

SamCioffi commented 1 year ago

@weiwang-gsa Please include the white space above Nina's head and the space below her shoulders. If the verticality of the image is a problem, we could use a grayspace rectangle behind like we've done in the past behind this image, but I defer to the design experts here!

Image

weiwang-gsa commented 1 year ago

@SamCioffi Yes, I can add gray space as shown. Do we do the similar thing for the other ticket ( issue#245)? Add top and bottom grey space and make the image crop in the middle?

weiwang-gsa commented 1 year ago

@SamCioffi Update is made, it is ready for QA: https://federalist-85357bc9-1249-41ef-98fc-280b69ce96be.sites.pages.cloud.gov/preview/gsa/wp2030-microsite/Staging/

SamCioffi commented 1 year ago

@weiwang-gsa I think our threads got conflated. Will approve the other thread for the video link. Please LMK if you are able to adjust the cropping on the article page to include all of Nina's head/ hair and zoom out further. Thank you!

weiwang-gsa commented 1 year ago

@SamCioffi, Nina's head/hair seems ok on my screen below. @JessicaMarine1 Would mind double checking if it is ok for you?

Image

JessicaMarine1 commented 1 year ago

@SamCioffi this seems to look different on different screen sizes. When I have it opened on my large external screen, it looks like this: Image

However, when I reduce the screen size or pull it to my laptop, it looks like this: Image

And it looks fine on mobile.

JessicaMarine1 commented 1 year ago

@SamCioffi the bottom line is -- this is a known (and difficult to solve for) issue with photos and responsive design. Because the image box is set to the page width, it will weirdly crop vertical photos. Three options here:

  1. Leave as is with the understanding that it will crop Nina's pic some if the user's screen is set really wide.
  2. Choose a new banner photo (one with a horizontal alignment).
  3. Move Nina's picture to the body of the article and pick a new banner photo. I'd be happy to hop on a call with you tomorrow to discuss, if needed.
SamCioffi commented 1 year ago

@JessicaMarine1 Thank you for cracking this for me! Yes, I'm looking at it on my very wide 27" monitor. I will find out if OSC has any banners we can use at the top and Nina's photo in the body, will get back to this team ASAP.

weiwang-gsa commented 1 year ago

@SamCioffi originally we set the image width to go with article header dynamically and max height to standard mobile view height, it will make the image keep changing image ratio and cropped the image as user zoom or use wider screen. I removed this width go with header style, make it keep the image ratio and increase the image height. please let me know if you approve the change, you can view it in my test branch:https://federalist-85357bc9-1249-41ef-98fc-280b69ce96be.sites.pages.cloud.gov/preview/gsa/wp2030-microsite/wwang-patch-7/pages/insights/future-work-path-forward/

SamCioffi commented 1 year ago

@weiwang-gsa This looks great, thank you for your patience in getting this right for the monitor ratio sizes. Moving to approved