Banner Image on Individual Blog Posts

Hey, I’m just curious if it’s possible to have a banner image on the top of each individual blog post. The main pages of my website have a full-width section background image with parallax effect, and I’d like to have a similar effect on blog posts.

Unfortunately, since blog posts themselves are not built with Cornerstone, I haven’t figured out a way to make this work. Many blogs use such a layout and I’d really like to do the same. Currently, my posts appear quite simple and visually boring.

http://www.theseforeignroads.com

Thanks!

1 Like

Hi There,

Please add the following code under functions.php file locates in your child theme directory:

add_action( 'x_after_view_global__navbar', 'x_print_section' );
function x_print_section(){
	if(is_singular( 'post' )){
	?>
<div id="x-section-1" class="x-section bg-image parallax" style="margin: 0px;padding: -50px;height: 100vh; background-image: url(<?php the_post_thumbnail_url( 'full' ); ?>); background-color: #bf754e;" data-x-element="section" data-x-params="{&quot;type&quot;:&quot;image&quot;,&quot;parallax&quot;:true}"><div class="x-container row-expanded max width" style="margin: 0px auto;padding: 0px;"><div class="x-column x-sm x-1-1" style="padding: 0px;"><hr class="x-gap" style="margin: 50% 0 0 0;"></div></div></div>
	<?php
	}
}

This code will print a section with the parallax effect(the background image is the featured image) on the top of your blog posts.

Hope it helps :wink:

1 Like

Hi Thai,

I am very curious how I can style my posts as well with headers, background-images, and forms etc. html & css. Where do I place the css and html? I’m not sure where to place it correctly. My post are very basic and boring. here is an ex. http://www.selacowdb.com/mock-interview-dayHow do I change the style the layout to an example like thishttps://essential.themepunch.com/just-food/doing-it-the-chilled-way/

Please advise I’m still learning :grin: I am using xtheme pro 2.0.4. Also how come none of the plugins i install never look like the demo? Even after I enter my own data. How do I get them to look like the demo?

Thank you in advance

Hi,

The demo page you provided was created using a third party plugin essential grid.

For your guide on how to create an essential grid post kindly refer to the link below.

Hope that helps.

Hwllo @tammyf,

Thanks for writing in! :slight_smile:

On behalf of my colleague, I’ll answer the questions for you.

  1. I am very curious how I can style my posts as well with headers, background-images, and forms etc. html & css. Where do I place the css and html? I’m not sure where to place it correctly.

Reply:

You can add a class/ID in the Customize tab of your section/row.

Then you can use those classes/ID’s by adding styles either from X/Pro > Theme Options > CSS or Element CSS. I’ve shared resources to look at.

  1. My post are very basic and boring. here is an ex. http://www.selacowdb.com/mock-interview-day How do I change the style the layout to an example like this https://essential.themepunch.com/just-food/doing-it-the-chilled-way/

Reply:

In the example link, you wanted to have a sticky header, and a full width template posts.

For the sticky header:

You need to make your header bar white, you will also set the position to absolute so it stays over the slider. Don’t forget to set it to sticky.

Here’s an intro guide to refer about Pro’s header and footer builder:

For the full width template:

Go to Pro > Theme Options > Layout and Design and select Fullwidth as layout.

If you need each of your pages to have full width, you can change it in Page > Page Attributes.

  1. Please advise I’m still learning :grin: I am using xtheme pro 2.0.4. Also how come none of the plugins i install never look like the demo? Even after I enter my own data. How do I get them to look like the demo?

Pro themes doesn’t cater X demo templates. I suggest you use the template manager as it has pre-defined design assets such as Design Cloud.

However, if you insists of using X theme demos, first, you may need to activate X theme. Please see tutorial below on how to setup demo content:

Once done, re-activate the Pro theme. Hope that helps you get started.

I advise you create a separate thread next time to avoid confusion on replies.

Thank you.

1 Like

Hmm, I will give this a try. However, all of my featured images are 500px x 500px, these won’t work too well as a banner.

Is there a way to use a different image?

Thanks again

Hello There,

The featured image is the only easiest way to get an image from your individual post that you can use for a banner image. If you want something more customize, you might need to use a custom field and incorporate it in the code given by Thai. To have a better understanding of how a “Custom Field” may work, please check this out: https://codex.wordpress.org/Custom_Fields

Hope this helps.

I briefly read through that link and realized it’s way over my head. I am less than novice at best when it comes to web design.

Is this the only solution? It’s just a little frustrating when many other themes offer this as a standard option. Seeing as X Theme is so powerful in nearly every other aspect, I’m a little surprised that their blog page/post options are lacking…

Hello There,

Thanks for the updates. My suggestion is only a suggestion. Without the help of any plugin, you may need to go back with the featured image. Yes I know you mentioned that you only have 500x500 in dimension. If you use it, you might need to re upload bigger image dimensions so that we can use it in the code given by @Thai.

At the moment, we do not have any other feature that could give you a banner image with a parallax effect. We’ve added this as a feature request so it can be taken into consideration for future development.

Best Regards.

Ok, that’s fair. I can look into what would be required to change all of the featured images.

One more question. You mentioned that this is the only way to give a parallax effect banner image. What about a static one instead? The parallax would be nice for keeping my site consistent, but on individual blog posts it’s not a game changer.

Is there code that can be used to just have a regular banner image across the top of each blog post?

Thanks

  • Mark

Hi there,

Could be done through javascript and a bit of CSS just as long there is a featured image (again, no parallax). Please add this code to your global custom javascript

jQuery ('.single-post .entry-featured').insertBefore('.site > .x-container');

Then this CSS to your global custom CSS

.single-post .entry-featured {
    margin-top: 0px;
    padding: 0px;
    border: 0px;
}

Thanks!

1 Like

Awesome, it works great!

Thanks!

You’re welcome!
We’re glad we were able to help you out.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.