Trouble styling images using instafeed.js

2 Views

I am working on a section of a website that uses instafeed.js to pull the three most recent images from an instagram account. I got the images loading correctly, but I need some advice on how to style these images the way the need to be. The html that is generated from instafeed doesn’t provide classes for the imgaes, otherwise I wouldn’t be seeking help. Below are screenshots of how I need it, and how it currently is. Also there is the HTML of the source file, and what gets generated from instafeed. Any help would be really great!

How images get loaded by default (how it is currently):
enter image description here

Read More

How I need it to be:
enter image description here

Source file HTML (instafeed looks for a div with an id of “instafeed” to load the images into): 

<div class="col2">
  <div class="insta-box">

    <div id="instafeed"></div>

  </div>

  <div class="acell">
    <div class="contentbox">
      <a href="https://www.youtube.com/channel/UCQEXfLzrNpxe7AZme3dTP0w" target="_blank"><img class="yt-bg" src="<?php bloginfo('stylesheet_directory'); ?>/images/youtube-img.jpg" alt="Youtube" /><span><img class="play" src="<?php bloginfo('stylesheet_directory'); ?>/images/play-img.png"></img>Press Play!</span></a>
    </div>
  </div>
</div>

What gets generated:

enter image description here

Post Views: 2

Related posts

2 comments

  1. You may be able to access the ID of each photo within a template via the Instafeed object. See documentation for templating here

    <script type="text/javascript">

var feed = new Instafeed({
    // your options, 
    template: '<a class="{{id}}" href="{{link}}"><img src="{{image}}" /></a>'
});
feed.run();

</script>

  2. Try this

    <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){

    $("img:not(:first)").attr({
            "width" : "110",
            "height" : "120"
        });
        $("img:first").attr({
            "width" : "300",
            "height" : "275"
        });

});
</script>
<style>
div.img {
    margin: 5px;
    padding: 5px;
    border: 1px solid #0000ff;
    height: auto;
    width: auto;
    float: left;
    text-align: center;
}   

div.img img {
    display: inline;
    margin: 5px;
    border: 1px solid #ffffff;
}
.instafeed{
max-width:480px;
max-height:300px;
border: 1px solid;
}

</style>
</head>
<body>
<div class="instafeed">
<div class="img">
 <a  href=""><img src="" ></a>

</div>
<div class="img">
 <a  href=""><img src="" ></a>

</div>
<div class="img">
 <a href=""><img src="" ></a>

</div>

</div>

</body>
</html>

Comments are closed.