InstagramBasicDisplayApi

[DV-JF]

Hey @nbcommunication, hey all...

since a few day's (don't know exactly when it startet) I've a problem getting the feed. I'm using this plugin on different sites with various accounts - so far had no problems with it. On 3 of these websites the feed doesn't load any more - on the other websites I suspect that the cache is not expired, yet. There are no items in the $instagram->getMedia() array any more - no errors are shown. When I review the modules settings this so what I got:

There is currently 1 cached request.

Clearing the cache doesn't help.

Anyone else facing this problem, any ideas how I could debug further?

Cheers and many greet!

[nbcommunication]

Hi @DV-JF,

Is there anything in Setup -> Logs?

Cheers,

Chris

[DV-JF]

Indeed - didn't thought about this place to look for errors 🤦‍♂️

vor 8 Minuten
2023-02-03 09:29:01 	guest 	/ 	Could not process user media: {"error":{"message":"Error validating access token: The session has been invalidated because the user changed their password or Facebook has changed the session for security reasons.","type":"OAuthException","code":190,"fbtrace_id":"A8JC4GfQtIPWPBs_P8YONKd"}}

vor 8 Minuten
2023-02-03 09:29:01 	guest 	/ 	Could not refresh long-lived access token

I expected the access token to be renewed automatically - the passwords of the corresponding pages were not changed.

[nbcommunication]

Hi @DV-JF,

Ah yes, this is a total pain when this happens. We've had this happen on sites where we don't have much contact with the client, as since we need them to re-authorise, the feed is just lying empty.

Anyway, going through the authorisation process again should fix this.

Cheers,

Chris

[DV-JF]

27 minutes ago, nbcommunication said:

Ah yes, this is a total pain when this happens.

Can you tell me why it happens? Would it be possible to send an email to the admin, if the authentication process fails - any ideas?

[nbcommunication]

Hi @DV-JF,

It happens because Instagram/Facebook invalidates the (authorised) access token if the user changes their password. I guess from the error message (Facebook has changed the session for security reasons) other security issues can lead to it happening too.

It isn't in the scope of the module to notify admins, but it should be pretty easy to implement. Try something like:

<?php

$instagram = $modules->get('InstagramBasicDisplayApi');

$items = $instagram->getMedia();

if(!($items instanceof WireArray) || !$items->count) {
	$cache->getFor($instagram, 'errorNotifyAdmin', 'daily', function() use ($config, $instagram, $log, $mail) {
		return $mail->new()
			->to($config->adminEmail)
			->subject("$instagram error")
			->bodyHTML('<p>' . 
				implode('<br>', $log->getLines(
					$instagram->className(['lowercase' => true]),
					['limit' => 10]
				)) . 
			'</p>')
			->send();
	});
}

This would send the admin an email every day if no media is being returned, with the email being the last 10 log messages.

Cheers,

Chris

[DV-JF]

WOW, thanks for your detailed answer and the code example @nbcommunication That's why I like the PW community so much !!!

Is there any way I can support you, would like to spend you a 🍻 or ☕

[nbcommunication]

Hi @DV-JF,

Thanks but no need, I'm always glad to hear that the module is getting used!

Cheers,

Chris

[cb2004]

@nbcommunication I think this now has different steps to setup, I will let you know when I get to the bottom of it. Essentially when it comes to adding Instagram testers it is not finding the Instagram username and it is asking for the Facebook username. As they now share logins I am guessing that has something to do with it, I will let you know when I know more, just waiting on the client.

[cb2004]

@nbcommunication false alarm, I was just seeing the Testers section and adding them to that and not the Instagram Testers section which is at the bottom. So I am nearly there now I do believe.

[bdbdbd]

Hi all,
I am new to processwire, it is my first project with it.
I use this module and it works quite well.
Is it possible to load smaller image versions instead of the orginal from instagram.
I actually only need about 300 x 300px for a gallery that will then be linked to instagram.
At the moment the large originals are loaded which are unnecessarily much data.

I tried to download the images first, which works fine, and then i want to resize them via processwire to show the smaller versions instead of the originals. unfortunately this doesn't work as expected with $filepath->size(300,300) . what am i doing wrong?  

<?php
$instagram = $modules->get('InstagramBasicDisplayApi');
// Get 10 images
$images = $instagram->getImages(10);

$counter = '';
foreach ($images as $image) {
    $counter = $counter + 1;
    $instagramImageUrl = $image->src;
    $imageData = file_get_contents($instagramImageUrl);
    $filename = 'instaBild' . $counter . '.jpg';
    $filePath = $config->paths->assets . "instaTemp/" . $filename;
    file_put_contents($filePath, $imageData);
    $thumb = $filePath->size(300, 300);
    echo $thumb->url;
}
?>

this is certainly not very elegant and above all does not work 😞
i get this error message.
Fatal Error: Uncaught Error: Call to a member function size() on string in site/templates/m_instagram.php:104

how can i process and output the images that are downloaded in the "instaTemp" folder?
or is there a simple way to define the output size in the InstagramBasicDisplayApi module?
i'm sure it is possible but my skills in php and processWire are very limited!

thanks a lot in advance

 

 

 

[nbcommunication]

Hi @bdbdbd,

