Photo Gallery Forums

Hello Karl,

1) After many trial and reading the forum, i  added my Instagram feed and accessToken. With the function x3_load_page so i don't had to reload the page to view the images :
However, as you can see in the printscreen i will send you PM, the feed doesn't show right. How can i set the layout in 3 rows per exemple and centered in the page?  I tried wrap the instafeed  and added custom css, but it doesn't work. Also when i hover on an thumbnail, i can see behind the pink hover button. Maybe  showing the thumbnails before the hover is related to z index ?

Can you please help with this ?

It's all for now.
Thank you in advance for your help.

Kati
ps: wishlist of Imagevuex3 plugins : Instagram feed  to  the page or  small square in the footer or under sidebar menu :-)

Kat wrote:1) After many trial and reading the forum, i  added my Instagram feed and accessToken.

This "instagram feed" sounds cool, but I have no idea what it does, how it works or what you are trying to do with it. Based on your code, I searched up http://instafeedjs.com/, a 3rd-party plugin, but there are no demo's and neither did you provide a link.

Kat wrote:With the function x3_load_page so i don't had to reload the page to view the images :

Code Select all

function x3_load_page(){
$.getScript("/../js/instafeed.js-master/instafeed.min.js");

You probably wouldn't need to load this for each page ... But I can't say much about that until I worked with this plugin.

Kat wrote:However, as you can see in the printscreen i will send you PM, the feed doesn't show right.

In your screenshot, I see 6 thumbnails. I have no idea that this is wrong or why it is wrong, or what it's supposed to look like ...

Kat wrote:How can i set the layout in 3 rows per exemple and centered in the page?  I tried wrap the instafeed  and added custom css, but it doesn't work.

Code Select all

<div class="row" style="heigth:400px;  width:500px;" >
<div id="instafeed"></div> 
</div>

I am not sure what you are trying to do with the code above. It's just a container element. The instafeed element inside I suspect is populated by the javascript ... I have no idea if this plugin allows to you spread items into custom elements ... Also, you mean "columns" instead of "rows"?

I only found one example of this script here http://garand.me/ ... To create rows/columns, this would be part of the script CONFIGURATION, and not something you create html elements up front. The script just injects itself into <div id="instafeed"></div> ... You can't make the layout up front.

Kat wrote:Also when i hover on an thumbnail, i can see behind the pink hover button. Maybe  showing the thumbnails before the hover is related to z index ?

Don't know what "the pink button" is ... Some part of the plugin? How am I supposed to guess?

Kat wrote:Can you please help with this ?

Yes. But you need to provide more information. This is a 3rd party plugin ... A quick look at the plugin home page shows that there are tons of settings http://instafeedjs.com/ ...

Kat wrote:ps: wishlist of Imagevuex3 plugins : Instagram feed  to  the page or  small square in the footer or under sidebar menu :-)

This plugin looks very cool, and yes I would be interested in looking into it. It's a job that would take some time though ... All the layout options are part of the plugin itself, and not something you do from X3.

If you can provide me with a link to your page (PM), and en explanation to exactly what you are trying to do, then maybe I can find some time soon to look into it. I can't just answer your question based on your code, which likely has no effect since settings for this plugin are unrelated to X3.

 Thank you for you quick answer Karl,  and your interest for instafeed.
In fact, i learned from this page  http://instafeedjs.com/  to embed this on my previous website.
Here is what i put in the custom javascript in imagevuex (i remplace my personal data with xxxx) custom head custom css (added float:left) but it change nothing for the layout  then i added in custom page content (i deleted the "row" div) as it doesn't change anything. I think the pink line i saw behind the thumbnails when hover,  is the a:hover  link from imagevuex . I previously changed this in custom css with "transparent" because i didn't want show the background color when link hover. I added this on custom css for this : now the line is invisible. In my other website, i just added this instafeed div, wrapped simply in a  content div, whithout problem. The instafeed just show like a gallery and stay within the div. In Imagevuex, it's like it's overlap the div "row".  I will send you PM to this page.
Kati

mjau-mjau wrote: You probably wouldn't need to load this for each page ... But I can't say much about that until I worked with this plugin.

the problem was that i had a blank page like discussed here https://forum.photo.gallery/viewtopic.php?t=8487 when i came back to the page.
To solve this i  added those first  lines before "var feed = new Instafeed({ ...." to initiate the script each time i open the page of instagram feed.

