Okay
  Public Ticket #181428
Portfolio: Thumbnails display wrong aspect ratio and thin black bars on vimeo videos.
Closed

Comments

  • Jonas started the conversation

    Hi,

    I'm writing regarding two issue I'm having with the portfolio.

    1. When the portfolio is showcasing all the thumbnails, these thumbnails are a little trimmed on the sides. So it doesn't respect the original 16:9 aspect ratio. How can i fix this?

    2.Once you open a portfolio item, if this is a vimeo video, the video has two thin black bars above and below which doesn't belong to the video. What can I do to fix this?

     I have attached an image with screenshots of both issues to be more clear.

     Thanks for your much appreciated help!

  •  1,815
    Support replied

    1. Portfolio trim the photos because you have the possibility to add different images size, and the thumbnail width and height will remain the same and the image is cover background centered.

    2. We set for the video a padding value for the height to keep the usual video aspect ratio. You can modify it by adding this in Theme Options > Styling Options > Custom CSS:

    .video-container { padding-bottom: 56%!important;}

    You need to modify the padding value to fit exactly for your video.

    Regards

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Jonas replied

    Hi again!

    Thanks for your quick response. You're very helpful and awesome!

    Regarding issue nº 1. I see your point and that's a clever thing for the portfolio to do. However, since I intend to only post videos on my portfolio, the thumbnail images are always gonna have exactly the same aspect ratio 16:9 (being all the images 1920x1080 resolution, which is the same as my full hd videos). So, I figure if I change the default way the portfolio displays the thumbnails (which must be an aspect ratio of 3:2 or similar) for a new aspect ratio of 16:9, the portfolio wouln't have to trim my thumbnail images anymore (since both would have the exact same aspect ratio and they would fit perfectly). I think this makes sense, doesn't it?. So, if you see what I mean and it's possible, I would love if let me know where or how to change this.

    Regarding issue nº2. I tried your tip, and changed the values from .video-container { padding-bottom: 56%!important;} to .video-container { padding-bottom: 55%!important;}

    and it worked great on my pc+firefox (not blackbars above and below the video anymore). Cool! However, today, I was able to test it on a different computer and browser (a mac and Chrome) and it displays now the black bars on the sides of the videos. I have attached an image to show you this.

    Thanks again for your great support. 

  •  1,815
    Support replied

    The percentage can be fine tuned: Try:

    video-container { padding-bottom: 55.1%!important;}

    Fot the portfolio thumbnails also change the bottom padding:

    .portfolio-item .portfolio-image {

    padding-bottom: 54%;

    }


    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Jonas replied

    Great! It worked perfectly!

    Thanks for your help.