Image Thumbnails in Category Listing

Hi @ilovediecast,

For this to work you should open your archive page in FTP and add the following code

if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
  the_post_thumbnail();
}

This should post a thumbnail just before your post.
Maybe edit your css a bit to make it look correct.

Good luck.

• This reply was modified 6 years, 10 months ago by helldog2018.

Thanks for that info helldog2018. I don’t quite understand what you mean.

What archive page should I open?
What is the file called?
Where would I find it among the site files?
Where do I post the code provided in the page?

Can you please clarify a little for me? I appreciate it much.

If I add a Featured Image to the posts, the image appears giant across the top of the posts.

When I tried the code you provided in the Archive page of my Theme, the giant image appears above the Category post summary also. I tried making the Featured Image a thumbnail size. It still stretches and posts the image giant on top of the post and appears giant on the Category page with the post summary below it.

Removing the Featured Image causes no images to appear in the Category posts summary. Whatever size the Featured Image is makes no difference. It’s stretched giant, both on the post and its category page.

What I am actually trying to achieve: A 150 pixel square image thumbnail to the left of each Post summary on its Category listing page.

Seems like it should be easy to accomplish but this ain’t doing it. This code merely posts the Post Featured Image giant on the Category listing, no matter what size the image is, it’s displayed giant in Category listing.

Screenshot of the code used, yours highlighted where I put it.

Hi @ilovediecast,

I see your theme is using the ‘content’ file.
Open the content.php or content-archive.php or anything that has something to do with content. This file is being opened to add the format of your post.

In there you should find a code which is adding the featured image.
You can alter the code over there or swap it with if {has_post_thumbnail()}{the_post_thumbnail();}

Whenever this code has been changed you can alter the visual with css.
Cheers.

I’m having trouble determining just where to put the code and just what to remove or change in the existing code.

I’m wondering why is the featured image being made giant at the top of the post and category and placed in the code above everything right under the header, so source code reveals nothing to me.

Simply put, I cannot write the code to make this work like I want and I know it is so simple, I need specific instructions.

Here’s the code in the Content.php file. What do I do with it?

Hi @ilovediecast,

Can you show me the rest of the code? Currently if I check the page https://musicalhelp.org/category/consorts it is showing me an archive without thumbnails but with backgrounds.

