https://github.com/guardian/grid-embed-demo

An example of integration with Grid for image selection
https://github.com/guardian/grid-embed-demo

documentation

Last synced: 10 months ago
JSON representation

An example of integration with Grid for image selection

• Host: GitHub
• URL: https://github.com/guardian/grid-embed-demo
• Owner: guardian
• Created: 2017-03-04T21:01:18.000Z (over 9 years ago)
• Default Branch: main
• Last Pushed: 2022-08-30T18:14:29.000Z (almost 4 years ago)
• Last Synced: 2025-02-13T16:56:35.799Z (over 1 year ago)
• Topics: documentation
• Language: JavaScript
• Homepage:
• Size: 3.06 MB
• Stars: 3
• Watchers: 17
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Grid Embed Demo

An example of how to embed [Grid](https://github.com/guardian/grid) into an application for image selection.

The example shown here is written without any frameworks and in standard ES5, demonstrating the basic technique.

## Demo

![demo](demo.gif)

## How it works

Grid uses [postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) to talk to the parent page when it has been iframed.

It sends a message when a crop is [created or selected](https://github.com/guardian/grid/blob/master/kahuna/public/js/main.js#L264-L296).

The message data represents a [crop](https://github.com/guardian/grid/blob/master/common-lib/src/main/scala/com/gu/mediaservice/model/Crop.scala#L11-L40).

In this demo, we:

- add Grid in an iframe to the DOM when the `Pick image` button is clicked

- add an event handler for the `message` event on the `window` object

- in the event handler, we extract the url to the master crop and add it in an `img` to the DOM

## Requirements

- node

- npm

- nginx

- [dev-nginx](https://github.com/guardian/dev-nginx)

## Setup

Run [`./script/setup`](./script/setup)

## Usage

Once all setup steps are complete, run `npm start` to start a http server.

You can now go to [https://grid-embed-demo.local.dev-gutools.co.uk](https://grid-embed-demo.local.dev-gutools.co.uk).