How to Set Thumbnail Height?

Hi VirtualTrecker,

Right now, we use the aspect ratio of the image to automatically determine the thumbnail height (which avoids having images that are uniform, but look stretched or squashed). If you wanted to change this, you’d have to go into the plugin code and add support for it yourself, unfortunately.

Thank you for your response. Where can I find the code to modify it? Which folder and which file? I would prefer to have a uniform height with a variable width.

Any chance you can tell me where this code is located? Thank you.

I’ll need to get with my developer and he’s out sick right now. It could be a few days.

OK. I will wait. Thanks!

So one easy solution is to use CSS in this case. Here, you can change the height of all thumbnails to be squashed/stretched to 400 px:

.wpbdp-thumbnail {
	height: 400px !important;
	width: auto;
}

You can change the 400 to whatever number you want.

Be sure you’re using the CSS custom file to avoid losing your changes. Here is an article about how to use custom CSS with Business Directory in a way that doesn’t get overwritten on upgrade of BD: https://businessdirectoryplugin.com/support-forum/faq/how-to-use-custom-styles-with-bd-2-1/

Thank you for your help!

It did not work. I was not able to find .wpbdp-thumbnail in the wpbdp.css file either. Am I missing something?

You’re not supposed to change wpbdp.css–that will get lost when you upgrade the plugin next time. Please read this article here about using a custom CSS file and then just dropping in that change to it: https://businessdirectoryplugin.com/support-forum/faq/how-to-use-custom-styles-with-bd-2-1/

Maybe I was not clear. I did not modify wpbdp.css. I did it in a css custom file, and it did not work. I just meant that I did not see .wpbdp-thumbnail in wpbdp.css.

No, you would not necessarily see that in our CSS. The images have that class in the thumbnails, but we don’t necessarily use that in our core CSS. The CSS example I gave was how to modify that element.

So, I would try some of the other alternative file names listed in the CSS article first. Failing that, try to put in a very obvious CSS change like:

div {
color:  red
}

To see if your changes are even taking place.