- This topic has 9 replies, 3 voices, and was last updated 3 years, 11 months ago by David.
-
AuthorPosts
-
May 5, 2020 at 4:19 am #1270243Luis
Hi,
I searched a lot but couldn’t find what I’m looking for.
In a page I want to first insert a featured image and with page title right next to it making sure is center aligned to the featured image.
Image – Welcome to this site (for example)
And other text of the page must appear below this “block”.
I couldn’t find a simple way to add only title and kept it aligned with featured imagem and at same time prevent the other text to go up and appear at right side of image.
I’ve tried using Media & Text block from WP 5 but using it, title still appears before this block which wouldn’t work because title can’t appear twice.
Do you know any other way to solve this?
Thanks
Luis
May 5, 2020 at 6:28 am #1270406DavidStaffCustomer SupportHi there,
take a little bit of code but try this:
1. Add this PHP Snippet to your site:
function db_feat_img_shortcode() { $img_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large', false ); return '<img src="' . $img_src[0] . '"/>'; } add_shortcode( 'db_feat_img', 'db_feat_img_shortcode' );
This creates a
[db_feat_img]
shortcode which we can use to add the Featured Image anywhere.2. Create a Header Element:
https://docs.generatepress.com/article/header-element-overview/
2.1 Add this to the content:
[db_feat_img] <h1>{{post_title}}</h1>
2.2 In the Element classes field add:
flex-hero
2.3 Set Display Rules to where you want this to be displayed e.g Posts > All Posts3. Add this CSS to your Site:
@media (min-width: 769px) { .flex-hero .inside-page-hero { display: grid; grid-template-columns: 50% 50%; align-items: center; } .flex-hero img { grid-column: 1; } .flex-hero h1 { grid-column: 2; margin-left: 40px; } }
May 5, 2020 at 8:46 am #1270772LuisThanks! It almost worked. I’ve added a display: inline to h1 to have it in same line as the image. But it’s not aligned vertically to the image.
Last question: how can I align the text to be aligned vertically to the center of the image? (using your css)
I see that you added align-items: center but it isn’t working.
May 5, 2020 at 3:58 pm #1271265TomLead DeveloperLead DeveloperHi there,
Where can I see what it looks like right now?
Let me know ๐
May 18, 2020 at 6:36 am #1290028LuisHi Tom,
I’ve updated the link in this thread. I didn’t had the site online and that’s I took so long to reply.
I did everything David said and it worked. I added a new css line to place h1 in same line as image. But it still is not right aligned like I said before.
But my main problem is that WP is still adding featured image after the header element I’ve created.
Luis
May 18, 2020 at 6:56 am #1290053DavidStaffCustomer SupportI missed out an instruction ( see above ):
Edit the Header Element:
2.2 In the Element classes field add:flex-hero
May 18, 2020 at 7:28 am #1290094LuisAlready updated. But wanted text near image.
And what about that 2 featured image that WP adds? Any idea how to solve it?
May 18, 2020 at 7:37 am #1290116DavidStaffCustomer SupportIn the CSS change this line:
grid-template-columns: 50% 50%;
to:
grid-template-columns: auto 1fr;
To remove the Image from the content use the Layout Element to Disable Elements > Featured Image:
https://docs.generatepress.com/article/layout-element-overview/
May 18, 2020 at 7:56 am #1290322LuisIt works. ๐
Thanks David for all the help!
May 18, 2020 at 7:59 am #1290329DavidStaffCustomer SupportYou’re welcome
-
AuthorPosts
- You must be logged in to reply to this topic.