Instagram Instance Failing on Production Site

[luxlogica]

I have been developing a site with KirbyGram on a local development setup - MacOS with MAMP. Things were working fine in the local setup, but failed as soon as I uploaded the site to the production server.

A couple of items of note:

1. I had copied the code directly from the examples into my templates. In my production server, however, the php shortcuts <? and <?= were disabled, and because of that I kept getting errors that were difficult to troubleshoot. Finally, I caught on, and replaced all occurrences with the equivalent <?php and <?php echo.
2. Main Issue: I keep getting the following error:

Strict Standards: Declaration of Instagram\Url::hasQuery() should be compatible with Url::hasQuery($url = NULL) in /[...]/site/plugins/kirbygram/lib/Instagram/Url.php on line 11

I saw in a previous issue that you suggested instantiating $instagram at the beginning of your code, and that it should clear that error - I tried it like this in my template (which is actually a snippet), without any success:

<?php 
  $instagram = new \Instagram();
  foreach($instagram->feed()->only("image")->limit(5)->get() as $image): 
?>   
     <a href="<?php echo $image->link() ?>" class="insta-link">
        <img src=“<?php echo $image->thumbnail() ?>" />
    </a>
<?php endforeach; ?>

The 5 instagram images don't load, either. When I look at the Web Console, I can see 5 errors - one for each image - which look like this:

Failed to load resource: the server responded with a status of 404 (Not Found):
http://example.com/mysite/%E2%80%9Chttps://scontent.cdninstagram.com/hphotos-xap1/t99.9999-15/s150x150/e19/999999_843956168996015_2020696464_n.jpg%22

The html that Kirbygram produces for each image (and link), however, looks exactly the same in both the development and the production pages. I guess in production, however, the error is doing something that 'stops it' from retrieving the images...

Very frustrating. It is a bit beyond my capacity to troubleshoot, I'm afraid. I don't know whether this is a single error, or perhaps various separate errors... Perhaps the shortcuts <? and <?= are being used elsewhere, and causing these errors? Any guidance would be truly appreciated.

[luxlogica]

I've managed to get rid of the error by changing line 7 of url.php from...:

static public function hasQuery($url) {

...into...:

static public function hasQuery($url=null) {

Now I don't get a warning anymore, but the instagram images still don't load.

Inspecting the generated html for the image tag, and comparing it with the html generated in the development site, I see that there is a difference. In the development site I get..:

<img src="https://scontent.cdninstagram.com/hphotos-xpt1/t99.9999-15/s150x150/e15/11009999_999986474133722_999926999_n.jpg">

...while in the production site I get...:

<img src=""https://scontent.cdninstagram.com/hphotos-xpt1/t99.9999-15/s150x150/e15/11009999_999986474133722_999926999_n.jpg"">

The difference is very subtle, so I didn't notice it at first: the src attribute in the production site is double double-quoted - it has double double quotes at the beginning and at the end. That's why it's failing.

What part of the code builds the url? - and why is it adding extra quotes in the production server?...

[PWesterdale]

Hi @luxlogica,

Apologies was in a meeting. The first issue you had with hasQuery is actually down to Kirby, I had to fix an issue and my PR did not get accepted before I made kirbygram. I'll make sure thats fixed tonight.

[PWesterdale]

The code to build urls is basically this: https://github.com/PWesterdale/KirbyGram/blob/master/lib/Instagram/Media.php#L30

All I do is return the url as passed from the raw response of instagram. What version of PHP is production running as opposed to dev? Wondering if there is something odd on the production installation?

[luxlogica]

@PWesterdale Thank you for the quick response. I saw that you're basically passing what was passed by instagram. I also had thought about differences in PHP version, but I don't think that's the case - devel is running 5.4.39, and production is on 5.4.38 (not enough of a difference...).

I wonder whether it could be something in the php settings?

[PWesterdale]

It would be great if you could PR your changes to add long <?php tags everywhere. If not I'll get on that this evening, I realise that short tags are actually not enabled on most environments and that causes a lot of problems.

[PWesterdale]

I think you are right. I'll have a look around and see if I can find anything on the double quoting, but I'd guess environment at the minute.

[luxlogica]

Just did a quick test, changing the code starting at line 29 of 'Media.php':

    function thumbnail(){
        $string = $this->_raw->images->thumbnail->url;
        $string = substr($string, 1, -1);
        return $string;
    }

The output I got in the image tags is this:

<img src=""ttps://scontent.cdninstagram.com/hphotos-xpt1/t99.9999-15/s150x150/e15/11009999_999986474133722_999926999_n.jp"">

So the double-double-quoting seems to be happening after the Media class has passed on the string...

[PWesterdale]

very strange. I think I've noticed something about the html you pasted earlier:

<img src=“<?php echo $image->thumbnail() ?>" />

you see the first double quote is not a standard double quote?

Perhaps try changing that first quote out?

[luxlogica]

OK, I got it to (kind of ) work by removing my double quotes in the src attribute. Before, I had:

<img src=“<?php echo $image->thumbnail() ?>" />

...and now:

<img src=<?php echo $image->thumbnail() ?> />

It seems to work - but I don't think this is the intended behaviour... In the development server it works differently...

[steadweb]

“ and " are used - two different sets of characters are being used.

Try the following:

<img src="<?php echo $image->thumbnail() ?>" />

[luxlogica]

@steadweb I think you're right: somehow, the quotes were replaced by 'smart quotes'. Changing them back to 'normal' quotes fixes the issue. I don't understand how this happened, as the files were merely transferred to the production server, and not edited there at all!

Also, I don't understand how that would affect the output of the 'thumbnail' function? I'm even more confused!... :(

[steadweb]

@luxlogica good to hear.

What browser are you using out of interest? I know Chrome over compensates and tries to close non closed tags / quotes.

[luxlogica]

@steadweb I'm testing on Safari - which uses a rendering engine very similar to Chrome, so it probably does the same...

[PWesterdale]

Are you happy for me to close this @luxlogica?

[luxlogica]

@PWesterdale Yes, please - and thank you once again for your support!

[PWesterdale]

@luxlogica all of the fixes you required are now available at v1.1.3 so if you wish to re-download you can do. Thanks for taking the time to let me know about issues!