Local SEO - Allow multiple images

[sybrew]

Google has updated their documentation for Local Business.

In that, they explain how to provide multiple images for the business. The SchemaPacker and FormGenerator classes are well prepared for this.

But, I want to flatten the layout for this, instead of using the "collapsible" iterator. I think this is already possible, too.

We should restrict MIME types too. As they now state only .jpg, .png and .gif formats are allowed. We should restrict the aspect ratio as well. Only 16x9, 4x3 and 1x1 is allowed. This will be tricky.

[sybrew]

We'd want to generate an image gallery field, which I'll need to create. The gallery will yield a (hidden) comma-separated list of IDs and URLs, which would allow upgrading from the old field type easily.

Upon creation, an interactive and expandable manual URL input list needs to be added via JS, which, on input, will add the URLs to the hidden fields.

[sybrew]

It would be better to provide only one image for each rich card display, and enforce that via a crop: 1x1, 4x3, and 16x9

From Google's documentation:

"image": [
  "https://example.com/photos/1x1/photo.jpg",
  "https://example.com/photos/4x3/photo.jpg",
  "https://example.com/photos/16x9/photo.jpg"
]

The image must at least contain 50,000 pixels. So, for each ratio, we must calculate the width and-height boundaries.

So, we'd want three image input fields. Via data-* tags we'd want to annotate values the image-cropper. Whether we want to standardize this cropper setup preemptively in The SEO Framework is still to be determined. See #403

<button 
    data-tsf-image-specs={"maxWidth":4096,"maxHeight":4096,"min...":"...""ar":{"r":"16x9","forced":true}} 
/>

I don't know if we can force the aspect ratio via the cropper yet.

This would also mean that, during the upgrade, we look for the aspect ratio for the current image, and place that in the specific field. If that doesn't match any ratio, we should discard it(?) and warn the user(!).