Help with the featured picture /header

Hello guys!
I need your help with this detail. I want the featured picture to be full width right below the menu, like you can see in this website for example. https://www.adventureinyou.com/travel-guides/thailand-travel-tips/

You gave me the code to change the text width, but I want the picture to be full width while I can narrow the text space below.

Is it possible?

Thanks a lot for your kind help.
Isabella

Hello Isabella,

Thanks for writing in!

What you have in mind can be done with custom JS and some css. You can do this:
1.) please add this JS code in the Theme Options > Global JS (http://prntscr.com/evswzb)

(function($){
	$(".single-post .entry-featured").insertBefore('.x-container.main');
})(jQuery);

2.) And then please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.entry-featured img {
    min-width: 100%;
}

We would love to know if this has worked for you. Thank you.

Hello @RueNel

It works on posts.

The only problem is that on the pages the feature picture doesn’t even show.

Can you please help?
Here an example

Thanks :slight_smile:

Hi @isa1978,

I’m not sure what else you wish to implement for picture less page. Because the code assumes there is an image that it can move. But since pages have no featured images then nothing to move.

How about adding some image to your page content and add some class in it? Example

<img src="" class="page-featured-image" >

Then you can update the code to this

(function($){
	$(".single-post .entry-featured, .page .page-featured-image").insertBefore('.x-container.main');
})(jQuery);

and CSS to this

.entry-featured img, img.page-featured-image {
    min-width: 100%;
}

Thanks!

Hello Rad I am not sure I understand you when you are saying:

In the page editor I have the features image feature (see screen shot attached)
But it doesn’t show (as it does in the posts) I need it to appear in full width just like in the posts. Can you please help?

The code you gave me doesn’t work.

thanks a lot

On another note I would like the post or page title to appear on the picture just like in this blog, to give you an example

This part in the screen shot should be loaded in the featured picture just like the example I gave you. without the “leave a comment” part and my name, just the title and the categories and dates below it

Can you please help me with that? very much appreciated :slight_smile:

Hi Isabella,

Thank you for the credentials, let’s have a different approach on this, lets utilize a feature called Global Blocks. Please navigate to X > Global Blocks and you’ll see there is a page-post banner global block there that I created, it’s powered by a dynamic content feature so it automatically pulls the page/post featured image as background-image and the page/post title as the headline. see this example page here.

You can easily add this Global Blocks on your page by using the Global Block Element. You need to set the section padding to 0 and set the Row’s Global Container option to off so the Global Block can go fullwidth. You also need to have a Blank - No Container | Header, Footer page template to begin with if you want to have a fullwidth banner content.

You can add the Global Block on your single posts automatically by adding this to your child theme’s functions.php file

function my_custom_content() {
  if ( is_single() ) {
    echo do_shortcode('[cs_gb id=13623]');
  }
}

add_action( 'x_after_masthead_end', 'my_custom_content' );

This may look intimidating for now, but if you understand how the Global Blocks and Dynamic Content works, you’ll understand that this approach is lot easier.

Global Blocks
Dynamic Content
How to Use Global Blocks in X & Pro

Hope it helps,
Cheers!

Hello @friech
thanks for this. I am sorry I have overwritten your example page. My apologies.

I have been through the articles and tutorials you sent me but I can’t seem to find how it works.

I have added the global blocks code on top of the page where I want the full with picture to go but it doesnt’ work

And If I insert the global blocks it deletes what I have already written.

So I am not sure on how to proceed.

If the once and for all solution is to add the code to the child theme, can you tell me where do I do that? from the server provider?

Can you please help me? I am in a very dark space right now … :frowning:

thanks a lot
Isabella

Hi Isabella,

That’s ok I understand, just remember that you only use the Global Block when there is a Section (or a block area) that you want to use on multiple pages, for example the banner section. Don’t put all your content on the Global Block.

I rebuild the Global Block that I created, let’s start over again, please follow thoroughly,

  • Open/edit in Cornerstone any of your pages that you want to have a banner.
  • Make sure this page is using a No Container | Header, Footer page template, this is necessary if you want the banner to go fullwidth.
  • Also, make sure that this page has a Featured Image set on it, or else there will be no background-image on the banner.
  • Add a new section on top of your page, rename this section as banner, then right-clicked it and hit the Remove Spacing option, this will remove the default top and bottom padding of the section and the default Global Container, so this section will be fullwidth.


  • Add a Global Block element on that section


  • Then inspect that Global Block element and under setup, select the page-post-banner Global Block, this is the Global Block that I created.


  • Save the page, clear your caches, and preview the page on the front-end.
  • Does it work? Do this again on a couple of your pages and you’ll understand how the Global Block and Dynamic Content works.

Now with regards to the posts, you need to login to your server via FTP or the cPanel’s File Manager, and navigate to /wp-content/themes/x-child/ there you’ll see the functions.php file, download and edit that file and add the code I provided above, then save and upload that updated file back.

Hope it helps,
Cheers!

Hey Friech

thanks a lot you are a star!

But it doesn’t work. It’s not full width.

I follow all your instructions meticulously step by step, but this is the result


I still have lateral and top margins.

