https://www.shu.edu/_resources/js/flickr-grid.js

1//		  Issues an HTTP request to Flickr API to get the Flickr Image ID numbers for each image appearing in a "set"
2//       Returns:  JSON structure containing ID, "secret", server number and "farm number" for each image in set, all needed
3//                 to construct the final real URL for each image to display
4
5//       "Size Suffixes: (source - https://www.flickr.com/services/api/misc.urls.html)
6
7//       Example direct image URL: https://{farm}.staticflickr.com/{server}/{photo_id}_{photo secret}_{size suffix letter}.jpg
8
9//       s small square 75x75
10//       q large square 150x150
11//       t thumbnail, 100 on longest side
12//       m small, 240 on longest side
13//       n small, 320 on longest side
14//       - medium, 500 on longest side
15//       z medium 640, 640 on longest side
16//       c medium 800, 800 on longest side
17//       b large, 1024 on longest side*
18//       h large 1600, 1600 on longest side
19//       k large 2048, 2048 on longest side
20//       o original image, either a jpg, gif or png, depending on source format
21
22(async () => {
23	let flickrGrids = document.querySelectorAll('.flickr-grid');
24
25	for(let item of flickrGrids){
26		let title = item.childNodes.item(0).innerHTML;
27		let photoId = item.childNodes.item(1).innerHTML;
28		let maxItems = item.childNodes.item(2).innerHTML;
29		let gridSize = item.childNodes.item(3).innerHTML;
30
31		console.log(title);
32		console.log(photoId);
33		console.log(maxItems);
34		console.log(gridSize);
35		
36		const userId = '8166339@N08';
37		const apiKey = '9fa070314b461e5809cf6bc28e8ded3d';
38		const method = 'flickr.photosets.getPhotos';
39		const apiUrl = `https://api.flickr.com/services/rest/?method=${method}&photoset_id=${photoId}&user_id=${userId}&api_key=${apiKey}&format=json&nojsoncallback=1`;
40
41		let result = "";
42
43		try {
44			const response = await fetch(apiUrl);
45			const apiData = await response.json();
46
47			if(apiData.photoset === undefined){
48				result = `<p>There was an error retrieving the Flickr gallery</p>`;
49			} else {
50				// NOTE: Check to see if we want to show more items than were retrieved.
51				if (maxItems > apiData.photoset.photo.length) {
52					maxItems = apiData.photoset.photo.length;
53				}
54				// NOTE: Check to see if we want to use the gallery title or not.
55				if (!title) {
56					title = apiData.photoset.title;
57				}
58
59				result += `<strong style="display: inline-block; padding-bottom: 20px;"><img src="/_resources/images/ico-flickr.png" alt="Flickr"/> ${title}</strong>`;
60				result += `<div class="row small-up-2 medium-up-${gridSize}">`;
61				for(let i = 0; i < maxItems; i++){
62					let photo = apiData.photoset.photo[i];
63					let thumbNail = `https://farm${photo.farm}.staticflickr.com/${photo.server}/${photo.id}_${photo.secret}_q.jpg`;
64					let imageURL = `https://www.flickr.com/photos/setonhall/${photo.id}/in/alubm-${apiData.photoset.id}/`;
65
66					result += `<div class="column column-block"><a href="${imageURL}" target="_blank"><img src="${thumbNail}" alt="${photo.id} ${photo.title}" /></a></div>`;
67				}
68				result += `</div>`;
69				result += `<p style="text-align: right"><a title="View full image set" href="https://www.flickr.com/photos/setonhall/sets/${photoId}" target="_blank">View the Full Set on Flickr &raquo;</a></p>`;
70			}
71
72		} catch (error) {
73			console.error(error);
74			result = `<p>Flickr Gallery Display Error: ${error.type}</p>`;
75		}
76
77		document.getElementById(photoId).innerHTML = result;
78	}
79})();