Images are just a thin strip in the center of the display

[kellogg76]

I'm using the example config.js module code, and have tried with source being bing and several reddit wallpaper subreddits. Each time the image is displayed squashed in from the sides to give a thin line from top to bottom with the image credit in the corner.

I've tried adding the auto orientation option but that also makes no difference.

Has anyone else had this problem?

[kolbyjack]

I haven't seen that. Are you able to load the page with a browser on another computer and see if it's happening there too?

[kellogg76]

I haven't seen that. Are you able to load the page with a browser on another computer and see if it's happening there too?

Yes, I see it on the MagicMirror itself and when I view the page from my PC. it looks like this

[kolbyjack]

Can you use the dev tools to view the computed properties of the img tag? Mine look like this

[kellogg76]

Can you use the dev tools to view the computed properties of the img tag? Mine look like this

Here's mine, for some reason I have the img src twice.

My config code is { module: "MMM-Wallpaper", position: "fullscreen_below", config: { // See "Configuration options" for more information. source: "bing", slideInterval: 60 * 1000 // Change slides every minute } },

[kellogg76]

Sorry, closed in error.

If it helps, I'm running the mirror on a Pi Zero.

[kolbyjack]

Two images exist during transitions, that's normal. I'm not sure what that title div is about, though. What happens if you manually delete it from the dom?

Also, running in the pi zero is not really recommended. You should definitely turn off crossfade at the very least. I originally had a zero w for my installation, but it was so slow, it would take minutes to switch between images, so I upgraded to a 3a+, and it's been much much better

[kellogg76]

Isn't the title div the image credit? Like this

I've turned off the crossfade. I've had several wallpaper modules in the past that worked well with the zero, but have since stopped working so I was really hoping this one would get me some nice backgrounds again.

[kolbyjack]

Ah, so it is, I don't display then on mine. Are there any errors in the console output?

[kellogg76]

No errors that I can see that would stop it from working. There's a warning about a future Chrome update :-

A cookie associated with a cross-site resource at http://bing.com/ was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.

[kolbyjack]

Can you try out the rename-css-classes branch? I'm wondering if there's some css class name collision going on, since you said you've previously had other wallpaper modules installed.

[kellogg76]

Can you try out the rename-css-classes branch? I'm wondering if there's some css class name collision going on, since you said you've previously had other wallpaper modules installed.

Do I just do a git pull from within the MMM-Wallpaper directory?

[kolbyjack]

git fetch && git checkout -t origin/rename-css-classes

[kellogg76]

Installed, restarted the mirror, but the outcome is still the same thin strip in the middle unfortunately. Thanks for the suggestion though.

Edit: Forgot to run npm install, doing that now and will update. Edit 2: No change. Edit 3: I also tried MMM-EasyBack earlier today and that has a very similar issue, the background images are a thin strip across the top so I assume some previous module is causing the issue.

[icarusm84]

I know this is a little old but I think the problem is the solar power meter module. When I added that, MMM-Wallpaper got squished....

[kolbyjack]

Can you try the dom-refactor branch? It removes the elements from the normal module hierarchy, which should mean that I can control the size better.