Featured content module centered map image crops Google copyright

[anselmbradford]

The centering of the featured content module image crops out the lower-right Google copyright notice. This is likely legally a problem.

[jimmynotjim]

cc @huetingj and @stephanieosan.

I was trying to think of possible solutions, but other than pushing the maps only to the left, I'm coming up empty. We can't reduce the image to the width of the provided area because it'll be shorter than the content. Does anyone have other ideas that could work with the existing layouts?

[jenn-franklin]

Thanks @anselmbradford and @jimmynotjim— I'm looking into it and will report back!

[jenn-franklin]

Ok, here are my thoughts:

We're placing a Google map in the FCM as a static image screenshot. The placement of Google's attribution is dependent on how the designer has the browser window sized when snapping the shot. Here I've shot it with the attribution below "Washington."

This is somewhat unattractive because you have elements such as the zoom buttons and "Terms" which are not needed for our purposes. (I'm doubting that you can hide/rearrange these elements, but I also didn't try.)

Because of this, I think we should create our own attribution text. According to Google's attribution guidelines, we can customize the styling and placement of the attribution. From that page:

What does the attribution text need to say?

If you are not using the text provided directly on Google Maps and Google Earth imagery, the text of your attribution must say the name “Google” and the relevant data provider(s), such as “Map data: Google, DigitalGlobe”. You may customize the style and placement of the attribution text, just so long as the text is legible to the average viewer or reader. Note that Google logos cannot be used in-line (e.g. "These maps from [Google logo].")"

For the design of this, we should follow whatever style is our standard for photo credits. @nataliafitzgerald Do you know if we've established a font size/color/weight for photo credits? I'm not seeing any guidelines on our Photography page, probably because the majority if not all of the photos we use are shot by our own photographers.

Having said all this... Do you guys think it's best to display a map as a static image? Or should we instead embed a "live" Google map? Is this possible within FCM's structure and do you see any drawbacks? Maybe it's not an MVP but something to consider in the future.

[jimmynotjim]

I definitely don't recommend using a dynamic map, mostly because it will be cropped and narrow as certain sizes and because of the additional data/page requests of embedded maps. Adding our own attribution to a static image sounds like a good middle ground.

[jenn-franklin]

Ok, sounds good! :+1:

[stephanieosan]

:+1:

[amycesal]

There's other cropping issues with this, especially when you're trying to have a worksheet as the featured tool and show something with text. Take a look at the payday playbook page for example:

There's another page is also facing the same issue right now. @Scotchester pointed it out.

A quick solution would for it to just crop from one side when reduced, not both, but I don't know if that's the correct long term solution.

[jimmynotjim]

We're going to be converting the Hero and FCM during the Atomic Design Workshop. If you have any interest in the future of the FCM, I highly recommend you attend both days so that your input can help improve it.

[caheberer]

@jimmynotjim has this been resolved?

[jimmynotjim]

Yes, by default it will be aligned to the left edge with options for center or right alignment.

https://github.com/cfpb/capital-framework/blob/prerelease-ver-4/src/cf-layout/src/organisms/featured-content-module.less#L74-L105

[caheberer]

Great!