search

HackingHistory / hh-project-11ty-starter-kit

Experimental 11ty site for students
https://hackinghistory.github.io/hh-project-11ty-starter-kit/
ISC License
0 stars 5 forks source link

Instagram Images Links #9

Open Jb-zn opened 2 years ago

Jb-zn commented 2 years ago

I want to create grid-like images embedded from the links on the original Instagram post. The images will be clear, but it will show the Instagram username when you hover your mouse over there. When you click on the image, it will directly take you to the Instagram post. I would like to make it look like the following websites. Additionally, in the bottom bar where there is a Twitter icon, I want to switch it to the Instagram icon instead. https://dressingdykes.com

titaniumbones commented 2 years ago

as we talked about, I think there are lots of ocmplexities to the way we do this. A stragihtforward instagram embeder is already available online, https://www.npmjs.com/package/eleventy-plugin-embed-instagram -- this is parto f hte same "11ty-embed-everything" project that @Hazelkatnut was interested in. However, I odn't think it's going to do what you want. That said, you might still want to try it out. Try following the instructions and if you are not able, I can write up the steps.

Probbably we'd still need to modify it for your needs anyway.

titaniumbones commented 2 years ago

OK, here is a start @Jb-zn @Hazelkatnut

first, in the terminal form VSCode, issue this command:

npm install eleventy-plugin-embed-everything

after that succeeds, you need to add two lines to your .eleventy.js file.

first, near the top, say after line 13, 

const embeds = require("eleventy-plugin-embed-everything");

then, in the body of module.exports (line 16 after the addition) add a line somewhere around l. 18:

  eleventyConfig.addPlugin(embeds);

Now every youtube, spotify, or instagram link added to the file as its own line will be rendered as a full post.

THere is still a fair bit of work to do but you'll need to be this working first. Please report back here when you've had a hcance to implement this, or if you're having any trouble.