Thumbnail in teaser and large image in the full post

  • Hi

    A popular feature of most news sites this days is to display a thumbnail based on an image from an article (usually the first image) in the article’s teaser (first few lines) and then have the full sized image displayed when the entire article is opened after the “read more” link is clicked.

    How can this be implemented in WordPress?

    P.S. I tried this using the “Post Thumbnail images” feature. However the result was not desirable. The problem was that the large image was the first item in the post and was floated left. This meant that both the full sized image and the thumbnail were being displayed in the teaser.

    What I want is to display only the thumbnail in the teaser and the large image in the full article.

    Thanks.

Viewing 6 replies - 1 through 6 (of 6 total)

  • You’ll have to get that theme to implement it. You can use the Insert More tag (Alt+Shift+T) in the wordpress post editor.

    Or use this tag: <!–more–>

    Hope it helps!

    Thread Starter jazzi

    (@jazzi)

    Thanks for the response trixoo. However, what you have mentioned simply inserts a “read more” link which I have been able to do. What I am aiming to implement is to place a thumbnail based on an image from the post, to the left of the “read more” text.

    I have been able to accomplish this (somewhat) by using the “Post Thumbnail Images” images feature (new to WP 2.9+) and the get_the_content() WP function along with the PHP strip_tags() function.

    strip_tags(get_the_content(...), 'allowed tags minus <img>')

    This prevents the first image from the post from being displayed in the teaser but does not affect the thumbnail.

    You could try custom fields

    Using Custom Fields is key. If you try to use an image and resize server side to use as a thumb is a lot of unnecessary and repetitive tasks for your server. If my site is a good example I can help you out…

    My homepage has a blog feed with thumbs of each post – https://thenateums.com
    My archives use thumbs also from each post – https://thenateums.com/category/blog/
    And each post then has photos or images that I had screenshot & cropped/resized to use as thumbs. Requires a little leg work with each post but is worth it in the end.

    (My blog is a work in progress today, I was having some validation errors and in fixing that it is giving me a white edge below each image currently)

    I could achieve this using ‘Thumbnail For Excerpts’ plugin but then my other plugin ‘post teaser’ stops working which means I lose the justified alignment and the ‘read more..’ link at the end of the excerpt.

    Use <!–more–><!–noteaser–> like so:

    <img align=”left” src=”small.jpg” alt=”” width=”100″ height=”100″ />

    Blah Blah Blah

    <!–more–><!–noteaser–>

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Thumbnail in teaser and large image in the full post’ is closed to new replies.