CCC&D

Center for Craft, Creativity & Design

instagram photo populate

Posted by Taylor Bernard on September 28, 2015

ok. making a lot of headway on this one. went thru a ton of WP plugins to find that none do what we really need. reverted back to doing it manually with JS and thats working good.

the issue now is that EVERY one of the instagram feeds want to naturally display an actual feed. as in a string of images set by a # var in the code.

our problem is that we want to have that div broken up, not to read straight instagram photos, but a mix of other things. like [twitter][insta][insta][twitter][twitter][twitter][insta]

so thats the problem. found out its doable to have multiple feeds per page, which is good, but what its going to do is put the newest image in each new div. so every insta would be the same image. so what i'm working on now is this.
grid is 12 squares. lets say 6 twitter and 6 insta.

going to have to do this:
div name = instaPhoto#
----
insta1=newestPhoto
insta2=newestPhoto-1
insta3=newestPhoto-2
insta4=newestPhoto-3
insta5=newestPhoto-4
insta6=newestPhoto-5

then i got to thinking, man, i hope insta has some order to the photos in that regard. found this code snippet.

http://codepen.io/stevenschobert/pen/iHxfw

so he has a prev and next call, and its actually remembering the original start point and the next, not randomizing it to a 'next random photo'.
this is good.

need help going thru this part to figure out how to port it over:

$(".next").click(function () {
  var length, current;
  current = feed.options.custom.currentImage;
  length = feed.options.custom.images.length;
  if (current < length - 1) {
    feed.options.custom.currentImage++;
    feed.options.custom.showImage.call(feed);
  }
});

$(".prev").click(function () {
  var length, current;
  current = feed.options.custom.currentImage;
  length = feed.options.custom.images.length;
  if (current > 0) {
    feed.options.custom.currentImage--
    feed.options.custom.showImage.call(feed);
  }

Comments

Taylor Bernard on September 29, 2015:

hey look at the main.js file on /seco.

i put that instagram js in there. but i dont know if its formatted right, and in the right 'function' wrapper format. theres also a run command at the end, dont even know if thats needed. as codepen is a lot more relaxed on syntax.

Taylor Bernard on September 30, 2015:

weird. try this.

go to this codepen.
http://codepen.io/ajithsri/pen/zGNxXG

now copy all the js from below into theirs, should replace all the stuff and get it looking like we want.

---

var imgs = [];
    var feed = new Instafeed({
       accessToken: '320903546.6dfad49.8fb26631597f4bf0bd56a9a197b100fd',
        get: 'user',
        userId: 320903546,
        limit: 20,
        resolution: 'low_resolution',
        template: '<a href="{{link}}" target="_blank"><img src="{{image}}"/></a>',
        success: function (data) {
            // read the feed data and create owr own data struture.
            var images = data.data;
            var result;
            for (i = 0; i < images.length; i++) {
                var image = images[i];
                result = this._makeTemplate(this.options.template, {
                    model: image,
                    id: image.id,
                    link: image.link,
                    image: image.images[this.options.resolution].url
                });
                imgs.push(result);
            }
            //split the feed into divs
            $("#instafeed2").html(imgs.slice(0, 1));
            $("#instafeed3").html(imgs.slice(1, 2));
            $("#instafeed4").html(imgs.slice(2, 3));
            $("#instafeed5").html(imgs.slice(3, 4));
        }
    });
    feed.run();




then go make a new codepen, copy the above js and the html from the working one and run it. doesnt show up. makes no sense.
cant be a permissions thing with the token, cause its working temp on there.
and the 'site' i have the token pointing to for API is /social.html or something on /seco

Justin Bernard on September 30, 2015:

i modified it , forked it, working fine for me here, and closer to what you will need:

http://codepen.io/anon/pen/YyNveo

Taylor Bernard on September 30, 2015:

cool i dont have an account.

youre still using that guys creds though.

put ours in.

replace their 'get' variable to 'template' variable with this:

accessToken: '320903546.6dfad49.8fb26631597f4bf0bd56a9a197b100fd',
        get: 'user',
        userId: 320903546,
        limit: 20,
        resolution: 'low_resolution',
        template: '<a href="{{link}}" target="_blank"><img src="{{image}}"/></a>',


and try resaving it and see if that works.

Justin Bernard on September 30, 2015:

you dont need an account.  just click fork, it saves it to a new id.

i'm busy on other stuff, you please get this working.  try the above creds.  get it working in codepen first before trying to move to seco to ensure its not an id issue breaking things.  what i tested works perfectly fine using his id

Taylor Bernard on September 30, 2015:

k seems to be working now.
at the end of that js code theres a :

feed.run();


i think this may be messing it up when i put it in our main.js? doesnt the whole main.js have a function(ready) call so when it executes all the code within it it 'runs' in laymans terms? only thing i could think of.

Justin Bernard on September 30, 2015:

yes, but its easy to do

look at the top of main, you see this
$(document).ready( function() {
$('#gallery_container').masonry({
    itemSelector: '.gallery_widget',
    columnWidth: 380,
    isFitWidth: false
  });
  
});

just do this  

$(document).ready( function() {
$('#gallery_container').masonry({
    itemSelector: '.gallery_widget',
    columnWidth: 380,
    isFitWidth: false
  });
  
 //
put your entire code block here
//
   
 });

 



Justin Bernard on September 30, 2015:

that will make that code function not run till the document code is loaded, should be fine

Taylor Bernard on September 30, 2015:

whyd you show the masonry code snippet. like actually put the IG code within the masonry function?

Justin Bernard on September 30, 2015:

just showing you where it goes

that masonry code was placed inside the document.ready function call

thats a good place to put your code too , i was just showing you to put it after the masonry stuff, but before that document.ready function closes  with the final });

Taylor Bernard on October 1, 2015:

got that shizzzzz

Justin Bernard on October 1, 2015:

niiiiiiiice

make sure its putting right icon, on twitter or fb posts

thx

Taylor Bernard on October 1, 2015:

dont have twitter working yet. will post on basecamp thread here in a few, going to take some more coding/a workaround

Taylor Bernard on October 1, 2015:

got this working but having issues when i put it in main.js and plugins.js files to tidy it up.

/gallery.html

right now, i have it referencing the lib via the HEAD, then the function with all the variables, in the head, right after the lib.

i try and stick the fuction+variables in main.js, and the put the lib in plugins.js and not getting anything.

already have the minified lib in plugins.js. but look at the first bit, is that correct formatting? theres a (function.... vs other libs in there are !function....

can you help tidy this up so i can check this one off and work on the twitter.