Different Picture on Grid Page

  • Author
  • #2837319


    What is the code to make the picture on my grid page different from the featured image for the page when you click on that link. For example, if I want the ‘Our Mission’ grid pic to be something and then when you click on ‘Our Mission’ the featured image is different for that page. Right now, they are both the same blue pic.


    Thank you.

    The blog I need help with is tayyibaatwives.com.



    Howdy tayyibaatwives!

    The grid page utilizes the featured image to become the preview image for the post. The featured image is used as the preview picture for the page. It is possible to do this; however, the code will be hard to manage. Are you okay with this?

    An example of how the code will look and a similar situation to yours can be found here:

    I’m also tagging this with modlook to get confirmation if this is possible. I’m unsure if it would negatively effect the posts/page if this is done.



    Thanks for tagging us, @eallas :) Yeah, it can be done with custom CSS. Not ideal, but certainly doable.

    @tayyibaatwives here is some example code for your css. You would have to modify the post ID as well as the image URL.

    .child-pages .post-1402 > div.entry-thumbnail > a > img { visibility:hidden; }
    .child-pages .post-1402 > div.entry-thumbnail { background: url('https://tayyibaatwives.files.wordpress.com/2015/05/long-blue.png?w=360&h=242&crop=1');


    @supernovia You’re welcome! Thanks for the clarification. Do you mind me asking which page the “.child-pages” is pointing to? Is it the about page or to the post itself? Thanks again! Trying to get the hang of the inner depths of WordPress.com CSS.



    Thank you so much! I just tried a test page and it worked.


    It seems like child means the post itself not the parent page, which is About.



    The crop in the code makes my image really big and I want to make it normal and centered. I tried to take out the &crop=1′ but it distorts the image. Any advice?

    Also, how do I hyperlink the image?



    In this case .child-pages is a section on the grid page. So (in the style of “this is the house that Jack built”)

    We are targeting the image
    that is inside the anchor link
    which is in div.entry-thumbnail
    for post-1402
    if it’s inside a child-pages section


    We wouldn’t want to do the same for all instances of .post-1402, because then the image might not show up elsewhere.



    @tayyibaatwives I would just crop and resize to the proper dimensions prior to uploading. Then you have full control over how it displays.


    @supernovia okay the sizing works but in different browsers, like internet explorer, viewers cannot click the image to enter the page. Do you know how to hyperlink the thumbnail after using these codes to make it different from the featured image? Thank you.



    Thanks for the great description @supernovia! Learned something thanks to it! Appreciate it! :D



    No problem, @eallas :)

    @tayyibaatwives can you tell me which page or post isn’t working? Everything I’ve clicked on works right now.



    I made up a test page so you can see what I’m saying about how it doesn’t center completely and how it’s a picture that cannot be clicked on.


    Thank you.


    Sorry just to be clear: In Chrome and Safari, I can click on it but in Internet Explorer I cannot, as well as Android phones.



    For the centering issue, chang “repeat” in the code @supernovia gave you to “no-repeat”

    As for the image not being clickable, that’s because the background CSS @supernovia gave you is not fully supported in IE. There’s nothing we can do about that – it’s a limitation on IE’s end, and the only way around that is to not replace the image with CSS but to use the featured image instead.

    I also tested on an Android phone using the Chrome browser and there I can tap the image to go to the page, but it’s possible that in other Android browsers the code is also not yet supported.


    @kokkieh, I don’t see the ‘repeat’ in supernovia’s code. I see crop but how would I rewrite the code overall?

    Okay that’s fine with IE. Thanks for letting me know about Android.


    Oh I think I figured it out. I added this:

    background-repeat: no-repeat;


    Oh I think I figured it out. I added this:

    background-repeat: no-repeat;



    Ah, sorry. It’s not in @supernovia‘s code, but in the code I saw in the Customizer on your site. I see you’ve removed that now, and adding background-repeat: no-repeat; should do the trick, yes.

The topic ‘Different Picture on Grid Page’ is closed to new replies.