Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Same height images / horizontal masonry

Same height images / horizontal masonry

Scheduled Pinned Locked Moved General Discussion
10 Posts 4 Posters 213 Views
  • 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.
  • F Offline
    F Offline
    franogueira
    wrote on Apr 3, 2020, 11:26 AM last edited by
    #1

    Hi Armin,

    I was wondering if there is a way of:

    1. having images the same height in the grid - not having to compromise the image ratio/aspect

    2. have a horizontal masonry - where images all have the same height instead of the same width
      Like this: https://mdbootstrap.com/docs/angular/layout/masonry/

    Thanks,
    Best,

    Francisco

    1 Reply Last reply
    0
    • M Offline
      M Offline
      mariusjopen
      Global Moderator
      wrote on Apr 3, 2020, 2:37 PM last edited by
      #2

      Dear @franogueira
      Only the options which are available in the element-grid settings are possible.
      We plan to develop it further in the future.
      Best!
      Marius

      www.mariusjopen.world

      1 Reply Last reply
      0
      • S Offline
        S Offline
        stefanstraeter
        wrote on Sep 2, 2021, 7:43 PM last edited by
        #3

        Would be great to have a horizontal masonry!

        1 Reply Last reply
        0
        • R Offline
          R Offline
          Richard
          Global Moderator
          wrote on Sep 3, 2021, 12:57 AM last edited by
          #4

          Dear @stefanstraeter

          Totally agree 🌝

          It would be great, its in the notes Stefan, currently with Woocommerce support being worked through It may be on the backbench a little longer.


          Sincerely
          Richard
          1 Reply Last reply
          0
          • S Offline
            S Offline
            stefanstraeter
            wrote on Sep 3, 2021, 8:06 AM last edited by
            #5

            Sounds perfect :)

            1 Reply Last reply
            1
            • S Offline
              S Offline
              stefanstraeter
              wrote on Oct 11, 2021, 12:00 PM last edited by
              #6

              Is there a chance to ingegrate a third party gallerie plugin with a horizontal masonry?

              1 Reply Last reply
              0
              • R Offline
                R Offline
                Richard
                Global Moderator
                wrote on Oct 11, 2021, 11:08 PM last edited by
                #7

                Dear @stefanstraeter

                Testing of different third-party plugins will be up to you. Possibly some may work but i have my doubts. If you wish to add custom code to alter the existing Masonry this is also up to you but will probably provide better results.


                Best wishes ✨
                Richard
                1 Reply Last reply
                0
                • S Offline
                  S Offline
                  stefanstraeter
                  wrote on Oct 20, 2021, 7:16 AM last edited by
                  #8
                  This post is deleted!
                  1 Reply Last reply
                  0
                  • S Offline
                    S Offline
                    stefanstraeter
                    wrote on Oct 26, 2021, 7:16 AM last edited by
                    #9

                    Hi Ricard, thanks for your reply!

                    That sounds great to add a custom code to the gallery :)

                    Below I put a link from my website where I would like to have a horizontal masonry with the same high.
                    https://stefanstraeter.com/constellations/

                    It should look like this:
                    https://josselin.de/blog/constellations/

                    Best regards,
                    Stefan

                    1 Reply Last reply
                    0
                    • R Offline
                      R Offline
                      Richard
                      Global Moderator
                      wrote on Oct 26, 2021, 10:56 PM last edited by
                      #10

                      Dear Stefan

                      To achieve something similar to the example you will need 2 "elements per row":Screen Shot 2021-10-27 at 11.44.55 AM.png

                      Then you can adjust the images as your design needs with this CSS (note: this will select all element grid's, you may wish to specify by adding a custom id or Class to the row/element)

                      .type-elementgrid img{
                          // insert css here
                      }
                      

                      Define your Height and other properties for the image you like.

                      https://laytheme.com/documentation.html#custom-css-styling


                      Best wishes Stefan and have a great day 🏖
                      Richard
                      1 Reply Last reply
                      0
                      Reply
                      • Reply as topic
                      Log in to reply
                      • Oldest to Newest
                      • Newest to Oldest
                      • Most Votes


                      I also code custom websites or custom Lay features.
                      💿 Email me here: 💿
                      info@laytheme.com

                      Before you post:
                      1. When using a WordPress Cache plugin, disable it or clear your cache.
                      2. Update Lay Theme and all Lay Theme Addons
                      3. Disable all Plugins
                      4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                      This often solves issues you might run into

                      When you post:
                      1. Post a link to where the problem is
                      2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                      3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                      Online Users
                      M
                      Markus
                      4 minutes ago
                      Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                      laytheme.com
                      • Login

                      • Don't have an account? Register

                      • Login or register to search.
                      • First post
                        Last post
                      0
                      • Recent
                      • Tags
                      • Popular
                      • Users
                      • Search