Struggling to format pictures with instafeed.js

I am currently working on a website section that utilizes instafeed.js to display the three most recent images from an Instagram account. The images are loading correctly, but I need some guidance on how to style them appropriately. Unfortunately, the HTML generated by instafeed does not include classes for the images, which is why I am reaching out for help. Below you will find screenshots of the desired styling and the current layout. Additionally, I have included the source file HTML and the output from instafeed. Any assistance would be greatly appreciated!

Current default image loading (current state): https://i.sstatic.net/6rIea.png

Desired image layout: https://i.sstatic.net/NTFO1.png

Source file HTML (instafeed requires 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>

Generated content:

https://i.sstatic.net/iCKUu.png

javascripthtmlcsswordpress

Answer №1

In order to retrieve the ID of each photo from a template, you can utilize the Instafeed object provided within your code. Check out this templating documentation for details.

<script type="text/javascript>

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

</script>

Answer №2

Give this a shot

<!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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhancing a Stripe customer object with additional metadata

While setting up a payment system using Stripe, I encountered an issue when trying to add metadata to the customer object. Specifically, I wanted to include my workspace id in the metadata property of the customer. However, upon executing the code below, I ...

javascriptnode.jsstripe-payments

What is the functionality of __proto__ when an object is initialized using Object.create(null)?

Take a look at this javascript snippet: var x = Object.create(null); x.bar = 2; var y = Object.create(x); console.log(y.bar); //outputs 2 console.log(y.__proto__); //outputs undefined y.__proto__ = null; console.log(y.__proto__); //outputs null console ...

javascriptinheritanceprototypeprototype-chain

Difficulty with Pomodoro clock's canvas ring function not working as expected

Hey everyone, good evening. I've been struggling with a particular section of code for quite some time now and could really use some help. When you check out the constructor at this.drawArc and then look into the prototype, I've printed a couple ...

javascriptconstructorprototypecanvasjs

When setting an attribute on load, Javascript may not properly apply the change to the attribute

I designed a webpage where images have a fade-in effect using a CSS class. Initially, 4 images load with the desired effect. However, I encounter an issue when trying to apply the same effect to a new image that appears upon clicking a button. Below is th ...

javascripthtml

In which part of the DOM tree are Event/Callbacks typically located?

As I work on creating a one-page web application, the task of dynamically constructing nested Backbone.View components arises. My typical approach involves building an empty jQuery object, populating it with div elements, binding events to it, and then re ...

htmljquerydomjquery-events

Attempting to replicate a <textarea> to behave like a <div> element

I am currently facing an issue with my HTML and CSS code. I have tried to construct a design using a <div> but it resulted in horizontal scrolling and looked chaotic. How can I make the CSS and HTML look the same without any issues? <textarea c ...

htmlcss

Issue with looping in Javascript with jQuery

Can anyone explain why this for loop returns "bob" but "undefined" for "jacob"? $(function(){ count = 1; for(x=0; x <= count; x++) { track = $('#track' + x).val(); document.write(track ...

javascriptjqueryfor-loop

What is the best way to display the entire background image in a jumbotron?

After some experimentation, I discovered that by increasing the amount of content I have, it displays the full background image. Is there a clean and efficient way to achieve this? <div class="jumbotron jumbotron-fluid" style="background: url('./a ...

htmlcsstwitter-bootstrapimage

Learning to extract information from elements within components in a flexbox using Angular

Is there a way to access the element width of child components within a parent component that utilizes flex box? I am hoping to determine if the list is overflowed so I can adjust the visibility of elements accordingly. If an overflow occurs, I would like ...

htmlcssangularflexbox

A guide on arranging and styling last names in an array in alphabetical order using JavaScript!

I created an array called moonwalkers and developed a function named alphabetizer to organize the names in alphabetical order with the last name appearing first. Although it functions correctly, I am seeking ways to enhance the code. For my reference, I ...

javascriptarrayssorting

Assistance needed in obtaining the ID of a specific table row using jQuery

Currently, I am working on an AJAX request using Jquery and PHP. The task involves looping through an array to generate a table. During each iteration, a new ID is assigned to the table row. When users click on the "read me" link, additional content is f ...

phpjavascriptjquery

Tips for designing a three-line label: positioning text in the middle, above, and below

I have a label that looks like this: https://i.sstatic.net/q0DaR.png Is there a way to position 'Lorem ipsum' perfectly in the center between 'dolor' and 'amet'? https://i.sstatic.net/aJapG.png - reference image T ...

htmlcssbootstrap-4css-position

How to preselect a radio button in an Angular radio button group list?

Having an issue with setting a default radio button as checked when the page loads in my Angular 7 and HTML project. I am able to retrieve the value but struggling to mark a radio button as checked during the page load. Any advice on how to resolve this wo ...

htmlangularngforradiobuttonlist

A recursive function enhanced with a timeout mechanism to avoid exceeding the stack call limit

Trying to search for images on any object of various depths using a recursive function can lead to a Maximum call stack size exceeded error in certain cases. A suggested solution here involves wrapping the recursive function in a setTimeout, but this seems ...

javascriptnode.jsrecursion

Appending the desired URL to the existing URL using an Ajax callback

Ever since I started working on a Drupal 7 project, I have been facing an issue with making an ajax call back. The problem arises when the URL I intend to use for the callback gets appended to the current page the user is viewing. It's quite puzzling ...

javascriptjqueryajax

Ensuring text is perfectly centered within a div, regardless of its length

In the quest to center text of unknown length within a div, challenges arise. Constraints limit its size to a certain extent, making it unclear whether one or two lines will be needed. As such, traditional methods like line-height are not viable options. A ...

csshtmlpositioning

What could be causing the significant gap at the bottom of my Flexbox?

Whenever I resize the page to fit a mobile device, there is always a large gap at the bottom. I want the content to stack normally when it shrinks, without leaving a huge gap at the bottom. There is no gap at the bottom when viewed on desktop, but as soo ...

htmlcssflexbox

Issue encountered when attempting to print a Bootstrap table using Google Chrome

Encountering a strange issue while attempting to print my webpage in Chrome. Using Bootstrap, I have a table that adjusts perfectly to the screen size but gets cropped when trying to print in Chrome, unlike Firefox where it prints perfectly. Here is a lin ...

htmlcssangularjstwitter-bootstrapgoogle-chrome

Using type annotations is restricted to TypeScript files only, as indicated by error code ts(8010)

I encountered an issue with React.MouseEvent<HTMLElement> const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => { setAnchorElNav(event.currentTarget); }; const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement ...

javascriptreactjsmaterial-ui

Avoid creating a line break directly after the header, however allow for a line break

I find myself in a scenario where I require a paragraph that has a specific format: An Emphasized Title Some relevant information regarding the subject... I am looking to insert a new line before the title, ensuring it seamlessly integrates with the re ...

htmlcssheaderjekyll