Image size schema management by third party client/frontend

[naz]

Problem

Image size schema management and consumption is not possible by third party client/frontend.

This problem was raised initially as a question in #10181

Unknown: How will this work with a headless front-end eg. Gatsby?

Context

Currently available image size schemas are configured through theme configuration (config.image_sizes property in package.json) as specced in #10181.

The problem with keeping configuration solely on the frontend (theme layer) - it doesn't allow the backend to behave in an independent "headless" way.

Technical solution

Image sizes will become a part of settings and live under a new image_sizes key. There will be 3 internal types introduced: core, api and theme.

Use cases for each type:
core - immutable, predefined sizes. The API will throw an error when they are being modified. Allows to have a set of sizes that can be always relied upon by Integrations or other clients
api - mutable sizes defined through API
themes - api-like type. It's purpose: to be able to flush out theme configs when a new theme is activated. We would want this to prevent unnecessary data piling up in the configs while not having a UI for image config manipulation. When the theme changes its image_configs are loaded, old ones are removed and any of the conflicting with core or api are skipped.

For current needs, only 2 core sizes will be introduced: amp_publisher_logo and amp_feature_image.

Implementation Details

Ghost API will expose all available image sizes through Content API for clients to consume as well as allow defining new custom sizes through Admin API.

An example format served from Content API (GET /api/v2/content/settings) will have the following form:

settings: {
    title: "Ghost",
    description: "The professional publishing platform",
    image_sizes: {
        amp_publisher_logo: {
            "width": 600,
            "height": 60,
            "type": "core"
        },
        amp_feature_image: {
            "width": 600,
            "height": 400,
            "type": "core"
        }
	}
	// all the other already available fields
}

Specification for editing image sizes through Admin API is int the works. It will ultimately allow having a clear way for themes or any other API client to put custom image sizes, so resized images can be served later through content/images/size/.... endpoint.

Tasks:

• Expose core image sizes through Content API (✨ Exposed image_sizes through Content API /settings endpoint #11012)
• Make core images available in img_url helper and accepted in /content/image/size/{dimension}/requested.png URLs
• Substitute internal usages of images such as amp_publisher_logo and amp_feature_image
• more to come once image size management spec is finalized

References

Previously available image resizing functionality - #10181

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.