Help Center

Hi Steve,

So, I see that all three widgets are configured to display 6 columns (6 items on screen).

This means that the total width of the widget will be equally divided to 6 items.

Now, even though all images have the same height (100px), they don't have the same width. So, each image will be automatically resized to fit in the item column (1/6 of total width). Since some images are resized, their height also will not be 100px anymore.

If you want to make sure that all items have the same height, you can do one of the following:

1. Enable Crop images in the widget parameters so that all images have the same width and height, or

2. Use original images that have the same width and height.

Ah, it makes sense when you explain it. I'm guessing then I just got lucky with the 1st batch of images. Since the 2nd batch are kinda logos I can't really crop so I will just have to adjust image/canvas size to make them all the same dimension. Will do a few, see how it looks.

Sorry to have bothered ya with a such a simple question. I'm just real ignorant when it comes to dealing with images, for some reason working with them has always been troublesome and confusing to me.
Cheers

No problem! Happy to help.

Let me know if you need more help.

Since you asked ;-), I could some more help regarding the height of the slider. I really need to have consistency across pages/articles and I have a situation where I will only have one image to display in the slider. So I changed the Responsive Image per page to one, which didn't work out well as even though the image was 90x100, the slider filled half the page.

So I am hoping you can give me some strategy where I can get consistent height of slider, across multiple pages with different number of images. If I have to make all images the exact same size I will deal with that but I really need the slider to be same height.

Should I be looking at CSS, using the class suffix to control the height or do I need to do some math and change the Responsive values based on number of images to be displayed assume all images would be 100 x 100 or something like that.
Cheers

Hello,

I think the best solution would be to use a class suffix fixed_height and add the following css:

.mslider_main.fixed_height .mslider-photo-link img {
  height: 100%;
  width: auto;
  object-fit: none;
  max-height: 100px !important;
}

Thanks so much, didn't really expect code, Minitek rules :-)

You're welcome.

Hi,

Sorry for necroing old post but just wanted to say I finally got the time to try the code you gave me above. Since my images of of varying widths the more images I add the worse it looked, the above worked a treat!

I did have one issue, 90% of my images are w250+ x h100 but some are square 100x100 and those were all showing left justified. I did some googling and found that adding

 margin: auto;

... centered them. Not sure if that is the correct solution, my css skills are minimal, but it did seem to work without any negative effects

Thanks again for your help in this matter. really enjoying your slider :-)
Cheers
Steve

Hi Steve,

Yes, margin: auto; is perfectly fine for centering an image.