Block 18 Large Thumb Sizing Issue

On my homepage at InsideTheStar.com, I’m using Block 18 at the top of the page to show one large post, and then two smaller posts. The Large post uses the thumbnail size 696×385.

Here’s a screenshot of the problem I’m having:

Notice the grey bar at the bottom of the thumb indicating the thumb isn’t filling the thumbnail block fully. I’ve checked in inspector and disabling the width and max-with 100% allows the height to fill the space, but obviously creates other problems.

I used the “View Image Info” tool in FireFox and included that data in the shot as well. It shows on the pointed line that the image loads at the right size (as cut by them theme on upload) but is being resized a little smaller somehow.

I’ve checked all plugins and can’t find the problem. Using an identical setup on my dev site (dev.insidethestar.com), I’m not having the same issue. This is happening regardless of what image shows there. The one pictured is actually is actually the front of a YouTube video that the theme generated.

I’ve regenerated all thumbs multiple times and checked the theme settings: all thumbnails sizes are turned on. I’m not using the Photon feature in Jetpack, since that has caused this problem before.

Any ideas what’s causing this?

There is this line of CSS. In Inspector, if I disable this line, the block shrinks and fits perfectly. As you can see, this piece of code is mixed in with a bunch of media queries and even has some comments in it for responsive design, but it doesn’t appear to be within a media query itself.

I can change that value to height: 378px; but since the problem isn’t occurring on a duplicate of the site, I’m thinking there is another problem and manipulating these value only disguises it.

I definitely do not want to hide problems on the site. So I’m hoping you guys can tell me what’s causing the thumb to resize in the browser. I’m not running any caching plugins and have cleared my browser cache repeatedly; it’s not that.

At a loss for the next step, though.

Thanks.

Not sure how this helps since this applies without any modifications to the child theme, but it only happens when the child theme is active. Switching to the parent theme only removes this grey bar and the resizing.

@Bryson T your not alone on this,since i update to 6.1 i notice this issue as well and don’t have clue why it doing this as well…

I never used v6, just went straight to v6.1 and am waiting until the next release after v6.2 since I’m sure one is coming very soon to fix that title issue you experienced. But it’s been happening the whole time, on both the main and development sites I run.

I can’t figure out why, though. The child theme is so bare and includes nothing to alter the images at all. There’s likely a function somewhere in the parent theme that is causing it, but the developers are the only ones who know for sure.

Here’s a patch to hold us over until they fix the child theme issue. In Advanced CSS enter these values:

Desktop –

.td_block_18 .td-column-2 .td-module-thumb {
  height: 378px;
}

iPad Landscape –

.td_block_18 .td-column-2 .td-module-thumb {
  height: 350px;
}

That fixes the problem in a backwards way and keeps everything responsive for all devices. Hopefully we can get a true fix soon, though.

I don’t use child theme though,can that patch work with out…

It’s not the same problem then as mine only happens when the child theme is enabled, but yes, those two rules will work with the child and parent themes.

Looking at your site, I’m not seeing the issue appear on Chrome and desktop. I do see that you need to regenerate your thumbnails though. It’ll fix the skewed images. Regenerating your thumbnails may just fix the problem you’re having, so you should try that before adding any custom CSS rules.

Use this plugin to regenerate your thumbs: Regenerate Thumbnails

I know the plugin isn’t updated much and says it’s not compatible with newer versions of WordPress, but it works just fine with 4.2.2. I used this plugin to regenerate all my thumbs earlier this week. It took a long time because there were almost 3,000 images to regenerate, but it worked great.

They already regenerate