MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    MMM-GooglePhotos taking over entire screen

    Scheduled Pinned Locked Moved Solved Troubleshooting
    5 Posts 2 Posters 428 Views 2 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • J Offline
      JMac
      last edited by

      I’ve got this module up and running with a small number of photos in an album - just for testing purposes.

      I initially had the module set up to display over the entire screen using the position background_below.
      I didn’t like this and have set the module to bottom_bar, the same position as MMM-CalendarExt3 so I can use MMM-Carousel to switch between these two.

      I’m using the default code example from the module
      {
      module: “MMM-GooglePhotos”,
      position: “bottom_bar”,
      config: {
      albums: [albumname],
      updateInterval: 1000 * 60, // minimum 10 seconds.
      sort: “random”
      uploadAlbum: null, // Only album created by create_uploadable_album.js.
      condition: {
      fromDate: null, // Or “2018-03”, RFC … format available
      toDate: null, // Or “2019-12-25”,
      minWidth: null, // Or 400
      maxWidth: null, // Or 8000
      minHeight: null, // Or 400
      maxHeight: null, // Or 8000
      minWHRatio: null,
      maxWHRatio: null,
      // WHRatio = Width/Height ratio ( ==1 : Squared Photo, < 1 : Portraited Photo, > 1 : Landscaped Photo)
      },
      showWidth: 1080, // These values will be used for quality of downloaded photos to show. real size to show in your MagicMirror region is recommended.
      showHeight: 1920,
      originalWidthPx: 1920,
      originalHeightPx: 1080,
      timeFormat: “YYYY/MM/DD HH:mm”, // Or relative can be used.
      }
      },

      I’ve // ShowWidth, showHeight, originalHeightPx and originalwidthPx.

      from the module install info I’ve tried adding
      #GPHOTO_CURRENT {
      background-size: cover;
      }
      to the custom.css file in the MagicMirror/css as the guidance says this should make it cover one position on the screen (I’ve again used bottom_bar).

      But when launching the MM the Googlephoto overlays everything else on the screen.

      what am I missing to get the photo to only take up the lower portion of the screen so it can be switched at set time intervals with my calendar in the same bottom_bar position?

      My apologies for how the code is formatted following it being copied and pasted.

      Cheers.

      S 1 Reply Last reply Reply Quote 0
      • S Away
        sdetweil @JMac
        last edited by sdetweil

        @JMac bottom bar is the page footer. that would make the image full width, and as big as required to show the image

        i think you want to try middle_center
        and you will have to give a size

        see this post for a view of the regions
        https://forum.magicmirror.builders/topic/286/regions

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        J 1 Reply Last reply Reply Quote 0
        • J Offline
          JMac @sdetweil
          last edited by JMac

          @sdetweil wherever I position the module it’s always at the correct height on the screen but always up against the right hand edge of the screen.

          edit to add by setting the show width/height, it’s sensible size.

          any thoughts on this?

          S 1 Reply Last reply Reply Quote 0
          • S Away
            sdetweil @JMac
            last edited by

            @JMac the middle_center starts (top left) in the middle, so will overflow to the right, welcome to the fun of web page positioning

            thats why i said to use the dev window to learn what you can do to move it around

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            S 1 Reply Last reply Reply Quote 0
            • S Away
              sdetweil @sdetweil
              last edited by

              @JMac maybe try bottom_center

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              1 Reply Last reply Reply Quote 0
              • J JMac has marked this topic as solved on
              • 1 / 1
              • First post
                Last post
              Enjoying MagicMirror? Please consider a donation!
              MagicMirror created by Michael Teeuw.
              Forum managed by Sam, technical setup by Karsten.
              This forum is using NodeBB as its core | Contributors
              Contact | Privacy Policy