Centering Photos on MMM-ImagesPhotos

[sdetweil]

@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

[kit444]

@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,   
			}
		},

[plainbroke]

@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.

[kit444]

@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.

[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

[sdetweil]

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

but that is what background does.

[kit444]

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

[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;

[kit444]

@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.

[sdetweil]

@kit444 rather than try and try and try

see
https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1644962684132

one thing to do to learn the regions is to set each to a different background color.

the regions overlap…