To solve the main issue, add this to your custom CSS: There are some inheritance problems with X3 link styles.

* I deleted a my previous post from 10 minutes ago, because I wrote it before I saw the recent email from you with a link.

mjau-mjau wrote:To solve the main issue, add this to your custom CSS:

Code Select all

#instafeed > a {
  white-space: normal !important;
}

There are some inheritance problems with X3 link styles.

* I deleted a my previous post from 10 minutes ago, because I wrote it before I saw the recent email from you with a link.

YES ! that  line solved my problem !  I was run out of trying to fix this alone. Thank you

Is there a website on X3 with the modification to see what it looks like? 

Could imagine implementing that as well.

Regards
Danjel Rojka

I believe you can find in @Kat's website:
kataline.be/gallery/instagram/

I was messing around with Instagram plugin the other day, and it's quite complicated now because Instagram requires an "access token". Was hoping it would be easier to integrate an Instagram plugin into X3 without requiring users to go through this ordeal.
https://elfsight.com/blog/2016/05/how-t ... ess-token/

Perhaps there is an easier way, but it's not well documented.

Thats fantastic implementation in the Website. 

This was next Todo for me.

The biggest difficulty with the plugin is to create the access token. Because you have to register as a developer.

Regards
Danjel Rojka

hardliner wrote: Thats fantastic implementation in the Website. 

This was next Todo for me.

The biggest difficulty with the plugin is to create the access token. Because you have to register as a developer.

Regards
Danjel Rojka

Hello Danjel,

You don't have to be a developer to have a instagram token, just register on they website. I followed the instructions of this script http://instafeedjs.com/ i implemented, (there are several plugin on the net but this was the easiest for me) on my page with some custom css and help of Karl for the general layout.

Good work,
Kati

What I want to achieve is the same implementation as you have. Make my Instagram account visible on my site.

Kat wrote:You don't have to be a developer to have a instagram token, just register on they website. I followed the instructions of this script http://instafeedjs.com/ i implemented

You may have registered at different time when things were easier. There are no instructions in the link above on how to get an access token ... at least not any more. Also, the references in the link above are incorrect, amongst other things it states "accessToken is no longer required to fetch images from user accounts!".

Kat wrote:(there are several plugin on the net but this was the easiest for me)

Actually, there aren't many plugins like this. All the other plugins are website "services" where you are basically embedding a feed as an IFRAME from their website / application. There is a decent solution in the link below, but it is inferior to direct integration like instafeed.
https://lightwidget.com/

For now, I only succeeded to get access token with this extremely tedious approach:
https://elfsight.com/blog/2016/05/how-t ... ess-token/

There are some more recent posts here about getting access_token:
gist.github.com/mojaray2k/b502d75dd7a9fa277876
https://github.com/stevenschobert/insta ... issues/485
https://stackoverflow.com/questions/483 ... is-invalid

I am interested in making our own X3 Instagram plugin, but then of course it shouldn't be that difficult for users having to create some access token. I will have to research more, but Instagram are making it difficult with new restrictions and lack of info.

hardliner wrote: What I want to achieve is the same implementation as you have. Make my Instagram account visible on my site.

I understand. This plugin was on my wishlist in "features" section. It would be indeed easier. Maybe one day hopefully :sparkles: !

Hello Karl,

When one is logged on his instagram account, open this page https://www.instagram.com/developer/clients/register/ on a new tab. From there you follow instructions. Since i received this access token,  i didn't had to register different time.

Also i gave the instafeed.js link because this is the script i choosed at that time,  to implement my instagram feed. 

Kat wrote:When one is logged on his instagram account, open this page https://www.instagram.com/developer/clients/register/ on a new tab. From there you follow instructions. Since i received this access token,  i didn't had to register different time.

There is no way you get an access token from the process you are referring to above Kat. Maybe earlier, now no.

Kat wrote:Also i gave the instafeed.js link because this is the script i choosed at that time,  to implement my instagram feed.

Yes, and this is the best JS plugin, although there seems to be problems now that Instagram are changing their API access policies, and it doesn't seem to get updated. I don't think it would be too difficult to create native X3 plugin as good or better than this, but first there is the issue with access tokens.