Thumbnail on home page

[Tony]

Hi Tom
When I was setting up my site we came up with a way to have a thumbnail image for a post show on the home page but not on the actual post by using
class = “thumbnail-image”
class = “full-image”
with

.page .thumbnail-image,
.single .thumbnail-image {
display: none;
}
.archive .full-image,
.blog .full-image {
display: none;
}

This works fine but only if the post has <!–more–> in it.
Without adding this to the post the thumbnail does not show up.
This is a pain because when you use the home page link it goes to the bottom of the post (where <!–more–> is inserted) even if there is no text to read.

Is this a WordPress function or is there a way to ‘force’ the thumbnail to show up without putting
<!–more–> in the post.

Hope that’s not too confusing

Thanks
Tony

• This topic was modified 8 years ago by Tony.
• This topic was modified 8 years ago by Tony.
• This topic was modified 8 years ago by Tony.

[Tom]

Hi Tony,

HTML inside the posts (like images) won’t show up when your blog is displaying excerpts. That’s because the excerpt function in WordPress strips out all HTML.

In order to have an image display with an excerpt, you need to upload a featured image: https://generatepress.com/knowledgebase/featured-images/

Then to hide it on the single page, add this CSS:

.page-header-image-single {
     display: none;
}

• This reply was modified 8 years ago by Tom.

[Tony]

I see what you’re saying but just to be clear:
At the moment, based on the method we agreed on a while back, I have this css
.page .thumbnail-image,
.single .thumbnail-image {
display: none;
}
.archive .full-image,
.blog .full-image {
display: none;
}

As an example here is the html from an existing page:

<a href="http://loveitphotography.uk/images-from-rome-march-2016/">
<img class="thumbnail-image alignleft" 
src="http://loveitphotography.uk/wp-content/uploads/
Rome-March-2016-0938-300x200.jpg" alt="St Peter's Basilica 
from Castel Sant'Angelo" width="300" height="200" /></a>

<div class="full-image">
[justified_image_grid preset=c1 row_height=300
 height_deviation=300 orderby=menu_order 
lightbox_max_size=large image_tags=rome]</div>
<div></div>

<!--more-->

The small image is shown on the home page but NOT in the post itself

If I remove <!–more–> the small image is NOT shown in the home page.

I have a number of posts using this system.

Is there a way to keep this system but show the small image on the hom page without having <!–more–> in the post?

• This reply was modified 8 years ago by Tony.
• This reply was modified 8 years ago by Tony.
• This reply was modified 8 years ago by Tony.

[Tony]

Your suggested solution to add a featured image and add
.page-header-image-single {
display: none;
}

does not work.

(CAPS to emphasise not shouting!!)

I have a test page. with this code
<img src="http://loveitphotography.uk/wp-content/uploads/Camden-April-2016-0978-200x300.jpg" alt="Camden April 2016-0978" width="200" height="300" class="alignleft size-medium wp-image-1649" />

I have a featured image.

The featured image does NOT show on the home page or the main page.

If I put <!–more–> in the post the featured image DOES NOT show up in the home page but the image in the post DOES.

I have had to revert to the current system.

Any ideas why <!–more–> has an influence on what is shown on the home page?

The current process is good – just need it to work without <!–more–> in the post.

[Tom]

Is there a way to keep this system but show the small image on the hom page without having in the post?

Not without custom programming or a third party plugin that changes the way the excerpt works in WordPress. Excerpts do not show any HTML, images included.

Any ideas why has an influence on what is shown on the home page?

Using the tag tells WordPress to use the_content() function, which displays HTML (including images), then it sets a cut off point.

Without the tag, the_excerpt() function is used, which doesn’t show any HTML.

You may have luck looking for a plugin which alters the functionality of the_excerpt() function to allow images, but I’m generally against tweaking that function as things can get buggy pretty quickly.

[Author]

Posts