Variable size gallery in portfolio page

Support
#1

Hi X,

I am using Renew 8 for a website, and for the home page I used the Portfolio layout.
Each item in the home page links to its own page. I am using the image placeholder as a gallery. So it’s like a nested portfolio (I think).

My only issues are:

  1. Portrait images are ok, but Landscape images have an empty space at the bottom (equivalent to the height of a portrait image). Looks like the placeholder is not changing variably depending on the image being landscape/portrait.
  2. Cannot centre align the image
  3. Preferably I need to set a max height for portrait images, and max width for landscape images.

Thanks
D

#2

Hi there,

Thanks for writing in.

The flex slider doesn’t have the capability to crop or maintain the aspect ratio of an image. It’s just a simple slider where images or text are inserted. Similar to the classic slider of the cornerstone, it functions the same. It’s just used as a featured element of the portfolio. The only solution and edit your images before adding them to the portfolio and use uniform sizes. Even CSS will not able to fix it since the aspect ratio of the image is maintained.

Then please add this CSS to your global custom CSS to prevent spaces

.x-flexslider {
overflow:hidden !important;
}

Thanks!

#3

Hello Rad,

Thanks for your reply. The custom CSS to prevent spaces works great! The bottom is adjusted automatically.

The only problem is that when I uploaded a portrait image resized to 133x200 (before adding it to the portfolio),it displays awfully pixelated when uploaded. The slider ‘container’ stretching the image!

#4

Hi There,

Please use almost the same image proportions. That image size is too small compare to other image size. See this: https://screencast-o-matic.com/watch/cbX6eK2IWW

.postid-133 .x-flexslider .x-slides img {
    width: auto;
}

Note that it is just a fixed. It might not work all the time and it doesn’t look good. The best option for you is to use the same image size and proportion.

#6

That did not work for me.
What I did to solve it was to make the .x-flexslider container background same as website background and removed the border by adding this css

.entry-featured {
padding: 0;
}

Works like a charm :slight_smile:

#7

Perfect. Glad that we could somehow be of a help :slight_smile:

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.