[Resolved] auto resize excerpt image on home page?

[Tony]

Is it possible to resize an excerpt image on the home page as with the header/feature image?

[Tom]

Hi Tony,

You can do this in “Customize > Blog > Post Image”.

[Tony]

(the images and settings I used in the testing below have been removed so the post as you would see it now has no featured image or page header image)

I need to be clearer.

I am not using a featured image or a page header image.
It does not have a manual excerpt.
The post just has an image in the post.
<!–http://loveitphotography.uk/london/hipster-or-hobo/–&gt;

Because it has <!–more–> in the post the image is shown in the excerpt on the Home page full size.
I would like it to be a thumbnail on the Home Page. It is not affected by any size setting e.g. the page header size)

If I add a featured image and size it either in the page header section (as we have discussed before) or in the Customise blog post image it makes no difference to the image displayed with the excerpt on the Home page it is always the image in the post.

If I remove <!–more–> from the post no image is shown on the Home page – not the image in the post or the featured image or a page header image

More info from testing:

If I use a featured image AND a page header image the page header image overrides the feature image.

If I have no feature image but do have a page header image AND tick the box:
“Add to blog excerpt (if no Featured Image is set)”
the image on the home page is still the full size image that is on the page (not a header or feature image)

The image in the past was put there using the add media option. Here’s the post:

a> href=”http://loveitphotography.uk/wp-content/uploads/London-Hipsters.jpg&#8221; rel=”attachment wp-att-578″>/a>

I saw these two hipsters in Soho Square in London – great style!
I wondered how long it had taken to grow their beards.<!–more–>

<span style=”font-size: 14px;”>Hey mister, I want to know</span>
<span style=”font-size: 14px;”> Are you a hipster or a hobo?</span>
<span style=”font-size: 14px;”> You got a big beard and you live in Soho</span>
<span style=”font-size: 14px;”> Are you a hipster or a hobo?</span>
<span style=”font-size: 14px;”> <cite>with apologies to Rubberbandits</cite></span>

• This reply was modified 8 years, 2 months ago by Tony.
• This reply was modified 8 years, 2 months ago by Tony.

[Tony]

html above should have looked like this. WHY does the edit button disappear – would be better to be able to go back and edit origianl post until I got it right.

`<a href=”http://loveitphotography.uk/wp-content/uploads/London-Hipsters.jpg&#8221; rel=”attachment wp-att-578″><img src=”http://loveitphotography.uk/wp-content/uploads/London-Hipsters-1024×678.jpg&#8221; alt=”Stylish hipsters in Soho Square, London” width=”1024″ height=”678″ /></a>

I saw these two hipsters in Soho Square in London – great style!
I wondered how long it had taken to grow their beards.<!–more–>
<blockquote><em><span style=”font-size: 14px;”>Hey mister, I want to know</span></em>
<span style=”font-size: 14px;”> <em> Are you a hipster or a hobo?</em></span>
<span style=”font-size: 14px;”> <em> You got a big beard and you live in Soho</em></span>
<span style=”font-size: 14px;”> <em> Are you a hipster or a hobo?</em></span>
<span style=”font-size: 14px;”> <em> <cite>with apologies to Rubberbandits</cite></em></span></blockquote>`
`

• This reply was modified 8 years, 2 months ago by Tony.
• This reply was modified 8 years, 2 months ago by Tony.

[Tom]

Hi Tony,

When adding code into your post, highlight it and click the “code” button in the editor – it will make it all neat and easy to read.

So if I’m understanding correctly, you want to show a different image in the manual except (more tag) than on the full post.

Typically, this isn’t possible, but we can get a little fancy.

What you’ll want to do is add two images, the thumbnail and the full image.

Then you’ll need to give each image a class, for example:

<img src="URL TO THE THUMBNAIL IMAGE" class="thumbnail-image" />
<img src="URL TO THE FULL IMAGE" class="full-image" />

Then you would have to add some CSS like this:

.single .thumbnail-image {
    display: none;
}

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

Let me know if that makes sense or not 🙂

[Tony]

That works – Really Excellent
Thanks Tom

[Tom]

You’re welcome 🙂

[Author]

Posts