Support » Theme: Misty Lake » Using featured images in Home page and single posts

  • Resolved bwelford

    (@bwelford)


    I wish to use 150 x 150 px thumbnails (as per the Featured Image) for each post on the Home page set as alignleft and inline. I wish to use the Featured image (added to each post) added automatically and full size centered after the <more> tag in each post. I am using a Misty Lake child theme for this.

    At present the Home page shows the full sized image for each post. I have checked the code I can see via the Misty Lake theme and can see no way of achieving what I wish to do as described above. I have also checked the Internet for featured image explanations and am baffled.

    If anyone can help, I would be most appreciative.

    Thanks in anticipation.

Viewing 10 replies - 1 through 10 (of 10 total)
  • Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Hi there – this Codex page should point you in the right direction:

    https://codex.wordpress.org/Post_Thumbnails

    Toward the bottom of the page, there’s an example showing how to add a left-aligned thumbnail size featured image to a theme file:

    <?php the_post_thumbnail('thumbnail', array('class' => 'alignleft')); ?>

    Let me know how it goes.

    Thank you, Kathryn, that was helpful. I had looked at that page extensively but did not see how I could do what I wanted with the index.php file to affect the thumbnail size.

    After thinking further, I set the img.wp-post-image width to 150px in the style.css file for the child theme and that handled that problem.

    My only further problem is that I would prefer that the thumbnail image on the Home page appears immediately to the left of the short snippet for each blog post. At the moment it appears on the line ahead. You can verify this by visiting the Home page at http://vw.smmbc.ca

    If anyone can help on this I would be most grateful.

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Right now, the CSS in your child theme is making any thumbnail-sized image in any post float right:

    div.entry-thumbnail {
         float: right;
         width: 150px;
    }

    You might want to remove the float: right line there, as it’s a bit broad, and affects every single post in which you have a thumbnail image, not just the homepage.

    You could then add a more specific CSS declaration, targeting just the thumbnails on the homepage, floating them to the left since that’s what you say you prefer. You could also add some right-margin:

    .home .entry-thumbnail {
      float: left;
      margin-right: 10px;
    }

    This is what that would look like – quite nice, I think!

    Viv s Window on the World of Flavour Sensations Providing advice and inspiration for your culinary adventures

    If you want the thumbnail images aligned with the post summaries instead, I think the easiest way would be to move the HTML for the thumbnail (lines 10-16) within the child theme’s content.php file itself.

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    p.s. if you go this route (moving the thumbnail HTML) you could also tweak content.php at the same time to display post excerpts on the homepage instead of full posts. Doing that, you’d avoid having to manually add a More tag to every single post.

    Let me know how it goes!

    Thanks, Kathryn. So far so good but I could not see where to handle the automatic excerpting for the Home page. There are several content php files and I’m a little baffled as to what and where I should change the code.
    Best regards.

    Oops! I’ve lost it again since I have now substituted a fixed Home page (the previous About page) and show the blog posts on a page titled blog.

    Is there an easy way to move the thumbnail HTML so that it applies to this blog page? Thanks for whatever advice you can offer.

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    I could not see where to handle the automatic excerpting for the Home page.

    To display excerpts instead of the full post on the blog page, change line 45 in content.php from this:

    <?php if ( is_search() ) : // Only display Excerpts for Search ?>

    to this:

    <?php if ( is_search() || is_home() ) : // Only display Excerpts for Search or Blog page ?>

    More about is_home()https://codex.wordpress.org/Function_Reference/is_home

    More about the_excerpt()https://codex.wordpress.org/Function_Reference/the_excerpt

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Is there an easy way to move the thumbnail HTML so that it applies to this blog page?

    Sure, just change the CSS I gave you earlier so it targets the blog page instead of the homepage:

    .blog .entry-thumbnail {
      float: left;
      margin-right: 10px;
    }

    Thanks indeed, Kathryn. With your help it’s now running as I wish it to.

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Great, glad you’re all set!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Using featured images in Home page and single posts’ is closed to new replies.