MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    UNSOLVED Centering Photos on MMM-ImagesPhotos

    Troubleshooting
    3
    11
    161
    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.
    • K
      kit444 last edited by

      I’m trying to use this in the fullscreen_below position. The photos will not center on the screen. Is there a way to do this, or to use the “contain” or “cover” options like on MMM-BackgroundSlideshow?

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

        @kit444 I don’t like the way cover and contain work

        I have my own version that does centering and fill around
        https://github.com/sdetweil/MMM-ImagesPhotos

        Sam

        Create a working config
        How to add modules

        1 Reply Last reply Reply Quote 0
        • K
          kit444 last edited by

          @sdetweil I’m trying your version and I’m still having issues with the photos not centering. Here is the code I’m using in the config file.

           {
          			module: "MMM-ImagesPhotos",
          			position: "fullscreen_below",
          			config: {
          				opacity: 1.0,
          				animationSpeed: 500,
          				updateInterval: 5000,
          				backgroundColor: 'grey',
          				//backgroundSize:'contain',  // not used if fill is true
          				fill: true,   // fill around image with blurred copy of image
          				blur: 10, // only used if fill is true
          				//maxWidth: 1920,
          				//maxHeight: 1080,   
          			}
          		},
          
          P 1 Reply Last reply Reply Quote 0
          • P
            plainbroke @kit444 last edited by

            @kit444

            I use this in the custom.css to center mine:

            .MMM-ImagesPhotos {
            Horizontal-align: center;
            Vertical-align: middle;
            }

            My Config.js :
            {
            module: “MMM-ImagesPhotos”,
            position: “middle_center”,
            config: {
            opacity: 0.9,
            animationSpeed: 500,
            updateInterval: 10000,
            backgroundColor: “black”,
            width: “800px”,
            height: “800px”,
            fill: false
            }
            },

            Works for the screen I use. it did’nt untill I set the width and height though.

            Just my 2 cents. Mileage may vary for you though.

            K S 2 Replies Last reply Reply Quote 0
            • K
              kit444 @plainbroke last edited by

              @plainbroke Unfortunately if I use the middle_center position, the photos will block out the other modules on the page. I need to use the fullscreen_below region. I tried to add the Horizontal-align to my css, but it didn’t recognize that parameter.

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

                @plainbroke weird. the code reads the screen height and width and adjusts the position and size to keep the same aspect ratio.

                also, the background is already black

                only on my version. the original does it differently

                Sam

                Create a working config
                How to add modules

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

                  @kit444 you could add a css z-index:-1

                  but that is what background does.

                  Sam

                  Create a working config
                  How to add modules

                  K 1 Reply Last reply Reply Quote 0
                  • K
                    kit444 @sdetweil last edited by

                    @sdetweil I could use that code to position the middle_center region behind the other regions?

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

                      @kit444 z-index:-?? just pushes it farther away, other modules would then be on top z-index:0;

                      fullscreen-above is z-index:1;

                      Sam

                      Create a working config
                      How to add modules

                      K 1 Reply Last reply Reply Quote 0
                      • K
                        kit444 @sdetweil last edited by

                        @sdetweil I’m still not having any luck. I tried adding z-index: -1 to the region.middle_center in the custom css. It still placed the photos over some of the modules. I tried adding a z-index: 0 or 1 to another region to see if I could re-layer the regions. No difference. I added z-index: -1 to the middle_center region in the main. css. It centered the photos under all the other regions, but left a black bar in the middle of each. Lastly I tried to add an align-items and align-content to the main css under the fullscreen region. Neither worked.

                        S 1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 1 / 2
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy