X-Theme Add Full Width Responsive Image Below Masthead Without Using Sliders

Support
#1

Question,
I’m looking to add a full width image below the masthead, but before the main content. Just like the placement of the slider with but I want to add just a static responsive full width image above the h1 and breadcrumbs. Reason is I’m trying to keep my website as light as possible without adding additional scripts etc that adding a slider would achieve.

I’m using the x-theme and have a child theme in place for modifications. Just need some guidance at to how to achieve this. I’m open to using the featured image area or any custom solution. Alt tags implementation is also necessary.

My X-Theme is running the Renew stack.

Thanks for an advice you can give.

#2

Hello There,

Thanks for the very detailed post information. Because what you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

After the child theme is set up, please add the following code in your child theme’s functions.php file

// Custom Image
// =============================================================================
function add_custom_image(){ ?>
  
  <div class="custom-image x-container">
    <img  src="http://placehold.it/1200x600" alt="Custom Image" title="Custom Image"/>
  </div>

<?php }
add_action('x_after_view_global__slider-below', 'add_custom_image');
// =============================================================================

As this is all custom development, regretfully we won’t be able to assist further. Custom development is outside the scope of our support. We’re happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation.

Please let us know how it goes.

#3

Can you tell me what template(s) in the Renew stack or Global will display the following header container?

header class=“x-header-landmark”

It’s driving me crazy trying to find, this displays the h1 and breadcrumb functions.

#4

Hi There,

Its the _landmark-header.php file under the \wp-content\themes\x\framework\legacy\cranium\headers\views\renew directory. Copy it to your child theme and do your modifications there.

Cheers!

#5

I got it!
Thank you so much!!!

#6

You’re more than welcome, glad we could help.

Cheers!