hermanho / MMM-GooglePhotos

Display your photos on MagicMirror from Google Photos.
MIT License
170 stars 65 forks source link

Full Screen Images #112

Open paddyhughes opened 3 years ago

paddyhughes commented 3 years ago

Hi Having issues getting full screen images. it pulls images perfectly for google but I'm left with large black borders around any image that is displayed. squared landscaped and portrait. Is there any way to have it fill 95% of the screen Hight and Width. { module: "MMM-GooglePhotos", position: "fullscreen_below", config: { albums: ["School Pictures"], // Set your album name. like ["My wedding", "family share", "Travle to Paris"] updateInterval: 1000 * 60, // minimum 10 seconds. sort: "new", // "old", "random" uploadAlbum: null, // Only album created bycreate_uploadable_album.js. condition: { fromDate: null, // Or "2018-03", RFC ... format available toDate: null, // Or "2019-12-25", minWidth: null, // Or 400 maxWidth: 8000, // Or 8000 minHeight: null, // Or 400 maxHeight: 8000, // 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$ showHeight: 1920, timeFormat: "YYYY/MM/DD HH:mm", // Orrelative` can be used. } },

aneaville commented 3 years ago

Lets start with some easy things first: The values in your showWidth/showHeight are the default values. Have you tried changing these to match your screen? Have you tried either of the following in your css/custom.css

To cover whole region with image : Add this into your css/custom.css.

GPHOTO_CURRENT {

background-size:cover; } To shrink image and be fully visible on smaller screens : Add this into your css/custom.css.

GPHOTO_CURRENT {

background-size:contain; }

hvw33 commented 2 years ago

Actually have the same question/concern, the images are shown over their transparent shadow with a tiny 10px border