The size() method needs to be called on a Pageimage object (an image saves to a Pageimages field) - it can't be called on an image directly. Saving the images to an image field would end up being quite tricky as you'd need to handle checking if the image already exists, and removing old images too.

Honestly, I'd recommend just using the images from instagram, add width="300" height="n" to the <img> tag. I say height=n as this will need to be the height that the image would be if it were 300px wide - they aren't all square images.

<?php
$instagram = $modules->get('InstagramBasicDisplayApi');
// Get 10 images
$images = $instagram->getImages(10);

$counter = '';
foreach ($images as $image) {
    $counter = $counter + 1;
  	$width = 300;
  	$height = round(($image->height / $image->width) * $width);
  	echo "<img src=$image->src alt='$image->alt' width=$width height=$height>";
}
?>

If you need a 300px x 300px image grid, I'd recommend using a <div> with these dimensions and adding the image as a background-image (background-size: cover).

Cheers,

Chris

[bdbdbd]

hi @nbcommunication,

thanks for your quick response.

6 hours ago, nbcommunication said:

The size() method needs to be called on a Pageimage object (an image saves to a Pageimages field) - it can't be called on an image directly. Saving the images to an image field would end up being quite tricky as you'd need to handle checking if the image already exists, and removing old images too.

yes, that's what i thought, and i was hoping that there would be an easy way to reduce the image size with processwire.

i'm doing it now like this. I reduce the imagesize and do some croping to squared images via php, then save it to the temp-folder and link to this image.

            $instagram = $modules->get('InstagramBasicDisplayApi');
            // Get 10 images
            $images = $instagram->getImages(10);

            $counter = '';
            echo '<div class="start_instagram uk-grid-column-small uk-grid-row-small uk-child-width-1-2@s uk-child-width-1-5@m" uk-grid>';
            foreach ($images as $image) {
                $counter = $counter + 1;
                $instagramImageUrl = $image->src;
                $imageData = file_get_contents($instagramImageUrl);
                $fileName = 'instaBild' . $counter . '.jpg';
                $filePath = $config->paths->assets . "instaTemp/" . $fileName;

                // Verkleinere das Bild auf eine maximale Breite von 300px
                $maxWidth = 300;
                list($width, $height) = getimagesizefromstring($imageData);
                $aspectRatio = $width / $height;
                $newWidth = min($maxWidth, $width);
                $newHeight = $newWidth / $aspectRatio;

                // Erstelle ein leeres quadratisches Bild
                $imageResized = imagecreatetruecolor($maxWidth, $maxWidth);
                $imageSource = imagecreatefromstring($imageData);

                // Berechne die Position für das Cropping (zentriert)
                $cropX = 0;
                $cropY = 0;
                if ($width > $height) {
                    // Querformat, seitlich beschnitten
                    $cropX = ($width - $height) / 2;
                } elseif ($width < $height) {
                    // Hochformat, oben und unten beschnitten
                    $cropY = ($height - $width) / 2;
                }

                // Führe das Cropping durch
                imagecopyresampled($imageResized, $imageSource, 0, 0, $cropX, $cropY, $maxWidth, $maxWidth, $width - (2 * $cropX), $height - (2 * $cropY));

                // Speichere das verkleinerte und beschnittene Bild
                imagejpeg($imageResized, $filePath);

                imagedestroy($imageResized);
                imagedestroy($imageSource);

                // echo $fileName . " auf " . $filePath . " gespeichert.<br>";
                $tempPath = "/site/assets/instaTemp/" . $fileName;
                $altDesc = $image->alt;
                echo "<div>
                <a href='". $image->href ."' target='insta'>
                <img src='" . $tempPath . "' alt='" . $altDesc . "' title='". $altDesc ."'>
                </a>
                </div>";
            }
            echo '</div>';

            ?>

i think this solution is OK, since i have proCache running and so it doesn't regenerate on every page load, or am i wrong?
there are 10 images loaded which are now about 160kb in size as compared to the 3mb for the originals.

suggestions for improvements are still welcome, i wanted to make sure i hadn't overlooked any major option.

[nbcommunication]

Hi @bdbdbd,

It isn't the way I'd do it but if it is working for you then that's great.

I'd probably add something that checks whether a resized version exists already prior to resizing. If it exists, perhaps update the file modified time if that's possible, and then have a bit of a script to remove images that are older that a set time period, could be anywhere from 1 day to 6 months depending on how often the feed is updated.

Cheers,

Chris

[bdbdbd]

hi @nbcommunication

24 minutes ago, nbcommunication said:

I'd probably add something that checks whether a resized version exists already prior to resizing. If it exists, perhaps update the file modified time if that's possible, and then have a bit of a script to remove images that are older that a set time period, could be anywhere from 1 day to 6 months depending on how often the feed is updated.

You are absolutely right!
but I don't have the skills and knowledge of processWire and php to do it that way. 🥲

I'm not super happy with my solution, but it reduces the amount of data to be transferred to a good level. it is of course a quick and dirty implementation based on my skills. 🙄

since I don't want to display the images on the page in full resolution but only link to instagram it makes sense not to have to load everything and just squeeze it small in the display.

i read that in the "old" instagram api there was the possibility to request different image versions. this would actually be the perfect solution for the topic. this should potentially interest many users of the InstagramBasicDisplayAPI. Maybe there will be an update from Instagram?

regardless, your module is a huge relief, 1000 thanks for that!