Centering Photos on MMM-ImagesPhotos

kit444

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?

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.

UNSOLVED Centering Photos on MMM-ImagesPhotos