Slider Moves All Elements and Displays Images Weird

did you try regen thumbs?

Just saw this: https://themegrill.com/theme-instruction/colormag/#image-size

But does that mean that I should resize each image locally first to 800x445px as suggested in the link before I set it as featured image?

If that’s the case that sounds like an awful amount of work for each post before uploading it..

I’m using external featured images (urls) that are mostly different sizes. I think the theme tries to style to a similar height/width ratio so slider might resize slightly to account for this. The images you’re referring to, doesnt have a extra white space in it? Ie, have you looked at the image in an editor like ms paint? Maybe post a link to your site so people can have a look at. Does it resize like my site https://www.androidcruze.com or is your featured images resizing like a massive amount?

https://strumi.ca/ – here is my website. I think your images are all larger than the suggested size and with the proper proportions. I can see that you’ve used a different layout so maybe that has to do with anything? Hmm dunno..

Btw, nice website you have there

thank spiritfly.

Not sure bout using a bit.ly link in support (gathering you get paid for people to click that link) you should just have https://strumi.ca/ as your website on here.. bit much to get paid for people to help you with support.

I see what you mean. Yes, your images resize and lower your entire screen. Reason is you don’t have any padding below the featured posts slider widget (your area beside slider is not as tall as the slider). Simple fix, put something that slightly taller than the featured post slider in the front page: beside slider area or add another row of tg:highlighted posts to that area beside the slider. Even adding a text widget or something that size at the bottom of the tg:highlighted posts area will fix the issue.

You’ll see what I mean if you add something extra to that area beside the slider.

Yes the slider will still resize, but your whole page wont be moving up and down, just the slider will.

I’ll have time next week to look at the code for slider images and see what I can do as a more permanent fix.

Oh dear god! Bit.ly is NOT a paying URL Shortener, adf.ly is. I intentionally concealed my original domain so search engine crawlers won’t find it. I don’t want this post to come up in the search when someone writes my domain name in it. Please edit your post with my link asap.

I can see how your fix would work, but I’ve placed the elements according to your demo page of this theme. I really like them the way they are so I hope you can come up with a more permanent and flexible solution. You should make an option to resize and stretch smaller images in the slider as well.

Thanks!

hey spiritfly, it’s not my theme – I just use it. Not sure how to edit my old post to remove your site from the post.

I’ve found out a little work around for my site.
An easier way is to hack the CSS a bit.

Use the Theme Customizer
Appearance -> Customize

Click on Design Options -> Custom CSS

Add in the following code:

.bx-wrapper {
    height:350px;
    overflow-y:hidden;
}
.slide-content {
    top:210px;
}

This should stop the slider adjusting its height for each image it comes across. Its the adaptiveHeight: true; in the javascript that causes it. This CSS should fix that.

Enjoy!

thanks alingham.

Excellent, Alingham! 330px fits the bill to match the ‘principal posts’ on the side.

Hi All,

The recommended image for Featured Cat slider is 800 X 445 pixels. So, either you can add the feature image of this size for the post of category used in Cat slider. Or you can add image of size greater than 800 X 445 pixels and the theme will make the size equal to 800 X 445 pixels by cropping. If you use image size that are less that 800 X 445 pixels and are not uniform to each other then slider image will not be uniform.

Featured Cat slider has size defined at 800 X 445 pixels which gives you an advantage that you can use in the Front page top section and bottom section widget area and the image size will cover its width. Hope this clears the confusion.

Hey! thanks for this suggestion, but this cuts also the post title. And when resizing the explorer window or using the mobile version, it doesn’t do the trick…
do you have any idea of how to “crop” the image instead of the “wrapper” so the title is not affected?

Many thanks for your suggestions!!!

Hello, I’ve found a better workaround.

In widgets.php, line 572 you add <image_wrap> before the image:
$image .= '<image_wrap><a href="'...

Afterwards, modify style.css to include the image in the wrapper, and make the wrapper to have a fix aspect ratio.

.widget_featured_slider image_wrap
{
  display: block;
  width: 100%;
  position: relative;
  height: 0;
  padding: 56.25% 0 0 0;
  overflow: hidden;
}

.widget_featured_slider img {
  position: absolute;
  display: block;
  max-width: 100%;
  max-height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  Object-fit: cover;
}

The aspect ratio will be the same (change padding % to adjust the ratio) and the image be adjusted automatically to cover the wrapper element. It’s responsive, so it works for any size (mobile or if you add the slider in the right panel).

Same issue, even with the widgets therefore tediously manually resizing images for the slider isn’t a broad solution. I’ve already tried regenerating themes.

@laura Not seeing a widgets.php in this theme’s files.