Image gallery/slideshow

(Lbellreeves) #1

We're using Squiz Matrix CMS, and keen to embed a photo album. We don't want to use flickr, smug mug or anything where user can leave the site. Any suggestions welcome!

(Nic Hubbard) #2

Using an Asset Listing is what you will want. Matrix doesn't come pre-built with galleries, but you use a combination of different assets to build one.

(Nick Papadatos) #3

you can dynamically pull images from say Instagram using a Rest Resource Javascript Asset then you can control whether the link opens in a new window or not (not sure whether this is still preferable). You can see what we did about a year ago: media hub

 

Or just use one of the lightbox plugins: plugin

(Anthony Ponomarenko) #4

Welcome to the Forums, you should check out this discussion that happened not too long ago:

 

http://forums.squizsuite.net/index.php?showtopic=13403&hl= 

 

Several examples of how to do what you want

(Eric) #5

Any guidence on how NickyP setup this wall? looks great. I mean example of REST API code.

(Anthony Ponomarenko) #6

No idea, but i would say checkout Instagram for developers. https://www.instagram.com/developer/ 

 

Shouldn't be too hard; make a request, get the data, display the data.

(Eric) #7

Getting a connection and a feed is not difficult, I got as far as this:

{"pagination": {}, "meta": {"code": 200}, "data": [{"attribution": null, "tags": ["sydneylocal", "parramatta", "westernsydney", "sydneyinwinter", "visitsydney", "xploresydney", "discoverparramatta", "sydneyeats", "seesydney", "sydneycommunity", "exploresydney", "winterlight", "sydneylife", "ilovesydney", "sydneyfoodie"], "type": "image", "location": {"latitude": -33.815671582738, "name": "Parramatta Winterlight", "longitude": 151.0031631, "id": 317747276}, "comments": {"count": 0}, "filter": "Normal", "created_time": "1467103192", "link": "https://www.instagram.com/p/BHMRgcxgsnX/", "likes": {"count": 67}, "images": {"low_resolution": {"url": "https://scontent.cdninstagram.com/t51.2885-15/s320x320/e35/13573461_2032418720316604_198608890_n.jpg?ig_cache_key=MTI4MjQ3Njk5MDYwMzExOTA2Mw%3D%3D.2.l", "width": 320, "height": 320}, "thumbnail": {"url": "https://scontent.cdninstagram.com/t51.2885-15/s150x150/e35/c135.0.810.810/13413245_515583105303657_1938175506_n.jpg?ig_cache_key=MTI4MjQ3Njk5MDYwMzExOTA2Mw%3D%3D.2.c", "width": 150, "height": 150}, "standard_resolution": {"url": "https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/13573461_2032418720316604_198608890_n.jpg?ig_cache_key=MTI4MjQ3Njk5MDYwMzExOTA2Mw%3D%3D.2.l", "width": 640, "height": 640}}, "users_in_photo": [{"position": {"y": 0.01776198934280639, "x": 0.1168365482826042}, "user": {"username": "cityofparramatta", "profile_picture": "https://igcdn-photos-a-a.akamaihd.net/hphotos-ak-xpf1/t51.2885-19/s150x150/13267561_1747369162145768_1558488564_a.jpg", "id": "33764686", "full_name": "City of Parramatta"}}, {"position": {"y": 0.9822380106571936, "x": 0.3706666666666666}, "user": {"username": "smoothfm953", "profile_picture": "https://igcdn-photos-f-a.akamaihd.net/hphotos-ak-xpf1/t51.2885-19/11821356_1687232684838677_1783710028_a.jpg", "id": "52768996", "full_name": "smoothfm 95.3"}}, {"position": {"y": 0.01776198934280639, "x": 0.7554183406444778}, "user": {"username": "discoverparramatta", "profile_picture": "https://igcdn-photos-d-a.akamaihd.net/hphotos-ak-xpl1/t51.2885-19/s150x150/13166639_1063481257057051_224164517_a.jpg", "id": "1278238676", "full_name": "Discover Parramatta"}}], "caption": {"created_time": "1467103192", "text": "The ice is going down on the main @smoothfm953 Ice Rink at Winterlight! Get your tickets at winterlight.com.au\n\n#winterlight #discoverparramatta #parramatta #sydneylife #sydneylocal #sydneycommunity #visitsydney #seesydney #exploresydney #sydneyinwinter #sydneyeats #xploresydney #ilovesydney #sydneyfoodie #westernsydney", "from": {"username": "parramattawinterlight

It's code sample of what to do with it after...

(Nick Papadatos) #8

Try this

var response = eval('(' + _REST.response.body + ')');
var obj = response.data;

   for(var i = 0; i < obj.length; i++) {

    var text = obj[i].caption.text;

    if (obj[i].images.standard_resolution.url != null) {       

         print(’<img src=’+ obj[i].images.standard_resolution.url +’);">’);            

         print(’<div class=“h4”><a href="’+obj[i].link+’" target="_blank">’+ obj[i].user.username +’</a></div>’);                           

                 print( text.substring(0,250)+"…");     

 

        }

}

This should get you started. Put this code-block into your JavaScript Processing > javascript of your Rest Resource JavaScript.

(Eric) #9

Thank you very much! You are a legend.

(Ravi) #10

Hi guys,

 

I wanted to embed the fotoware album on the squiz cms website. Can we dynamically pull the images from the fotoware album? Is that possible? If so, how do we do that?

 

Thanks.

(Anthony Ponomarenko) #11

If they have an api that you can retrieve data from it should indeed be possible.

 

Take a look at the Rest Resource Assets: https://matrix-manuals.squiz.net/web-services/chapters/rest-resource-assets.