Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

zenman
Member
Registered: 2017-08-28
Posts: 41
Website

Re: oui_instagram - Display Instagram user infos and recent images

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)

Offline

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

Gallex
Member
Registered: 2006-10-08
Posts: 1,223

Re: oui_instagram - Display Instagram user infos and recent images

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…

Offline

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

admi
Member
From: BY
Registered: 2007-12-10
Posts: 145
Website

Re: oui_instagram - Display Instagram user infos and recent images

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)

Offline

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

Gallex
Member
Registered: 2006-10-08
Posts: 1,223

Re: oui_instagram - Display Instagram user infos and recent images

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>

Offline

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

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,724
Website GitHub Twitter

Re: oui_instagram - Display Instagram user infos and recent images

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

Yiannis
——————————
neme.org | hblack.net | State Machines | NeMe @ github
I do my best editing after I click on the submit button.

Offline

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

Gallex
Member
Registered: 2006-10-08
Posts: 1,223

Re: oui_instagram - Display Instagram user infos and recent images

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" />

Offline

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

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,724
Website GitHub Twitter

Re: oui_instagram - Display Instagram user infos and recent images

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.....">


Yiannis
——————————
neme.org | hblack.net | State Machines | NeMe @ github
I do my best editing after I click on the submit button.

Offline

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

Gallex
Member
Registered: 2006-10-08
Posts: 1,223

Re: oui_instagram - Display Instagram user infos and recent images

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

Offline

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

peterj
Member
From: Melbourne, Australia
Registered: 2005-06-02
Posts: 76

Re: oui_instagram - Display Instagram user infos and recent images

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.

Offline

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

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,172
Website

Re: oui_instagram - Display Instagram user infos and recent images

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.


TXP Builders – finely-crafted code, design and txp

Offline

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

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 10,520
Website GitHub

Re: oui_instagram - Display Instagram user infos and recent images

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)


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

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

peterj
Member
From: Melbourne, Australia
Registered: 2005-06-02
Posts: 76

Re: oui_instagram - Display Instagram user infos and recent images

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.

Offline

Board footer

Powered by FluxBB