oui_instagram - Display Instagram user infos and recent images

zenman · 2019-04-28 08:57:27

jakob wrote #317787:

Duh, yes, of course I meant object-fit: cover;. I’ve corrected that above. Thanks for spotting that.

To maintain the aspect ration with css without specifying an explicit height, you can use the padding-bottom aspect-ratio trick:

<div class="container">...

with this css:

.container {...

changing the 33% to match whatever width you want. The width: 100%; padding-bottom: 100%; keeps it as a pure square aspect ratio. Change the value for padding-bottom to get another aspect ratio. You can play with the above in this codepen.

Oh Thanks! I tried the CSS with the cover. It works well – https://lpgtectonica.ru

I used instafeedjs plugin instead of oui_instagram. But I will switch back to oui_instagram having the css method. Easier to edit.

<script src="../js/instafeed.min.js"></script>
<script type="text/javascript">
var userFeed = new Instafeed({
    target: 'instafeed',
    get: 'user',
    userId: 'xxxxxxx',
    clientId: 'xxxxxxxxx',
    accessToken: 'xxxxxxxxxx',
    limit: '8',
    sortBy: 'most-recent',
    resolution: 'standard_resolution',   
    template: '<div class="col-lg-4 col-sm-6 col-xl-3 mb-2"><div class="overlay-container insta"><img class="object-fit-cover" src="{{image}}" /><div class="overlay-top"><div class="text"><p class="small">{{caption}}</p></div></div><div class="overlay-bottom"><div class="links"><a rel="nofollow" target="_blank" href="{{link}}" class="btn btn-gray-transparent btn-animated btn-sm">More</a></div></div></div></div>'
});
userFeed.run();
</script>
/*** pics output ***/
<div class="row mt-2" id="instafeed"></div>


<style>
.insta {
  position: relative;
  display: block;
  /*width: 33%;*/
}
.insta::before {
    content: "";
    display: block;
    width: 100%;
    padding-bottom: 100%;
}
.insta > img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width:100%;
  height: 100%;
}
.object-fit-cover {
  object-fit: cover;
}
</style>

Last edited by zenman (2019-04-28 09:08:22)

Gallex · 2019-06-28 12:40:29

zenman wrote #317798:

Oh Thanks! I tried the CSS with the cover. It works well – https://lpgtectonica.ru

where exactly on a page, i can’t see…

admi · 2019-06-28 14:26:10

Gallex wrote #318590:

where exactly on a page, i can’t see…

it is not on the TXP site homepage now.
see old html page index.html

Last edited by admi (2019-06-28 14:27:47)

Gallex · 2019-07-08 12:29:16

please take a look inside <section class="content-3 bg-2"> at this page

can anybody tell me, where comes those extra <p></p> before and after <div class="insta-user"> ?

my form:

<div class="insta-wrapper">
<txp:oui_insta_author break="" access_token="5603.....">
 <div class="insta-user">
    <txp:oui_insta_author_info type="avatar" link="instagram" wraptag="div" class="avatar" />
    <txp:image class="instalogo" escape="" id="821" />
    <txp:oui_insta_author_info type="username" link="instagram" />
</div>
</txp:oui_insta_author>
<txp:oui_insta_images limit="18" class="oui-insta" access_token="5603304411.1677ed0.9880764e267f4969a78dbf9ab49ffe49">
    <txp:oui_insta_image_url link="1"><txp:oui_insta_image type="thumbnail" /></txp:oui_insta_image_url>
</txp:oui_insta_images>
</div>

colak · 2019-07-08 14:15:42

Your form is a miscellaneous form? How do you call it in the article? If it is via the write tab you many need to add a space. ie


 <txp::your_form />

Gallex · 2019-07-09 06:35:05

colak wrote #318657:

Your form is a miscellaneous form? How do you call it in the article? If it is via the write tab you many need to add a space. ie

...

