Different Picture on Grid Page

muslimahcoaching · Member · Jan 9, 2017 at 12:41 pm
Copy link

Add topic to favorites
Hi,

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.

https://tayyibaatwives.com/about/

Thank you.

The blog I need help with is: (visible only to logged in users)
eallas · Member · Jan 9, 2017 at 1:56 pm
Copy link
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:
https://en.forums.wordpress.com/topic/different-featured-image-on-each-psge?replies=10

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.
supernovia · Staff · Jan 9, 2017 at 9:24 pm
Copy link
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');
}
```
eallas · Member · Jan 9, 2017 at 11:26 pm
Copy link
@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.
muslimahcoaching · Member · Jan 10, 2017 at 9:22 am
Copy link
@supernovia

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

@eallas

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

Thanks.
muslimahcoaching · Member · Jan 10, 2017 at 1:16 pm
Copy link
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?
supernovia · Staff · Jan 10, 2017 at 9:12 pm
Copy link
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

:D

We wouldn’t want to do the same for all instances of .post-1402, because then the image might not show up elsewhere.
supernovia · Staff · Jan 10, 2017 at 9:13 pm
Copy link
@tayyibaatwives I would just crop and resize to the proper dimensions prior to uploading. Then you have full control over how it displays.
muslimahcoaching · Member · Jan 11, 2017 at 8:57 pm
Copy link
@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.
eallas · Member · Jan 11, 2017 at 9:32 pm
Copy link
Thanks for the great description @supernovia! Learned something thanks to it! Appreciate it! :D
supernovia · Staff · Jan 11, 2017 at 11:34 pm
Copy link
No problem, @eallas :)

@tayyibaatwives can you tell me which page or post isn’t working? Everything I’ve clicked on works right now.
muslimahcoaching · Member · Jan 12, 2017 at 9:25 am
Copy link
@supernovia

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.

https://tayyibaatwives.com/test-parent/

Thank you.
muslimahcoaching · Member · Jan 12, 2017 at 9:26 am
Copy link
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.
kokkieh · Staff · Jan 14, 2017 at 2:25 pm
Copy link
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.
muslimahcoaching · Member · Jan 14, 2017 at 4:10 pm
Copy link
@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.
muslimahcoaching · Member · Jan 14, 2017 at 4:16 pm
Copy link
Oh I think I figured it out. I added this:

background-repeat: no-repeat;
muslimahcoaching · Member · Jan 14, 2017 at 4:16 pm
Copy link
Oh I think I figured it out. I added this:

background-repeat: no-repeat;
kokkieh · Staff · Jan 15, 2017 at 6:46 am
Copy link
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.

No items found.