Home › Forums › Automattic › Forefront › Separating thumbnail image from banner image on grid page display
-
AuthorPosts
-
escottastonInactiveHello,
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.comJanuary 15, 2016 at 2:47 pm #163614
Kathryn P.Happiness EngineerIt’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.
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!
January 28, 2016 at 12:03 am #163649
escottastonInactiveHi 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!!
January 28, 2016 at 2:08 pm #163650
Kathryn P.Happiness EngineerGlad 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.
-
AuthorPosts
You must be logged in to reply to this topic.