Thumbnail on home page

Home Forums Support Thumbnail on home page

Home Forums Support Thumbnail on home page

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #184153
    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, 7 months ago by Tony.
    • This topic was modified 8 years, 7 months ago by Tony.
    • This topic was modified 8 years, 7 months ago by Tony.
    #184194
    Tom
    Lead Developer
    Lead Developer

    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, 7 months ago by Tom.
    #184398
    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, 7 months ago by Tony.
    • This reply was modified 8 years, 7 months ago by Tony.
    • This reply was modified 8 years, 7 months ago by Tony.
    #184410
    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.

    #184457
    Tom
    Lead Developer
    Lead Developer

    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.

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.