Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    make project thumbs have a fixed height / while filling it in with the correct aspect ratio

    General Discussion
    4
    9
    469
    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.
    • leooo
      leooo last edited by

      Hi all,
      I will just rewrite my question cause my old post was not really clear:
      is it possible to give the thumb container a specific height (px or %) and then let the project thumbnail be filled in with the object-fit: cover CSS command?

      So to say I would want to have the possibility in the thumbnail grid to change to height of the thumbnails, without interfering with the actual aspect ratio of the image. Also if that means cropping.

      Im not sure if that is a feature request or something i could solve with adding CSS to the thumb class.

      thanks a lot in advance

      Leo

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

        Dear @leooo
        this is the only way I can think of:

        .ph {
            padding-bottom: 50% !important;
        }
        
        .ph img {
            object-fit: cover;
        }
        

        Hope that helps!

        Best!

        Marius

        www.mariusjopen.world

        leooo 1 Reply Last reply Reply Quote 0
        • leooo
          leooo @mariusjopen last edited by leooo

          @mariusjopen said in make project thumbs have a fixed height / while filling it in with the correct aspect ratio:

          Dear @leooo
          this is the only way I can think of:

          .ph {
              padding-bottom: 50% !important;
          }
          
          .ph img {
              object-fit: cover;
          }
          

          Hope that helps!

          Best!

          Marius

          @mariusjopen
          Wow you saved my day! that is exactly the thing i was looking for! Now i dont need to make square thumbnails for everything and I like that I can play around with the % for the height!
          Seriously I would have never gotten to that solution with my basic css skills. I didnt even find the .ph class in the inspector ^^
          So useful especially for mobile! Thanks a lot!
          http://editedit.dreamhosters.com/category/test/

          leooo 1 Reply Last reply Reply Quote 0
          • leooo
            leooo @leooo last edited by

            @mariusjopen sorry I know this is not a CSS workshop: but Im too curious to know how the logic behind the lines is.
            the padding bottom command is referring to which elements in the layout?

            1 Reply Last reply Reply Quote 0
            • mariusjopen
              mariusjopen Global Moderator last edited by

              Dear @leooo
              the padding is used to set the height of the images.
              This is kind of a trick and is not very commonly used. But in the Gridder it is very useful.

              You can change the padding to change the height of the images.

              Hope that helps :-)

              Best!

              Marius

              www.mariusjopen.world

              1 Reply Last reply Reply Quote 0
              • leooo
                leooo last edited by

                @mariusjopen yes very much. i was playin around with that already very useful. But I realized its better to disable this in the specific project view, cause it messes around with cover feature and generally images in the first row of the gridder. but still so very useful! thanks a lot!

                1 Reply Last reply Reply Quote 0
                • mariusjopen
                  mariusjopen Global Moderator last edited by

                  Dear @leooo
                  you could make it only for for a specific Thumbnail Grid when you give it an idea.

                  Best!

                  Marius

                  www.mariusjopen.world

                  1 Reply Last reply Reply Quote 0
                  • felix_rabe
                    felix_rabe last edited by

                    @mariusjopen is it possible to use this method with an element grid in stead of a thumbnail grid?

                    In the element-grid, the ph container seems to be empty.

                    1 Reply Last reply Reply Quote 0
                    • Richard
                      Richard Global Moderator last edited by

                      Dear @fr

                      With Project Thumbnails within the Element Grid this is possible - With standard images not.
                      The image dimensions are set normally and not with this 'PH' padding.

                      So Image <img> being 100% width and its parent container controlling its dimensions:

                      E.g

                      .parent-container{
                      width:48%;
                      }
                      
                      img{
                      
                      width:100%;
                      height:auto;
                      
                      }
                      

                      Hope this answers your question :)

                      Best wishes
                      Richard

                      1 Reply Last reply Reply Quote 0
                      • First post
                        Last post

                      Before you post

                      Use the Search Feature. Maybe there is already a solution to your issue.

                      1. Update Lay Theme and all Lay Theme Addons
                      2. Disable all Plugins
                      3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                      4. Now see if your problem solved itself
                      5. Go here, see if your problem is listed here:
                      Troubleshooting

                      When you post:
                      1. Post a link to where the problem is
                      2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                      Thanks!

                      Online Users

                      C

                      Recent Topics

                      • C

                        image carousel bugging out

                      • N

                        help needed with cleaning up and optimising lay theme portfolio website

                      • R

                        Html5 Video Player issue

                      laytheme.com