Page Text Images: Investigate the best way to maintain aspect ratios on About Us images

[kasugaijin]

We have the Page Text resource that allows org staff to upload a hero image and two About Us images that are displayed on the org's root page. Currently, if you upload two About Us images of different aspect ratios, they will not render in the same dimensions on the org root page. For example, below.

If both images are the same aspect ratio, they both show as the same size:

Investigate an appropriate way to manage the aspect ratios of uploaded images. If we don't have to use a gem, great. But we can use a gem if there are no other options.

Acceptance criteria:

• staff can upload images without worrying about aspect ratios and both images appear the same size on the org root page.
• No need for tests

[Hassaan68]

@kasugaijin , what are the steps to reproduce this one? In local environment the About page is quite different

[kasugaijin]

@Hassaan68 so this is on the Org's home page, there is an about us section. You can ignore /about_us page.

Log in as a staff, go to the dashboard, go to Page Texts, make some changes and upload images, save, then go back to that Org's home page and scroll the About Us section.

Let me know if you have more questions!

[jmilljr24]

I think the simplest solution would be to use bootstrap ratio and style: "object-fit: cover;" so the image fills the space.

I pushed a branch up if you want to play around with it. Not sure if this what you had it mind.
https://github.com/rubyforgood/pet-rescue/tree/jmilljr24/investigate-image-aspect-ratios

[kasugaijin]

Awesome thanks @jmilljr24 i will test it out. I think CSS should be all we need!

[kasugaijin]

The aspect ratios are not actually maintained (they get cropped which might be annoying if you don't have a lot of room around the focal point of the image), but the images end up the same size, which is better than current. I prefer keeping it simple for now and not adding more gems than we need (assuming we need one that transforms images). So, let's roll with this, and if we hear frustration with this from user feedback we can fix it. Can you please make a PR if you agree?

Edit: maybe the aspect ratio is maintained, but the 'window' of viewable image causes the cropping. I bet there are some CSS tricks that can be used. But for now I am not sure the juice is worth the squeeze unless you find it interesting to do.

[jmilljr24]

I can make a PR for this. I think it's a good baseline to at least keep the layout from looking odd. Worst case staff will have to try a couple different photos to see what looks best.

Maybe we can talk a little more about it at the next meeting. I started typing an essay but it would be easier to talk about.

[kasugaijin]

@jmilljr24 agreed! Sounds good.