Display Post Thumbnails

Hello?

Just wondering if I could get my question answered. Please?

Thank you.

In lieu of not knowing where to actually put the code…

I tried using the shortcode format of:
[catlist name=appetizers tags=hot numberposts=50 thumbnail=yes thumbnail_size=100,100]

And I AM getting a thumbnail image… which is fine.
But the issue is that, for whatever reason, WordPress is scaling the image of the thumbnail to 630×630 when it displays the thumbnail on the page.

How would I go about getting the thumbnail to simply display in the dimensions called out in the shortcode? (in the case of my example: 100×100)

Thanks for any help you can offer me!

Can you post the link to the page?
Testing this same code (with other id):
[catlist thumbnail=yes thumbnail_size=100,100]
I get this:
<img src="https://localhost/wordpress/wp-content/uploads/2013/10/image-150x150.png" class="attachment-100x100 wp-post-image" alt="image" height="100" width="100">

Is it possible that there’s a CSS class overwriting the dimensions? Do you get the height and width properties correctly on the displayed thumbnail?

Yes. The page is:
https://www.thmtest.com/recipe-index-2/

Please keep in mind that this is only a test page.

I only have the thumbnail code on those top two entries. You’ll clearly see how HUGE the thumbnail is displaying. WordPress is scaling it to 630×630 for some reason.

The shortcode format that I’m using is:
[catlist name=appetizers tags=hot numberposts=50 thumbnail=yes thumbnail_size=100,100]

How would I identify if there is a CSS class overwriting the dimensions? Please have patience with me… that’s not my strong point.

Thanks for your help. Purely for indexing allone… I LOVE this plugin! If I can get this thumbnail situation to work for me… I’ll declare you BEST PLUGIN EVER!

When I go into the URL you wrote there, I get redirected to:
https://www.thmtest.com/membership-options/?_optimizemember_seeking%5Btype%5D=page&_optimizemember_seeking%5Bpage%5D=534&_optimizemember_seeking%5B_uri%5D=L3JlY2lwZS1pbmRleC0yLw%3D%3D&_optimizemember_req%5Btype%5D=level&_optimizemember_req%5Blevel%5D=1&_optimizemember_res%5Btype%5D=page&optimizemember_seeking=page-534&optimizemember_level_req=1

This is what I see:
https://i.imgur.com/mQlWHH0.jpg
I can’t find where you’re using the plugin there.

My apologies. I’m building a membership site… and I had that page set to “members only’

You’ll be able to see it now:
https://www.thmtest.com/recipe-index-2/

Note how huge the thumbnail is.

Yep, it’s some CSS making it look like that. You can inspect the thumbnails with your browser’s Developer Tools. I’m using Firefox and just right click on an element and click on “Inspect Element”.

You have this in your CSS:

.main-content-area img.wp-post-image {
    min-width: 100%;
    height: auto;
}

I wouldn’t change that because you’re probably using it somewhere else. You can add this to the stylesheet and the images will go 100×100:

.attachment-100x100{
    height: 100px !important;
    min-width: 100px !important;
}

You can do this from: https://www.thmtest.com/wp-admin/theme-editor.php, edit the style.css file and add that code. Let me know if it works!

I so appreciate the help. I hope that you don’t mind a few more questions. Or more specifically… could you walk me through the steps of WHERE to put the code (the 2nd one you showed)

Obviously I’d use the editor to access the style.css file.
But I suppose my two questions are:

1: Is the style.css file specific to THAT PAGE?

and…

2: WHERE in the code do I drop in the additional code that you suggested?

Again… all the thanks in the world for your assistance.

I think you can paste it wherever you want in that file. The style.css file is the style sheet for the whole theme, so all of the site is using it.

But if you want to be tidy, put it after “.main-content-area img.wp-post-image” which is on line 589. It should look something like this:

.main-content-area img.wp-post-image {
	min-width: 100%;
	height: auto;
}

.attachment-100x100{
    height: 100px !important;
    min-width: 100px !important;
}

.main-content-area img.alignleft {
	float: left;
	margin-right: 20px;
}

Thank you. I will try that. And again… I appreciate the assistance.

But before I alter the code… I need to ask… will this alteration to the code only affect situations when I use the shortcode for this plugin and call up thumbnails? Or will altering the code in this way affect other images on the site as a whole?

The reason that I ask, is that it’s a massive site. And I’d hate to jack-up other areas of the site by changing the code in this way.

Just being careful. Thanks for your expertise!

Yes, this will alter the code site wide. But it’s only going to apply these changes to elements that use the class “attachment-100×100”. So it makes sense, the name of the class is saying these elements should have a width and height of 100×100.

Apply the change, check the site and worst case scenario you can revert it and come back to the WordPress forums for help if it’s not working as you expected ??

Hello, the plugin is great and simply to use and I say thanks!
But…I can visualiza the tumbnail, what could be the problem?

My site is :
https://www.bingobonusplanet.com
At the bottom of the central content I have added the script,
there is only one articles, called “Foxy live with new iPad app”

I dont know what to try, please can you help me?

Thanks,
Marco

The posting of this code into the style.css file didn’t keep the thumbnail from displaying in the HUGE size:
.attachment-100×100{
height: 100px !important;
min-width: 100px !important;
}

I’d really like to get the thumbnails to display smaller.
Would there be a way that I could give you my WP login and perhaps you could take a look?

I’d really appreciate it.

Perhaps this bit of info would be relevant:
I’ve been setting the FEATURED IMAGE in the post and wanting that FEATURED IMAGE to be the source of the thumbnail.

Should I NOT use the FEATURED IMAGE function and simply put the image inside the post in order to get the shortcode thumbnail code to work?

謝謝,我知道為什麼了