Image Galery

[mikenewhouse]

Bump, would love the Flickr API worked in. I have it working on DAKBoard but would like to use M2

[Jeff]

Is it important that it’s flickr?
I’m using my picture frame with instagram. I created a new instagram acc, registered as a dev and received the API.
The new instagram account is made private, so it’s just possible for me to see the pictures.
Works perfect!
I used this this modul:
https://github.com/kapsolas/MMM-Instagram

[fragator]

@Jeff
I did exactly the same thing as you,
And it works perfectly well.
J adds, or removes pictures as I wish.
I would like to succeed to change the size of the photos on the mirror, what you do ???

[Jeff]

@fragator
I thought that would be a quick thing ;)
But I can’t find the right parameters neigther…

I was looking at

 getStyles: function() {
        return ['instagram.css', 'font-awesome.css'];

but can’t find font-awesome.css. Maybe just a file the creator forgot to delete.

The pictures are smaller in the mirror, than they are on instagram.
So there must be a parameter somewhere.

I’ll keep searching for them or try to add some.

We should go to the original thread for this modul:
https://forum.magicmirror.builders/topic/396/mmm-instagram-pull-and-animate-photos-from-instagram-feed

[Jeff]

Take this one :)
https://github.com/jeffjoe/MMM-Instagram

Or just change in the config.js:

{
    module: 'MMM-Instagram',
    position: 'top_right',
    config: {
        access_token: '......',
        count: 200,  
        min_timestamp: 0,
        animationSpeed: 5500,
        updateInterval: 12500,
        instaMaxWidth: '20%', // Optional parameter, can be relative (percentage) or absolute (px)
        instaMaxHeight: '' // Optional parameter, can be absolute only (px)
    }
},

and in the MMM-instagram.js use this

// set the first item in the list...
        if (this.activeItem >= this.images.photo.length) {
            this.activeItem = 0;
        }
        
        var tempimage = this.images.photo[this.activeItem];
        
        // image       
	//imageLink.innerHTML = "<img src='https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png'>";
        

        var imageWrapper = document.createElement("img");
	    imageWrapper.src = tempimage.photolink;
	    imageWrapper.id = "MMM-Instagram-image";
	    imageWrapper.style.maxWidth = this.config.instaMaxWidth;
	    imageWrapper.style.maxHeight = this.config.instaMaxHeight;
	    imageDisplay.appendChild(imageWrapper);
        

	wrapper.appendChild(imageDisplay);
       
        return wrapper;
    },

and for using the css file use:

#MMM-Instagram-image {
    }

e.g.:

#MMM-Instagram-image {
    -webkit-filter: invert(1);
    filter: invert(1);
}

[strawberry 3.141]

@Jeff the font-awesome.css is located in the vendor directory of MagicMirror

[fragator]

@Jeff
I tried the method, it does not always work. He must have a simpler method to enlarge these photos on the mirror.

[Jeff]

@fragator
When does it mot work?
Always the same picture?

[fragator]

@Jeff
Yes, I just do it at the moment, always the same image size.

[Ultimatum22]

This is exactly what I am currently developing, loading random photos from a directory. For my personal use I want additional info about the photo, which I have done by using subdirectories. Last directory is the name who took the photo, the rest is the ‘album’.

For example folder structure:
photos\Vacation\Cuba - 2013\Dave
photos\Vacation\Cuba - 2013\Erik
photos\Vacation\Egypt - 2012\Dave

This displays Vacation\Cuba - 2013 as album and Dave as person who took the photo. I am also trying to get the timestamp from the photo but not sure it works yet. I am going to make it an option to show extra photo information.

Anybody still interested? I can do an early release in the near future.