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.5k 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.
    • 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
                      • S Do not disturb
                        sdetweil @Guest
                        last edited by

                        @sean bingo… if something is clipped (not shown) then its wrong… I fiddled with all those css settings and finally gave up… i calculate the dimensions myself and all is good on EVERY picture

                        Sam

                        How to add modules

                        learning how to use browser developers window for css changes

                        ? 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