Goran Grid Display
-
https://proofingcom.wordpress.com/about/
I’m looking to modify the featured image in the grid display layout. I would like for the image to appear just above the ‘read more’ button.
Is there a way to do this in CSS?
Also, I would prefer to choose a different featured image to display once after one would click ‘read more’. Is there a way to do that?
Thanks!
The blog I need help with is: (visible only to logged in users)
-
Hi there, you can give this a try, but as you will see, things are a bit wonky. On your images, I would suggest that you use images, or edit the images you are going to use so that they are all the same size and orientation or there will be alignment issues.
.page-id-266 .post-thumbnail { position: absolute; bottom:120px; width: 100%; left: 0; } .page-id-266 article { position: relative; } .page-id-266 .more-link { margin-top: 230px } .page-id-266 .post-thumbnail img { width: 100% !important; left: 0; } -
Oops, I just checked things, and this goes awry in a big way on 1019px and narrower screens/windows, so we will have to use the following Media Query instead of the above.
@media screen and (min-width; 1020px) { .page-id-266 .post-thumbnail { position: absolute; bottom:120px; width: 100%; left: 0; } .page-id-266 article { position: relative; } .page-id-266 .more-link { margin-top: 230px } .page-id-266 .post-thumbnail img { width: 100% !important; left: 0; } }At 1019 and narrower, things return to the original design.
-
Also, I would prefer to choose a different featured image to display once after one would click ‘read more’. Is there a way to do that?
You would need to have images that are the exact same proportions as the actual featured image, and then you would need to create CSS rules targeting those pages by getting the unique CSS class from the opening body HTML tag. On the Pau Bancroft page, this would be the CSS and you would replace URL_OF_IMAGE with the URL of the other image you wished to use, and make sure the ?w=960 was appended to the end of the new URL.
.hero.with-featured-image { background-image: url(<code>URL_OF_IMAGE?w=960</code>); } -
thank you. In reference to your response about targeting different featured images resolution.
you mentioned that the image would need to be the same proportions. Do you mean aspect ratio in proportion or image size? the concern i have is that the featured image for the grid view will be a circular image. Such as the one for ‘kathy bancroft’. And then the targeted featured image once at the root of that page will be rectangular not circular. Do you see that being an issue?
Thanks!
db -
I also just applied the below css but don’t see a change: can you please advise?
@media screen and (min-width; 1020px) {
.page-id-266 .post-thumbnail {
position: absolute;
bottom:120px;
width: 100%;
left: 0;
}
.page-id-266 article {
position: relative;
}
.page-id-266 .more-link {
margin-top: 230px
}
.page-id-266 .post-thumbnail img {
width: 100% !important;
left: 0;
}
} -
Hi there, what a difference a colon rather than a semicolon makes. Add the following instead. Sorry about my typo.
@media screen and (min-width: 1020px) { .page-id-266 .post-thumbnail { position: absolute; bottom:120px; width: 100%; left: 0; } .page-id-266 article { position: relative; } .page-id-266 .more-link { margin-top: 300px; } .page-id-266 .post-thumbnail img { width: 100% !important; left: 0; } }My image size/proportions recommendation was based on seeing both landscape and the round image on your Team page. Adjustments will have to be made to the above once you get all the images inserted and they are all consistent in size. The above spaces things based on the round image so you will see more whitespace above the rectangular images right now.
-
okay this is a great start, so currently I won’t be able to see the photos? I don’t see them now, of course I’m not quite done with the pics and actually going to be adding a bunch others later…
-
-
okay thanks, just as a starter, i uploaded a circular picture to the Paul Bancroft page about>team>
but the image is blank. Can you please advise. I just received all the photos from the photographer. so now getting to your thread from a while back. Thanks again for your help here.
Maybe I need to modify the current CSS somewhere. Sorry I’m a little new at this.
I can also add later this week the rest of the photos in circular fashion. Just starting with Paul’s circular pic 1st…
-
Hi there, On Paul Bancroft Founder & CEO and Kathy, I’m seeing images. I’m not seeing an image in Paul Jr page when I look at it in your page editor.
I do see that Paul CEO’s image is cut off top and bottom. My suggestion would be to edit that image and crop out the white area on left and right so that the actual dimensions of the image are square. That, I’m almost certain, is what is causing it to get cut off top and bottom.
-
Okay regarding the below page…
https://proofingcom.wordpress.com/team/
CSS Questions
1. Grid View: Featured images are overlayed on top of some of the text. How can we fix?
2. Is there a way to push content around so that the images, buttons and text all lines up up and looks clean? So far most of it does, but there are a few still that need work.
3. I know we have discussed before but…once clicking ‘Read More’, is there a way that the featured image then is a different image? I’m considering the featured image to be the same for all the ‘Meet the Team’ pages. Specifically the featured image that pops up on the home page.
4. Hans Bancroft Page – Title isn’t showing up?
5. For each title in the grid view, is there a way to display the title differently? In other words, create another line for the individuals occupation at the company? See exampled line items for proposed titles for grid view
1. Darin Bancroft
2. Director of Environment Impact &
3. Health & Safety -
Please start a new thread:
https://en.forums.wordpress.com/forum/css-customization
So we can assist you more efficiently, please try to limit each thread to 1-2 questions. Thanks!
- The topic ‘Goran Grid Display’ is closed to new replies.
WordPress.com Forums 