MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    MMM-BackgroundSlideshow

    Scheduled Pinned Locked Moved Solved Troubleshooting
    23 Posts 5 Posters 11.8k Views 5 Watching
    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.
    • S Do not disturb
      sdetweil @garbleflux
      last edited by

      @garbleflux i had to modify another image display module to get the correct presentation of images, no zoom in and no crop of portrait mode. does mean that some of the background shows thru, but the pictures are correctly displayed

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      CyruS1337C 1 Reply Last reply Reply Quote -1
      • CyruS1337C Offline
        CyruS1337 Project Sponsor @sdetweil
        last edited by

        @sdetweil And what would be your module :)

        S 1 Reply Last reply Reply Quote 0
        • S Do not disturb
          sdetweil @CyruS1337
          last edited by sdetweil

          @cyrus1337 I am using the MMM-ImagePhotos module… but I had to change the code to keep my images properly formatted…

          landscape
          https://www.dropbox.com/s/adzzi3bc7wwq8q5/IMG_20181114_102356.jpg?dl=0
          portrait
          https://www.dropbox.com/s/htxdm7b8sayqazh/IMG_20181114_102350.jpg?dl=0

          can’t get the pics to actually display here…

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          1 Reply Last reply Reply Quote 0
          • ? Offline
            A Former User
            last edited by

            I made several modules handling photos - MMM-GooglePhotos, MMM-WeatherBackground, MMM-DropboxWallpaper,…

            All modules can display photos by its aspect-ratio with covering the target area or resizing to show whole picture.
            Try them.

            • MMM-DropboxWallpaper (https://github.com/eouia/MMM-DropboxWallpaper)

            • MMM-GooglePhotos (https://github.com/eouia/MMM-GooglePhotos)
              0_1532096406799_temp2.jpg

            S CyruS1337C 2 Replies Last reply Reply Quote 0
            • ? Offline
              A Former User
              last edited by A Former User

              Anyway, If your module would be using img tag for showing photos, module should know the exact image size and calculate to resize it by proper target ratio.
              Instead, I prefer using Background CSS trick. background-size:cover will cover whole image to entire area of it’s element, background-size:contain will resize image to fit to target element size. Suprisingly, without any calculation.

              S 1 Reply Last reply Reply Quote 0
              • S Do not disturb
                sdetweil @Guest
                last edited by

                @sean how about a portrait photo sample…

                the tv/monitor aspect ratio (16:9) doesn’t fit unless u stretch or clip the image…

                the sunrise is 6000x4000 pixels the portrait photo is 4000x6000 (both WxH)

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                ? 1 Reply Last reply Reply Quote 0
                • S Do not disturb
                  sdetweil @Guest
                  last edited by

                  @sean but it distorts the picture, not in original format… which is what I want…

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  1 Reply Last reply Reply Quote 0
                  • ? Offline
                    A Former User @sdetweil
                    last edited by

                    @sdetweil
                    There are two options for vertical photos on horizontal screen.

                    • cover : whole screen will be covered by part of photos. but some areas(top and bottom) of photos will be out of screen

                    • contain : whole picture will be shown from bottom to top. but some remain area of screen (left and right) will be black.

                    S 1 Reply Last reply Reply Quote 0
                    • S Do not disturb
                      sdetweil @Guest
                      last edited by

                      @sean i understand… but BOTH distort the image presentation

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      ? 1 Reply Last reply Reply Quote 0
                      • ? Offline
                        A Former User @sdetweil
                        last edited by

                        @sdetweil
                        Which distortion? It’s just resizing.

                        S 1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 3
                        • 1 / 3
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Sam, technical setup by Karsten.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy