Updated and expanded feature images

[tylersticka]

Overview

This PR makes a number of updates to our fallback feature images:

• Image sizes are now consistent with other article images and are integers. This is important for promoting consistent alignment and avoiding odd rendering artifacts across browsers.
• The images themselves have been streamlined in Illustrator to avoid the use of clipping masks and to minimize decimal point strokes.
• Rounding errors have been correct. Previously, there were some curves that had been damaged by exporting from and importing into various vector editing applications with varying pixel rounding. In those cases I recreated the shapes, sometimes making one or two improvements (IMO, anyway) along the way.
• In addition to the four images created previously, I've added blank and cloudfour as potential fallbacks. These will be used by the theme when an appropriate image cannot be found.
• PNG assets are included. This will make OpenGraph defaults easier to configure in the future if we decide to implement that in our theme.
• I've updated the paths to remove "fallback," since that feels less descriptive of the what of the images and more descriptive of the why.
• I updated the story definition to be dynamic so we can more easily expand these in the future. I also removed Canvas elements from this page because the code samples felt irrelevant, it feels more like a design reference to me.

Screenshots

Testing

Deploy preview

---

• See https://github.com/cloudfour/cloudfour.com-wp/issues/526

/CC @AriannaChau

[changeset-bot]

🦋 Changeset detected

Latest commit: 0aba263

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@cloudfour/patterns	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[tylersticka]

Is a changed file path for an asset a breaking change? I guess so, but since we weren't using it yet, and since it wasn't a code change, I chose minor. Second-guessing that now.

[Paul-Hebert]

I'm fine either way 👍

[Paul-Hebert]

These are looking great! I left one question about alt text inline.

Out of curiosity, when would you want to use the blank version over the Cloud Four version? Is that meant to be a starting point for creating new designs? Or is it meant to be used directly on the Wordpress site?

[Paul-Hebert]

Should we include alt text for these images? We'll want to when we use them on the Wordpress site. Should the pattern library define and expose those alt descriptions?

[Paul-Hebert]

Ahh I see we're just pulling the name from the filename. I was imagining there was a JSON file somewhere of data. Hmm, what do you think? Is there a good place to define those alt descriptions in the patterns?

[tylersticka]

The WordPress site will have a lot more information about the article the image is supposed to represent, so I'm not sure that specifying alt text here will be very useful. I think it may actually complicate implementation.

[Paul-Hebert]

Cool, that works for me 👍

[tylersticka]

Out of curiosity, when would you want to use the blank version over the Cloud Four version? Is that meant to be a starting point for creating new designs? Or is it meant to be used directly on the Wordpress site?

It might be either! To be honest, I'm still figuring it out on the WordPress side of things. But it seemed potentially useful.