yes, it is a miscellaneous and i call it via page template <txp:output_form form="oui_insta" />

colak · 2019-07-09 18:22:23

Hmmm.. It is indeed strange. Maybe change
<txp:oui_insta_author break="" access_token="5603.....">
to
<txp:oui_insta_author break="" wraptag="" access_token="5603.....">

Gallex · 2019-07-10 06:31:04

colak wrote #318667:

Hmmm.. It is indeed strange. Maybe change
<txp:oui_insta_author break="" access_token="5603.....">
to
<txp:oui_insta_author break="" wraptag="" access_token="5603.....">

genius! ;)

peterj · 2020-02-19 08:01:55

I just found out that the current Instagram API will cease to work on March 2nd 2020, which is quite soon… Looking at the instafeed.js github and pixel union’s access token service , everyone is packing up and going home.

How are people dealing with this – I can’t see an affordable way to keep a person’s instagram feed displaying on a TXP site.

jakob · 2020-02-19 09:12:38

It looks like the legacy API is closing in favour of a Graph API for business and pro users and a Basic Display API for typical consumer things such as image feeds: See here.

In short, it looks like there is a new method available but oui_instagram likely doesn’t support it. Try contacting Nicolas directly as he says on his GitHub profile that he’s not always checking. I’ll post an issue on GitHub in the meantime.

Bloke · 2020-02-19 09:26:40

I can sort of see why instafeed.js are all doom and gloom about it. As it’s a js plugin they’ll have problems.

But for Txp plugins, as jakob says, read access to obtain a feed is just a bunch of new hoops to jump through. Looks like you need to ask user permissions (once) to get a short-lived token (valid for an hour), exchange that for a long-lived token (valid for 60 days) from server-side code only (not from JS) and then store that token in the Txp plugin. You then have unfettered read access to albums, images and such-like to display feeds.

As long as every time the feed is accessed an attempt is made to refresh the long-lived token (though I would throttle this to once a day maximum) the authorization token won’t expire. If your blog is not accessed in 60 days then re-authorization will be required.

EDIT: corrected first paragraph after a bit of thought.

Last edited by Bloke (2020-02-19 09:32:16)

peterj · 2020-02-24 04:59:15

Thanks both.
- I have also posted to github.
- I’ve looked at FB and scratched head, will go back in soon.
- Current API has been extended to March 31st
- Plan B is Smash Balloon’s standalone script, which looks like it could work, though it costs 49USD/yr. It’s their WP plugin without the UI.

Textpattern CMS

Textpattern CMS support forum

#37 2019-04-28 08:57:27

Re: oui_instagram - Display Instagram user infos and recent images

jakob wrote #317787:

#38 2019-06-28 12:40:29

Re: oui_instagram - Display Instagram user infos and recent images

zenman wrote #317798:

#39 2019-06-28 14:26:10

Re: oui_instagram - Display Instagram user infos and recent images

Gallex wrote #318590:

#40 2019-07-08 12:29:16

Re: oui_instagram - Display Instagram user infos and recent images

#41 2019-07-08 14:15:42

Re: oui_instagram - Display Instagram user infos and recent images

#42 2019-07-09 06:35:05

Re: oui_instagram - Display Instagram user infos and recent images

colak wrote #318657:

#43 2019-07-09 18:22:23

Re: oui_instagram - Display Instagram user infos and recent images

#44 2019-07-10 06:31:04

Re: oui_instagram - Display Instagram user infos and recent images

colak wrote #318667:

#45 2020-02-19 08:01:55

Re: oui_instagram - Display Instagram user infos and recent images

#46 2020-02-19 09:12:38

Re: oui_instagram - Display Instagram user infos and recent images

#47 2020-02-19 09:26:40

Re: oui_instagram - Display Instagram user infos and recent images

#48 2020-02-24 04:59:15

Re: oui_instagram - Display Instagram user infos and recent images

Board footer