Also the font of the title is using the body copy fonts I need the same fonts as the headings.
Is it possible to have those titles in white? Even for the posts?

thanks a lot :slight_smile:

Hey Isabela,

The page is not fullwidth because you are using Blank - Container | Header, Footer. You must switch to Blank - No Container | Header, Footer instead. And make sure to turn on the inner containers or global containers in some of your rows so that they will not be fullwidth.

You can reduce the footer gaps with this custom css:

.x-colophon.top {
    padding: 5% 0 5.25%;
}

Feel free to adjust the values. With regards to the fonts;

The font size of the widget title is using this custom css which you already have:

.x-colophon.top .h-widget {
    color: rgb(86,86,88);
    margin-top: 0;
}

.h-widget {
    margin: 16px 0 12px;
    font-size: 128.6%;
    line-height: 1.3;
    color: #fff;
}

Hope this helps.

Hello @RueNel thanks for your help.

I managed to have a full width featured picture on the pages as well thanks a lot

I will need to seek help for the FTP access because I am scared to do some damage.

Once the code you gave me is inserted I would have the title of the posts on the featured picture like the screen shot attached, correct?

In your last message you mentioned WIDGET, when I ask you to make the title of the posts in WHITE, but is it a widget?

I am fine with the side bar widget as they are. I only need to change to the color of the title post to White, as I want to have it on the featured picture like in the picture

please let me know if this is whay you meant as well

thanks a lot
Isabella

Hi Isabella,

Yes, that is correct. You need to add the code provided to your child theme’s functions.php file. That will add the banner Global Block to your posts.

function my_custom_content() {
  if ( is_single() ) {
    echo do_shortcode('[cs_gb id=13623]');
  }
}

add_action( 'x_after_view_global__slider-below', 'my_custom_content' );

We are referring to the Footer Widget Areas.

This area:

Yes, these are widgets, see Appearance > Sidebars, Footer 1 and Footer 2 widget area. It has nothing to do with the Global Block.

You can edit your Banner Global Block section like a normal section, please navigate to X > Global Block and open/edit the page-post banner, although in the preview you will only see like this:


Consider that page-post banner headline element as place-holder, you can edit the styling of that as if a normal headline element. You don’t see any background-image there but on the front-page/actual page you will see the post featured image as the background-image.


Yes, that is the banner that we are after.

Remember to clear all your caching features (plugin, server-side, CDN, and browser’s cache)

Cheers!

1 Like

Hello Friech!
now I got it thanks a lot.

I only have a couple of little issues with this banner, the text is very small, no matter how I changed. I did it both in the text editor and in the column editor (see screen shots) but it stays the same size.

Also both text and picture look as if there is a white transparent layer over them. As the colour don’t look so vivid and the text doesn’t pop up as it should.
Can you help me with that? ( screen shot below)

I am not sure why you mentioned the widget though. because I don’t need to make any changes there. (as for now)

All the rest is good

thanks a million
isabella

Hello Isabella,

Please test your Global Block in the posts again. I have corrected the headline element and made sure that the background upper layer color is disabled.

Kindly Temporarily disable the WP Rocket plugin so we can easily see all the changes. You can activate again once your done editing and making site changes.

1 Like

@RueNel You are awesome!

Thank you so much :slight_smile:

You’re most welcome!

Hello @RueNel or @friech
I have finally understood how to insert the above code but when I did it the feature picture was showing duplicated. One was with the post title the other without post title.

Also, it was showing the post title only and not the category and date. And the text dimension was smaller than in he pages image.

Can you please help me fix that? I would really appreciate it.

Hello Isabella,

Now that the global block is displaying in your single post. The featured image section is n longer needed. You can get rid of it by using adding the following code in your X > Theme Options > Custom Css section:

.single-post .entry-featured {
    display: none;
}

Again, please don’t forget to clear all your caches before you test the site again.

We would love to know if this has worked for you. Thank you.

hello Rue,
It does work, but I still have 2 problems:

  1. The title font appear smaller than in the page, if I correct the font size in the global block it becomes too big in the page. But I dont understand since it’s the same code why it doesn’t appear the same size in both pages and post?

  2. as you can see in the screenshots below the title is still appearing in the post, while I want it to go away as it would be redundant and the date , category and author should appear below the post in the over the picture.
    the reference post is this https://www.boundlessroads.com/things-to-do-in-cancun/

And also the leave a comment should go away.

Could you please help me? : :hugs: thanks a lot

This is the post:

This is a page : you can see the title is bigger

Hi Isabella,

  1. That is because of the em unit we have on the text font-size, I did go ahead and change that to rem.

If you want to learn how that em and rem work, please follow the following article.

CSS units for font-size: px | em | rem

  1. I did go ahead and added a dynamic content text to the Global Block that outputs the date and author, unfortunately, its not possible to output categories on the dynamic content yet.

I’ve also updated the previous CSS given to hide the duplicate title, author, and date.

.single-post .entry-featured,
.single-post .entry-header {
    display: none;
}

Note: you might want to add back the upper layer background-color overlay because on some images your white text will blend in the image and hard to see.

And your caching is very persistent, always clear all your caches after any changes.

Thanks,