Search…

X3 Photo Gallery Support Forums

Search…
 
Kat
Experienced
Topic Author
Posts: 45
Joined: 26 Sep 2016, 10:46

Re: Instagram feed

17 Dec 2018, 03:44

Hi Karl
Can you please check why my instagram image doesn't show right in the popup. It's like it's embedd as an iframe
instead as an image, without data and off-centered, except the third and fourth image.
insta-iframe.JPG
insta-iframe.JPG (33.86 KiB) Viewed 3478 times
I sent you printscreen in pm. I  checked Danjel website and there is the same issue
Could it be some conflict with the last update ? Because everthing worked fine until now.
Thank's for your help

Best regard
Kati
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Instagram feed

17 Dec 2018, 04:40

Well, unless you, or the plugin, or instagram changed it's approach, yes I can see images load inside an IFRAME. The X3 POPUP normally depends on attributes data-width and data-height to be defined for the link, else it does not know how large to display the image. We actually built in a workaround for this, if the width/height parameters are missing, X3 will detect image width and height AFTER the image is loaded. But now, if you are loading an IFRAME into a popup which is meant for images, then you are out of luck.

The X3 popup is created for IMAGES. It will work for IFRAME also, but it can't detect any content inside or how to display it.

So this was working before? but now Instagram changed something? This is just not "fixable" if you need to load an IFRAME, because the popup needs to detect the size of the image inside, so to center it or scale it all depending on image size, aspect vs screen aspect. Sorry ... Hopefully I can look into a dedicated solution at some point, but Instgram don't seem to be liking it.
 
Kat
Experienced
Topic Author
Posts: 45
Joined: 26 Sep 2016, 10:46

Re: Instagram feed

17 Dec 2018, 06:19

mjau-mjau wrote: Well, unless you, or the plugin, or instagram changed it's approach, yes I can see images load inside an IFRAME. 
I didn't change anything. Nor in instagram template. It's calling the image not an iframe. 

When looking at the console there is some error and warning :
insta-popup.JPG
insta-popup.JPG (37.02 KiB) Viewed 3473 times
Could be some answer here ? adding a custom script for .pswp ?
https://stackoverflow.com/questions/139 ... image-jpeg
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Instagram feed

17 Dec 2018, 10:30

A bit hard to diagnose without seeing your custom X3 javascript code, which you now have removed in place of another popup. I took a look at Danjel's website, and I can see the problem. Either the plugin changed, or more likely, Instagram changed their API output, because their image url's now look something like this (note the last part):
href="//scontent.cdninstagram.com/vp/7c467bebbc30324129b50871c3a26f05/5C982E1C/t51.2885-15/sh0.08/e35/p640x640/46352168_924230287773058_2633442970289318963_n.jpg?_nc_ht=scontent.cdninstagram.com"
With an URL like this, X3 popup can't know it's an image, because it doesn't end with an image extension. Thus, the only way to display non-image content, would be by using iframe. You need to tell X3 explicitly that the HREF is an image, by using data-popup-image attribute (instead of just data-popup).
Code
<a href="https://d.pr/i/3SjM+" data-popup-image>Force popup image-type</a>
Reference to this in popup examples.
 
Kat
Experienced
Topic Author
Posts: 45
Joined: 26 Sep 2016, 10:46

Re: Instagram feed

17 Dec 2018, 11:33

mjau-mjau wrote: You need to tell X3 explicitly that the HREF is an image, by using data-popup-image attribute (instead of just data-popup).
I will try this. Thank you.
Last edited by Kat on 17 Dec 2018, 12:59, edited 1 time in total.
 
Kat
Experienced
Topic Author
Posts: 45
Joined: 26 Sep 2016, 10:46

Re: Instagram feed

17 Dec 2018, 12:56

mjau-mjau wrote:
Code
<a href="https://d.pr/i/3SjM+" data-popup-image>Force popup image-type</a>
This work ! And to have the left and right arrow, i had to wrap the feed between
Code
<div data-popup-container>
</div>
if i just add  :
Code
rel="mypopup"
the thumbs does not open.

Thank you again for your help Karl. I really don't know what went wrong but now i am happy it's work again.

Wish you happy holidays
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Instagram feed

17 Dec 2018, 21:09

Kat wrote:Thank you again for your help Karl. I really don't know what went wrong but now i am happy it's work again
:thumbsup:
Instagram changed the output from their API.