grow / grow-ext-google-cloud-images

Store images on Google Cloud Storage and serve them via Google's high-performance dynamic image serving and image transformation infrastructure.
MIT License
26 stars 2 forks source link

Image collection + management workflow #2

Open jeremydw opened 7 years ago

jeremydw commented 7 years ago

We should enhance the functionality of this extension with a few new workflow items. The goal of this project is to increase developer efficiency and empower stakeholders to replace and upload images immediately in the staging environment.

Developer changes

First, we should allow developers to refer to Google Cloud Images by an ID. This removes the need for a developer to decide upon or care about a filename in advance. The IDs should be be usable in either YAML or Jinja templates.

Example syntax (open to other suggestions, this overloads the current syntax which is a full bucket path).

image: !google_cloud_image product1.hero.bg
# Where bucket/product1.hero.bg is some identifier decided upon by the developer.
{{google_cloud_image('bucket/product1.hero.bg')}}

These would return a GoogleCloudImage object, say image.

Now, in templates, consistent with current functionality:

{# Returns a URL that serves `bucket/product1.hero` with `=s1440` suffixed. #}
{{image.url(['s1440']}}

The catch, though, is the following: in development and staging, we want the URL to point to the Google Cloud Images backend, which returns a 302 redirect to the correct image's serving_url. In production, we want the URL to point to the production serving URL generated by Google.

We want to do this in order to enable live uploads + replaces in development and staging without having to rebuild the page. Each reupload of an asset would then create a new serving URL in the backend, and the backend would be able to redirect requests in the proxy to the serving URL.

Example in development/staging

{{image.url(['s1440']}}

Renders to -> https://gci.grow.io/redirect/bucket/product1.hero.bg=s1440

Requests to that URL 302 redirect to -> https://lh3.googleusercontent.com/UN7taQ_uv67DQ2BO_WAc5i-b_KHPl4hWXQYG9dj_8FesTSruE_k-AyPId2Jc1DujAMP_kFpD413i8T4TK-O_=s1440

This can be achieved by a theoretical new configuration option proxy in podspec.yaml:

preprocessors:
- kind: google_cloud_images
  backend: https://gci.grow.io
  proxy: true
  proxy@env.prod: false

Changes to uploader

We have an incredibly minimal uploader now which simply uploads images to Google Cloud Storage and generates a serving URL for them. We should enhance this uploader to actually store a mapping in Datastore (or GCS - if desired) that will store metadata about the image, so it can be displayed in the UI, and so that we have a mapping of image ID to serving URL.

Some metadata to store:

Changes to UI

At render time (if proxy is true and if the UI tools are on) – we should collect all of the google_cloud_image dependencies so we can produce a UI allowing stakeholders to audit all the Google Cloud Images on a page and have a way to drag and drop replace them.

New UI tool button

image

Images modal dialog

image

Hover states in dialog

image

Zoramite commented 7 years ago

Made a design doc to make the discussion easier: https://docs.google.com/document/d/1brxSgkwWjFO_FWu4YeY-P6rJzOZV_LFh-tfgUfmVp4g/