Art section
The information below is no longer current. Due to a change to Instagrams open API I am no longer able to rely on it fetch images from there by the method described below. From now on Instagram only allows certain users full access to all API features.
The art section on my website takes pictures from my Instagram and creates a gallery. Therefore I do not host any of the images myself but I fetch them via Instagrams API. All of my artwork that I have uploaded on Instagram have the hashtag #martinsonesson. The art section simply fetches all content with this hashtag and creates a gallery out of them. This way I don't have to manually add any new artwork I upload to Instagram to this site as well, it works automatically.
Obviously a potential (but not so likely) problem with this current solution is that if another person also uploads an image to instagram with this hashtag it will be featured in this art gallery as well. An easy fix to this problem however would be to not only filter on hashtag but also on username.
If you take a look at the controller you can see how this is done. The controller makes a call to my instagram angular service with the hashtag as the parameter. This angular service then in turn makes a call to my backend which makes the call to Instagrams API and then returns the response. I want to make the call serverside and not from the client as I want my instagram API access token to not be exposed.
If you go to the art gallery and look at the console you can see there are several calls to the Instagram API. This is because Instagrams API for performance reasons always only returns a maximum of 20 objects. If there are additional objects there will be a "next max id" that can be sent as an extra parameter when making the next call. This logic is handled in the controller.
When all content is loaded I initialize the gallery. I am using the Photoswipe library for this. It can easily generate responsively designed galleries with paging, zooming, sharing and a bunch of other features. However I wanted my art gallery to also be able to show videos since Instagram allows video uploading. However Photoswipe did not have any support for this which is why I have had to edit the library a bit to support videos. With my changes HTML5 video-elements will automatically start playing when opening them and stopping when closing them.