MagicMirror² v2.12.0 is available! For more information about this release, check out this topic.

Image Galery

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

  • 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:

  • @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 ???

  • @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:

  • Take this one 🙂

    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.activeItem = 0;
            var tempimage =[this.activeItem];
            // image       
    	//imageLink.innerHTML = "<img src="" />";
            var imageWrapper = document.createElement("img");
    	    imageWrapper.src = tempimage.photolink; = "MMM-Instagram-image"; = this.config.instaMaxWidth; = this.config.instaMaxHeight;
            return wrapper;

    and for using the css file use:

    #MMM-Instagram-image {


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

  • Project Sponsor Module Developer

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

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

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

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

  • Module Developer

    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.

Log in to reply