Any way to set different class names for the first and last instafeed images?

[stidn]

Hi,

I'm pretty much tearing my hair out trying to get this to work. I'm a complete noob with Javascripting and can't seem to work out how to set different class names for the first and last images that gets grabbed by instafeed. Could someone please throw me a bone and provide me with some hints on how to accomplish this?

Thanks.

[stevenschobert]

Hey @stidn! One option would be to use the CSS first-child and last-child pseudo selectors for that:

#instafeed a:first-child {
  ...
}

#instafeed a:last-child {
  ...
}

You might need to modify the above CSS to match your markup, but hopefully that gives you the idea.

[stidn]

Hi Steven, thanks for the reply!

That was my backup option but I was trying to avoid doing that.

I'm currently trying to swap out another feed that I'm using with Instafeed so I was really hoping that I could just match the classes with the one that I currently use so I didn't have to redo all the styling for it.

[stevenschobert]

Ah I see. Do you have a sample of what markup you're trying to achieve.

You have the option of using the template option as well.

[stidn]

Sure!

This is what I'm hoping to achieve and what the instagram feed that I'm using now does:

<div id="instagram">
    <div class="four columns alpha"><a href="img"></a></div>
    <div class="four columns"> <a href="img"></a></div>
    <div class="four columns"> <a href="img"></a></div>
    <div class="four columns omega"><a href="img"></a></div>
</div>

My template for Instafeed is: '<div class="four columns"><a href="{{link}}" target="_blank" id="{{id}}"> <img class="il-photo__img" src="{{image}}" alt="Dhuezclothing image"/></a></div>'

[stevenschobert]

Ah I see. One little workaround you can do to achieve that, is to use the filter option to add some dynamic attributes to the template:

var count = 0;
var feed = new Instafeed({
  // other options...
  filter: function(image) {
    var className = "four columns";

    if (count === 0) {
      className += " alpha";
    }
    if (count === 3) {
      className += " omega";
    }

    image.customClassName = className;
    count++;
  },
  template: '<div class="{{model.customClassName}}"><a href="{{link}}" target="_blank" id="{{id}}"> <img class="il-photo__img" src="{{image}}" alt="Dhuezclothing image"/></a></div>'
});

[stidn]

Thanks so much for the help but I still can't get this to work! I've added the code you've provided but now the feed is completely blank and there's no images in the instafeed target div and nothing appears in the console log either. As soon as I take away the filter section it comes back again, I can't work out what's wrong with it. Here's my script section:

var count = 0;
var instagram = new Instafeed({
    get: 'tagged',
    accessToken: '',
    target: 'instagram',
    resolution: 'standard_resolution',      
    tagName: 'awesome',
    limit: 4,
    filter: function(image) {
        var className = "four columns";

        if (count === 0) {
            className += " alpha";
        }
        if (count === 3) {
            className += " omega";
        }

        image.customClassName = className;
        count++;
    }, 
    template: '<div class="{{model.customClassName}}"><a href="{{link}}" target="_blank" id="{{id}}"> <img class="il-photo__img" src="{{image}}" alt="Instagram image {{orientation}}"/></a></div>'
    });

instagram.run();

[stevenschobert]

Ah my mistake, you need to add a return true; to the end of the filter function.

filter: function(image) {
  //.. Rest of code
  count++;
  return true;
}

[wilcarter15]

I just tried to us this to assign a different class to each div of my template. It did not work. I am using bootstrap 4 with jekyll. The below code works great.

` $(document).ready(function() {

var userFeed = new Instafeed({
    get: 'user',
    userId: '6864543261',
    limit: 4,
    resolution: 'square',
    success: function(response){
        response.data.forEach(function(e){
          // Now insert the 'square' size into each image's data:
          e.images.square = {
            url: e.images.thumbnail.url.replace(/vp.*\/.{32}\/.{8}\//, '').replace('150x150', '600x600'),
            width: 600,
            height: 600
          };
        });
      },
    accessToken: '6864543261.1677ed0.047f5bd50b3c4c96b7fed8fc491a9537',
    sortBy: 'most-recent',
    template: 
    '<div class="col-6 col-md-3"><a href="{{link}}" target="_blank"><div class="insta-widget"><img class="ig-hover" src="{{image}}" alt="{{user.full_name}}"/><div class="likes"><div class="box"><div class="row"><div class="col-12"><img class="profile" src="{{model.user.profile_picture}}"/></div><div class="col-6"><img class="heart" src="img/Icons/ig-heart-100x100.png"></div><div class="col-6"><p>{{likes}}</p></div></div></div></div></div></a></div>',
});

userFeed.run();

}); `

It creates 4 fully responsive div's with the feed. What am I missing. When I tried to add the filter you provided the feed doesn't show. Not very good creating with javascript but I can follow along with some help.

Thanks!