Created
October 2, 2017 10:51
-
-
Save erikpantzar/e31ad53922da0d085e2d9e4ab245c889 to your computer and use it in GitHub Desktop.
application to get flickr images
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<script> | |
// step1 create application on flickr | |
const API_KEY = 'd1353a0c57b83a6dff262ea9de1c3a9c'; // 0175b82863673a7b456a7bbd08235496 | |
const USER_ID = '150531487%40N08' | |
// const SECRET = 'fc60f66a99c9b170' | |
// getPhotos | |
const apiCall = `https://api.flickr.com/services/rest/?method=flickr.people.getPhotos&api_key=${API_KEY}&user_id=${USER_ID}&format=json&nojsoncallback=1` | |
// how to get url | |
// https://www.flickr.com/services/api/misc.urls.html | |
const json = fetch(apiCall) | |
.then(data => data.json()) | |
.then(json => { | |
let urls = json.photos.photo.map( photo => { | |
const { farm, server, id, secret } = photo | |
// {id: "34458582484", owner: "150531487@N08", secret: "13c9aedd1e", server: "4215", farm: 5, …} | |
// s small square 75x75 | |
// q large square 150x150 | |
// t thumbnail, 100 on longest side | |
// m small, 240 on longest side | |
// n small, 320 on longest side | |
// - medium, 500 on longest side | |
// z medium 640, 640 on longest side | |
// c medium 800, 800 on longest side† | |
// b large, 1024 on longest side* | |
// h large 1600, 1600 on longest side† | |
// k large 2048, 2048 on longest side† | |
// o original image, either a jpg, gif or png, depending on source format | |
return `https://farm${farm}.staticflickr.com/${server}/${id}_${secret}_c.jpg` | |
}) | |
console.log(urls) | |
imageToDom(urls) | |
}) | |
const imageToDom = (urls) => { | |
const d = document.createElement('ul') | |
urls.forEach(url => { | |
const l = document.createElement('li') | |
const img = document.createElement('img') | |
img.src = url | |
l.appendChild(img) | |
d.appendChild(l); | |
}) | |
document.body.appendChild(d); | |
} | |
</script> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment