<p align="center">
    <img src="docs/logo_small.png" />
</p>

**Authograph** is a way for photo-journalists and content creators to display a rich visual overlay of metadata onto their web-based images. Announced at World Press Photo Foundation awards ceremony 2016, this simple drop-in javascript library automatically augments seleted photos with additional content, curated by the content owner.

<p align="center">
<img src="docs/screen1.png" />
</p>

See the [Project Site](https://fourcorners.io) for more background on the project and future directions.

[Click Here](https://digitalinteraction.github.io/fourcorners/docs/) to see a live demo in action.

## Getting Your Site Ready

### Wordpress

> Using Wordpress? [Download the Wordpress Plugin](https://github.com/digitalinteraction/fourcorners-wordpress/releases/download/1.3/wp-authograph.zip) to get started right away.

### Other Sites

Using Authograph on your site is as simple is pasting our hosted Javascript link into the bottom of your website page or template.

Just insert the following line at the *end* of your html, as seen below:

`<script src="https://cdn.fourcorners.io/dist/4c.js"></script>`

```html
<body>
...
...
...
<!-- Insert this line to enable 4C on your site -->
<script src="https://cdn.fourcorners.io/dist/4c.js"></script>
</body>
</html>
```

You can host the file yourself, just download the distribution version from this git repository and change the `src` field to match where you place the file.

## Generate Metadata

The Authograph overlay will dynamically adjust to the metadata you have available. 

This data is stored in a `<script>` tag embedded in the page for each image. This is simple JSON following a particular format.

**You can use the [Online Editor](https://editor.fourcorners.io) to create and edit your metadata:**

**https://editor.fourcorners.io**

Copy and paste the `<script>` block generated by the editor into your page, then mark your image to read this data.

If you want to manually create or edit this data (by hand or code), read the [Authograph JSON format](docs/4cjson.md).

## Mark Your Images

For each image that you want to augment with a Authograph overlay, add the `data-4c` attribute:

```html
<img src="/imgs/myimage1.jpg" data-4c="xmp_1-1.jpg" />
```

Authograph automatically loads the JSON metadata located in a matching `<script>` tag in the document with an attribute of `data-4c-meta` e.g.

```html
<script data-4c-meta='xmp_1-1.jpg' type='text/json'>
{
	"context": [],
	"links": [],
	"backStory": {
		"text": "",
		"author": "Eddie Adams",
		"publication": "Time magazine",
		"publicationUrl": "http://www.time.com",
		"date": "February 1, 1968"
	},
	"creativeCommons": {
		"copyright": "Photograph by Eddie Adams / Associated Press © 1968",
		"description": "Police Chief General Nguyen Ngoc Loan executing a Vietcong officer captured in Saigon, February 1, 1968."
	}
}
</script>

```



----

> Authograph is an open source initiate delivered as part of a collaboration between leading universities and journalist organisations. If you would like to find out more, please contact us directly <info@authograph.org>.  Content imagery used in the demo is photography by Eddie Adams/© Associated Press.
