Blog Featured Image

[MichaelAnthonyMurray]

Hello,
Is it possible to make the blog featured image appear as a hero image ABOVE the navigation?

[Prasant]

Hello Michael,

Thanks for asking.

It will require some custom development work which falls outside the scope of support that we can offer. However, to help you get started you can use following Js code under X/Pro > Theme Options > JS:

(function($){
  $('.single-post .entry-featured').insertBefore( '.single-post .x-navbar-wrap' );
})(jQuery);

If you would like to get started with Javascript, please take a look at following resource.

https://www.w3schools.com/js/

Thanks.

[ruenel]

Hi Michael Anthony,

Please apply what been suggested by @Prasant.

By the way, you only gave your site url and no WP access.

Regards.

[MichaelAnthonyMurray]

It seems to work but only one one page?

It worked on this page
http://buildingthefourdimensionalman.com/matt-skinner-bloody-knuckles-bright-futures/
However now my logo text is above! How do I keep my text logo [which is stacked NOT inline] down by the navigation, but the picture above?

It did NOT work on this page.

http://buildingthefourdimensionalman.com/matt-skinner-alexander-the-great/

Both are blogs!

I also updated my Secure Note information

[ruenel]

Hello Michael Anthony,

This http://buildingthefourdimensionalman.com/matt-skinner-bloody-knuckles-bright-futures/ is a post. The given JS code works because it is intended for the post.

This http://buildingthefourdimensionalman.com/matt-skinner-alexander-the-great/ is a page. The JS code did not work because it is not covered with the code.

You will have to update the code and use this instead:

(function($){
  $('.single-post .entry-featured, .page .entry-featured').insertBefore( '.single-post .x-navbar-wrap' );
})(jQuery);

Hope this helps. Please let us know how it goes.

[MichaelAnthonyMurray]

Thank you!
Is there a way to have the image NOT go the full width?

[christian]

Hey Michael,

In that case, you need to append the featured image block inside the logo container after the logo.

(function($){
  $('.single-post .entry-featured, .page .entry-featured').appendTo( '.x-logobar-inner .x-container' );
})(jQuery);

Please take note of the selectors in that code. This will not work for Inline Header Layout.

I would really recommend also that you to learn the parts of the code so you can adapt it for other needs. You can learn that from http://www.jquery.com/

Just also note that since we’re using Javascript here it is susceptible to script conflict which might render this not to work. When that happens, you can test for a plugin conflict and remove other scripts in your site.

And lastly note that this is considered as theme extension which is not a part of our support service. This should only serve as a guide. Issues that would arise from the use of this and further enhancements should be forwarded to a third party developer.

Also in the future, you might not need this because there would be a Layout Builder which will enable users to create their own archive and single post design.

Hope that helps.