Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
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. Thewidth: 100%; padding-bottom: 100%;
keeps it as a pure square aspect ratio. Change the value forpadding-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,308
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
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,308
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
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 | hblack.art | EMAP | A Sea change | Toolkit of Care
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,308
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
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 | hblack.art | EMAP | A Sea change | Toolkit of Care
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,308
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: 99
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
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
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: 99
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