Instafeed Help?

[joey13]

Does anybody have any experience with Instafeed.js for their projects, If so come forward I need some help with making my feed look a certain way

I just want a simple 3x3 grid (2x3 on mobile) but on desktop iIwant the top row to move to the right one picture so one hangs off the grid like this:

[m_hutley]

So, before you get to the whole… instafeed.js part, what code are you using to decide whether you’re on desktop or mobile?

[joey13]

I am using HTML and CSS but I am currently using media queries

[m_hutley]

Right, but what javascript code are you using to decide if you’re on desktop or mobile?

[joey13]

I am not i don’t think this is all i’ve got so far Instafeed is all new to me:

document.addEventListener("DOMContentLoaded", function() {
  var Feed = new Instafeed({
    get: "user",
    userId: "xxxx",
    clientId: "xxxxx",
    accessToken: "xxx.xxxxxxx",
    sortBy: "most-recent",
    limit: 9,
    template: '<a target="_blank" href="{{link}}"><img src="{{image}}" />'
  });

  Feed.run();
});

[m_hutley]

And what does your CSS look like?

[joey13]

I literally only have:

#instafeed{
column-count:3;
}

[m_hutley]

@joey13

I literally only have:

#instafeed{
column-count:3;
}

@joey13

I am using HTML and CSS but I am currently using media queries

These two statements do not match up.

[joey13]

Sorry, I haven’t got anything now as i scrapped it due to not working so i am back to the beginning

[m_hutley]

So get it back to a state such that you have a 3x3 grid with that extra box beside it, and a 2x3 grid for mobile, and then come back and we’ll try and figure out how to change it.

[m3g4p0p]

@joey13

Does anybody have any experience with Instafeed.js for their projects, If so come forward I need some help with making my feed look a certain way

This is really a matter of pure CSS; instafeed just adds items (as specified in the template option) to a container element, and you can then use CSS grid to align them the way you want; for example:

.container {
  display: grid;
  grid-template-columns: repeat(5, 150px);
  grid-template-rows: repeat(3, 150px);
  grid-gap: 10px;
}

.container > a:first-of-type {
  grid-column: 2;
}

.container > a:nth-of-type(3) {
  grid-column: 4 / span 2;
  margin-right: auto;
}

.container > h1 {
  grid-column: 4 / span 2;
  grid-row: 2;
  margin: 0;
  background-color: yellow;
  color: red;
}

<div id="instafeed" class="container">
  <h1>Instagram</h1>
  <!-- 
    Gets filled with 9 x
    <a href="..."><img src="..." alt="..."></a>
   -->
</div>

I only dabbled in CSS grid myself though… not sure if this is the best way to achieve this (e.g. the “Instagram” headline box now has a fixed width rather than stretching to the right border as in your sketch). I’ll move this topic to the CSS category, maybe someone more knowledgeable like @PaulOB has a better solution. :-)

Edit: Alright fixed the headline myself… :-)

.container {
  display: grid;
  grid-template-columns: repeat(4, 150px) auto;
  grid-template-rows: repeat(3, 150px);
  grid-gap: 10px;
}

[joey13]

@m3g4p0p Thanks for this, I went away and did it myself i have the Instagram part in the position I want it in but for some reason when I go into mobile my limit is not working I set it 6 but it still shows 11!

var screenwidth = window.matchMedia("(min-width: 900px)").matches;

var Feed({
limit: screenwidth ? 11 : 6,

[m_hutley]

Well i’d wrap that ternary in parenthesis, but it seems as though that should work… as long as nothing has changed screenwidth between the first line and second one… (and it’s still in scope…)

[joey13]

Hey Thanks,

It does seem to work now but i believe its because of the browser size when i shrink to mobile and refresh theres 6 showing and when i grow and refresh there is 11

[m_hutley]

Yes, that’s… what the line says.

If you don’t know what the code is doing, how can you tell us it’s not working?

[m3g4p0p]

@joey13

It does seem to work now but i believe its because of the browser size when i shrink to mobile and refresh theres 6 showing and when i grow and refresh there is 11

Yes, that media check only runs once initially and doesn’t automatically update the feed when you resize the window (which would technically be possible with a resize event listener, but that would mean a lot of unnecessary requests). What you might do though is simply hide all elements after the 6th link for media queries < 900px:

@media screen and (max-width: 900px) {
  .container > a:nth-of-type(6) ~ * {
    display: none;
  }
}

Still no JS, just CSS. ;-)

[joey13]

This would make sense, I added this to my media query and made sure the container class was right but does not seem to be working

EDIT: it turns out that this worked

.Container-Instagram #instafeed > a:nth-of-type(6) ~ * {
    display: none;
  }