fourcorners
v0.0.45
Published
Add a rich meta-data driven overlay to your photo-journalism images just by dropping in javascript and a text file http://fourcorners.io
Downloads
13
Readme
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.
See the Project Site for more background on the project and future directions.
Click Here to see a live demo in action.
Getting Your Site Ready
Wordpress
Using Wordpress? Download the Wordpress Plugin 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>
<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 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.
Mark Your Images
For each image that you want to augment with a Authograph overlay, add the data-4c attribute:
<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.
<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 [email protected]. Content imagery used in the demo is photography by Eddie Adams/© Associated Press.