<p align="center">
    <img src="logo_small.png" />
</p>

**Four Corners** 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.

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.

# Installing the Plugin

[Download the plugin](https://github.com/digitalinteraction/fourcorners-wordpress/releases/download/1.3/wp-authograph.zip) from our repository to your local computer.

In your Wordpress admin panel `admin > add plugin > upload plugin`:

![](tutorials/uploadbtn.png)

Upload the file you downloaded above:

![](tutorials/dropfile.png)

Activate the plugin:

![](tutorials/activate.png)


# Using the Wordpress Plugin

Follow the following steps for each image that you want to add Four Corners metadata to:

## Step 1 - Login
Login to Wordpress using your details:

`http://<yoursite>/wp-admin`

![](tutorials/login.png)

## Step 2 - Add an Four Corners image to your site

![](tutorials/editpost.png)

Select the *Insert Four Corners* button on the toolbar: 

![](tutorials/button.png)

Select your image (by uploading or selecting a previously uploaded image):

![](tutorials/selectmedia.png)

Fill in metadata about the image:

![](tutorials/editor.png)

Press `Save` to insert the augmented image into your post.

> Note the small icon next to the image -- do not delete this, it will not be shown on your site.

![](tutorials/result.png)

For reference, vieing your post in `Text` view will show your metadata alongside your image in the post. 

![](tutorials/metadata.png)

Visiting your page will now augment your image with your metadata when you hover over the corners.

![](tutorials/result1.png)

----

> Four Corners 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.
