[Resolved] Types field image is stretched and grainy

[Author]

Posts

[saint]

I'm encountering another image situation with Types, where I'm trying to constrain and return an image with a small size (e.g. 50px by 50px), but rather it returns a large, grainy image.

hidden link

Is there a way to display the small version of that image? Thank you for your help.

[Christian Cox]

Hi, I would have to see this in a browser to be sure what's going on. What I can see in your video is these two images are shown on the screen much larger than 50px square. They're more like 180px square, and this video is scaled down if I'm not mistaken. So that leads me to believe there is some CSS or JavaScript in place that stretches these images out to fill space or as a responsive design feature, bypassing the sizes generated by the Types field shortcode. Otherwise, the image dimensions on my screen would be smaller - more like 50px square in this image. You may have to add some CSS overrides to modify this image size.

[saint]

Hi Christian,

Sure no worries - please see below for test URL.

hidden link

Is there also a place where I can input private credentials in case to poke around?

Best,

[Christian Cox]

Sure, I will activate private reply fields here.

[Christian Cox]

Okay as I suspected there is some CSS applied by the bb plugin or one of the addons. I'm attaching a screenshot here showing the browser inspector. This is where you can look at all the CSS styles applied to an element. You'll see the red rectangle around a style that sets the width of these images to be 100%. This means that even though Toolset generates an image at 50x50, it gets stretched out to fill the space in its parent container. To fix this, you would have to either modify the styles generated for this UABB post grid, or add your own styles to override them. Modification of these styles is not something I can help with, you would need to contact the BB or UABB support team.

If you want to override these styles, you can wrap your image shortcode in another div. Add a specific class name to that div, like this:

<div class="my-smaller-pic">
[types field='headshot' title='%%TITLE%%' alt='%%ALT%%' align='center' size='custom' width='100' height='100' resize='crop'][/types]
</div>

Then in Appearance > Additional CSS, you can add override styles like this:

.my-smaller-pic > img {
  width: auto;
}

If you need more information about CSS overrides with specificity, look here: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

[saint]

Thanks, Christian. Appreciate the support. I've gone ahead and used Microthemer to bring the padding back down from 100% to 25% on each, and it seems to be resolved for now.