Image directive crop configuration

There's a need to define a crop configuration per image directive.
The simplest solution would be to define an array of objects in a `directive[directiveName]` object.
The `crop` object is currently what we use in the editor.

```json
{
    "id": "cover",
    "title": "Cover",
    "directives": {
      "image": {
        "crop": [
          {
            "ratio": "16/9",
            "label": "16:9",
            "name": "wide"
          }
        ]
      }
    },
    "html": "<div>\n  <h4 doc-editable=\"title\">Titel</h4>\n  <div doc-image=\"image\" style=\"background-image:url();\">\n    <h3 doc-editable=\"uppertitle\">Oberzeile</h3>\n    <h2 doc-editable=\"maintitle\">Titel</h2>\n  </div>\n</div>"
}
```

Another possibility is to define image styles separately. That way image styles can be defined per design or component.

```json
{
    "id": "cover",
    "title": "Cover",
    "directives": {
      "image": {
        "styles": ["16/9"]
      }
    },
    "imageStyles": {
      "16/9": {
        "ratio": "16/9",
        "label": "16:9",
        "name": "wide"
      }
    },
    "html": "<div>\n  <h4 doc-editable=\"title\">Titel</h4>\n  <div doc-image=\"image\" style=\"background-image:url();\">\n    <h3 doc-editable=\"uppertitle\">Oberzeile</h3>\n    <h2 doc-editable=\"maintitle\">Titel</h2>\n  </div>\n</div>"
}
```