Separating thumbnail image from banner image on grid page display

Home Forums Automattic Forefront Separating thumbnail image from banner image on grid page display

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #163613 Resolve

    escottaston

    Hello,

    I’m using the grid page template and I’m wondering if there is a way to set a thumbnail image that is different to the featured image that is used for the child page? On my website the featured image for each child page is a solid block of colour, which doesn’t display nicely as a thumbnail on the grid parent page.

    I’d like to upload a separate image for each child page that would appear as the thumbnail image on the grid page – is it possible to do this?

    Alternatively is there a way to hide the thumbnail images on the grid page display?

    Many thanks, from Jessica.

    The blog I need help with is escottaston.wordpress.com
    #163614

    Kathryn P.
    Happiness Engineer

    It’s possible to accomplish what you want, but it requires a few steps, so bear with me. :)

    I’m wondering if there is a way to set a thumbnail image that is different to the featured image that is used for the child page?

    You can add an image to a manual excerpt for each child page, just above a manual text excerpt. This would be used on the grid parent instead of automatically pulling the first 55 words of the post, as it does by default.

    Here’s an example of what you would enter for the manual excerpt for the “New Business” page:

    <img class="size-forefront-grid-thumbnail wp-post-image" width="330" height="330" alt="cropped-banner_spearmint.jpg" src="https://escottaston.files.wordpress.com/2015/12/cropped-banner_spearmint.jpg?w=330&h=330&crop=1">
    The first and often most daunting question when starting a new business is: "where do I start"? And the hardest thing about this question is who do you ask?

    To find the right HTML to use for the image tag, use a browser inspector to right-click on and copy out the code from the current images on your current homepage.

    Escottaston

    Be sure to remove this part of the code in each image tag:

    attachment-forefront-grid-thumbnail

    You’ll then just need to hide the original featured images on your grid page, by adding this custom CSS:

    .home .child-pages .attachment-forefront-grid-thumbnail {
      display: none;
    }

    Let me know how it goes!

    #163649

    escottaston

    Hi Kathryn,

    Got it! Thanks so much for your help!

    I should add, in case someone else refers to this post, the ‘excerpt’ field may be hidden by default. If so, navigate to the top of the edit page screen and click the “Screen Options” drop down. In there, make sure the “Excerpt” box is checked.

    Took me ages to figure that out!!

    #163650

    Kathryn P.
    Happiness Engineer

    Glad you’re set! Yes, that’s a good tip about Screen Options if you’re using the WP Admin editor. In the new dashboard, they’re never hidden like they are in WP Admin.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.