That means that the current code you are showing me (if ( has_post_thumbnails() ); is false and therefore the code after <?php endif; ?> is active.

Please add a thumbnail to one of these posts (and please tell us which post has an thumbnail assigned), after that we can check and maybe alter the code a bit to see what it does.

Thanks.

Thank you again for getting back to me. I don’t think Consorts is a Category. Please visit this page to see what I have at the moment: https://musicalhelp.org/category/history. It is a Category page listing a summary of the Posts in the History Category.

I’ve added a featured image to the Post “A New Millenium.” You’ll see the image when you visit the page and Category. It’s the top Post on Category listing page. Without this image set, the Category page only lists Post title & summary with no image. I do indeed have a background image set to the post and pages of the site so ignore that light blue n gold musical notations on page.

There you can see what is happening. If I set a featured image on the posts it displays both giant on top of the post and category listing, and displays the image actual size too below the Category listing Post summaries.

Here’s the Content.php file code:

If you can’t make out the image above, here it is larger on a page:

https://musicalhelp.org/contents-page-code

Hi @ilovediecast,

We are going to use the big picture, here is the first change for the lay-out.
You will see changes happening, please do not restore before we are finished.

Add the following code in your style.css at the bottom:

/*Custom edit*/
.feature-img-box, .feature-img-box {margin-bottom: 0px!important; width: 20%; float: left;}
.entry-main {width: 75%; float: right; margin-left: 10px; margin-bottom: 50px;}
nav .post-list-pagination {position: absolute; bottom: 0; right: 50px;}
div.post-list-pagination {font-weight: bold; color: orange;}

On the archive.php file please remove the following code from the line:
if{has_post_thumbnail()}{the_post_thumbnail();}

Cheers.

• This reply was modified 6 years, 10 months ago by helldog2018.
• This reply was modified 6 years, 10 months ago by helldog2018.
• This reply was modified 6 years, 10 months ago by helldog2018.

Okie dokie, here’s what I got now.

The code you posted at the bottom of your message was not in the archive.php file.
I added the css you have there to the bottom of the style.css file.
Now on the Category listing page, I only have the giant image appearing on top but not the little actual size image underneath the summary.

I also have the giant featured image at the top of the post.

I do not want the giant image on the top the post. I do not want the giant image above the post summary on the Category page.

I suppose the next step is an attempt for me to adjust the sizing of these through the stylesheet (CSS) if that’s possible, unless you have something else in mind.

I wonder why the featured image is being stretched so big on the post and category? I’ve been trying to get an answer to that for 2 years which is why I don’t have any featured images set on any posts. If I can get the so called giant thumbnail to reduce, it might work out. ?? I didn’t mean to put you thru so much with this helldog2018. I hope you’ll overlook my incompetency for the moment. Just know that you are appreciated. Thanks

Hi @ilovediecast,

I checked your css, but you did not add my complete code.
Please change your css code
FROM

/*Custom edit*/
.feature-img-box, .feature-img-box {margin-bottom: 0px!important; width: 150px; float: left;}
nav .post-list-pagination {position: absolute; bottom: 0; right: 30px;}
div.post-list-pagination {font-weight: bold; color: blue;}

TO

/*Custom edit*/
.feature-img-box, .feature-img-box {margin-bottom: 0px!important; width: 20%; float: left;}
.entry-main {width: 75%; float: right; margin-left: 10px; margin-bottom: 50px;}
nav .post-list-pagination {position: absolute; bottom: 0; right: 50px;}
div.post-list-pagination {font-weight: bold; color: blue;}

This should make the archive look better.
I see the second image is not showing up anymore.

Once the archive is looking good, we are going to improve the single post pages.
Cheers.

I put back the .entry-main command with a bottom margin so the pagination would not appear bumped up against the final post summary.

I changed the size of feature-image-box and thus eliminated the giant image and made it the thumbnail size I want on the Category.

I removed the posts’ giant image by removing the php code which posts it on both the page.php and single.php files. I just left the html div’s in place since they are harmless empty. This removed the image completely from all the posts as I wanted with no issues to the Category pages.

All that is left to solve now is getting the post summaries on the Category page to align next to the thumbnail, currently it displays above it.

Did I do something wrong? Check my code again to see what I need to add to make the title/summary on the category page line up next to the thumbnail image. Other than that, it all looks good from here. Whatcha think?

Hi @ilovediecast,

I have no idea, but I kept thinking you wanted the thumbnail beside the complete post instead of next to the title.

In style.css on line 1568 add the two following lines to .entry-header
float: right; width: 85%

And at the end of the style.css add the following lines
.entry-content {float: right; margin-bottom: 30px;}

Let me know if this is what you wanted ??

Hi, haven’t been to this thread in a couple days. I did finish it and end up with something I can live with.

If you want to know, here’s what I did:

I removed the featured image tag from the single.php and page.php so it doesn’t show up on posts now.
On the category page, I left floated the entry-title to next to featured image along with entry-meta.
The content summary goes underneath that and looks good from here.
I removed the positive position on the pagination so it centers out like it should and no longer gets bumped off the page.
I removed the entry-main bottom margin completely, no longer need it to keep pagination on page.
Done. Category thumbnail is left of title and meta, summary below that, no featured image on posts. It all looks and works good.

Now I suppose that the next WP update will undo all my changes and put those fea-img tags back into the php that I removed. That much I can remember to correct if need be but I’m wondering if there’s way to avoid update undo’s of our code customizing.

Hey thanks for sticking with me on this and for coming back. I thought you’d given up on me ?? I’m marking the thread resolved now since I’m ok with the results. Despite adding some custom of my own, it was you that gave the ideas of where to start and how to accomplish it, thanks much for that. Then it only took me a little testing and altering to get it. We’re done with this one ??

Hi @ilovediecast,

I am happy it is solved, and to answer your last question on to making sure not to lose these edits after update.
You need to make a child theme, read information here.