Modifying the Kirby Instagram Plugin for Larger Thumbnails

Kirby 2 Solved ✅
1

Hi there,

Looking for some help on modifying the Kirby Instagram Plugin to get larger square thumbnails instead of just the 150 X 150. Apparently Instagram has them, but they’re not well documented in the API.

You can read here that there are thumbs available for up to 320 x 320. You can grab them by replacing the s150x150 in the url string with the larger version you want.

$thumbnail = str_replace(‘s150x150/’, ‘s320x320/’, $post->images->thumbnail->url);

I just have no idea how to do that rewrite in the Instagram plugin.

$obj->thumb = @$photos->data[$i]->images->thumbnail->url;

2

If I understand the documentation for the plugin correctly…:

  • $image->thumb The url of the thumbnail of the image
  • $image->url The url of the full-sized image
  • $image->image_lowres The url to a low-res version of the image

Looking at the data JSON object that Instagram returns, we should see something like this - this is from sample data available online…:

[...]
"images": {
        "low_resolution": {
          "url": "https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s320x320/e15/11906267_1671515619746683_1237948463_n.jpg",
          "width": 320,
          "height": 320
        },
        "thumbnail": {
          "url": "https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s150x150/e15/11906267_1671515619746683_1237948463_n.jpg",
          "width": 150,
          "height": 150
        },
        "standard_resolution": {
          "url": "https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s640x640/sh0.08/e35/11906267_1671515619746683_1237948463_n.jpg",
          "width": 640,
          "height": 640
        }
      },
[...]

So, it would appear that:

  • $image->thumb should give you the URL for the 150x150 version
  • $image->image_lowres should give you the URL for the 320x320 version
  • $image->url should give you the url for the 640x640 version

Is that not what you’re getting?

3

Hey there, thanks for taking the time to answer.

I should have mentioned that I need the higher res version of the thumbnail specifically because those are always cropped as a square. For my use case, I need them square. If you take the thumbnail URL string output by the Kirby Plugin and swap out S150x150 for s320x320 you get the higher resolution square thumbnail regardless of the original aspect ratio of the Instagram post.

When using “image_lowres” you get the image in it’s native aspect ratio in return. Since not all the instagram posts are cropped square nowadays, I can only rely on the thumbnail versions to be square.

4

It seems that what the Instagram plugin is making available to you is exactly what Instagram makes available via their official API.

If you’re willing to go outside the official API, you can get square thumbnails in resolutions even higher than 320x320.

As a matter of fact, it is a well known fact that you can get a JSON representation of the public image feed of any Instagram user or page directly. This JSON feed includes thumbnails in a wide range of formats. And in case you’re wondering: yes, it would indeed be easier and faster for both developers and users to simply use that, than to use Instagram’s official API.

Unfortunately, as this is not an official API, Instagram can make breaking changes to it at any moment - and have done so in the past. So, developers tend to stay away from it…

5

I get that. I understand it’s outside the official API. I was hoping to be able to modify the plugin to get me what I needed, assuming the risk of it not being supported by Instagram in the future. I just don’t know enough PHP to make that happen yet. Thanks, I appreciate you taking the time you have.

6

If you say that simply replacing ‘s150x150’ with ‘s320x320’ in the URL will solve your problem - and you want to do that in the plugin file itself - you can add the following to line 95 of instagram.php - it’s untested, but should work:

$this->images[$i]->thumb_hires = str_replace('s150x150/', 's320x320/', $photos->data[$i]->images->low_resolution->url);

You now should be able to get an $image->thumb_hires that will give you what you want.

Note, however, that there is nothing wrong with doing the string replacement on the template itself, rather than the plugin, like you did above:

<img src="<?= str_replace('s150x150/', 's320x320/', $image->thumb) ?>">

This is probably preferable, so that when the plugin gets updated in the future you’ll be able to update it in your site, too, without breaking your code.

1 Like
7

Thanks! That worked perfectly. I like your idea of just doing the string replacement on in the template. Really appreciate the help.