metaslider twentyseventeen header

Hi @cat5,

Can you share a link to the site or a screenshot better showing the issue?

Hi @kbat82,
Thank you for replying
The site is under construction.

Here’s a link to the screen shot. The images need to run behind the logo.
https://screenshots.firefox.com/3qBnqRNex0gYf40G/www.bestmedellinpenthouse.com

The landing page is here. With the metaslider working
https://screenshots.firefox.com/nwxEKgWgp5m06eKX/www.bestmedellinpenthouse.com

If you link to the twentyseventeen theme you will see what I mean when you click on a top menu item.
https://wordpress.com/theme/twentyseventeen/writing101june2014.wordpress.com
here’s the screen shot:
https://screenshots.firefox.com/DzwTgKZETjLD8V9J/wordpress.com

Hi @cat5

You might have to adjust this a bit, but if you add the MetaSlider code to this page it should replace the existing image.

/twentyseventeen/2.0/template-parts/header/header-image.php

https://themes.trac.www.ads-software.com/browser/twentyseventeen/2.0/template-parts/header/header-image.php

Replace this line with your MS code
<?php the_custom_header_markup(); ?>
to
<?php echo do_shortcode(‘[metaslider id=”xx”]’); ?>

Does that make sense?

Sorry for the delay @kbat82
Yes, that is what I did originally and everything from Metaslider said that was the correct file.
But I still get just the background color and no image.
Do you think it might be a css issue?
thank you for your help!

Hi @cat5,

I think I would have to see the site live at this point so I could check the source code and see exactly what’s going on. The slideshow should still load even if it’s in the wrong place. If you don’t want to share the link publicly you can send a message to our off-site support and just mention my name and someone will assign it to me (I code MetaSlider, by the way).

https://www.metaslider.com/support/

Hi @kbat82
Thank you. I will message you on metaslider’s support. The website is not ready to go live since some of the images still need to be purchased.
very much appreciate your help.
Catherine

Hi @kbat82
Doesn’t look like I can use that support form since I don’t have a Purchase id. I’m using the free version.

• This reply was modified 6 years ago by cat5.

https://www.bestmedellinpenthouse.com/
You can see the site live now @kbat82

Hi @cat5

You should be able to get through the form without the purchase ID but it’s fine here as well. Basically WP 2017 theme only has the large header on the front page. That’s not a bug but is a feature (by design). However, if you want to override that functionality, you can probably just fake the theme stylesheet into thinking you’re on the front page on every page.

Add this to functions.php file:

add_filter( 'body_class', function ($classes) {
	if (!is_front_page()) {
		$classes[] = 'twentyseventeen-front-page'
		$classes[] = 'has-header-image';	
	}
	return $classes;
}

And if you have a large gap, you might need to additionally add this to a custom stylesheet somewhere (maybe use a plugin to add CSS styles)

.single-featured-image-header {
    position: relative;
}

Hi @kbat82
thanks for the code. It does change the dynamic slide up of the links which is what is attractive about the twentyseventeen theme. Now when you click on the menu links the user can’t see new page. So it looks like nothing has happened. When you scroll down you see you are on a new page.

Hi @cat5,

That’s right. you would need to customize the rest to match the design and functionality you want to achieve. For example, you could add styling to the navigation to show the user which page you’re on, or you could load in a different slideshow too. Let me know if you have any more questions.

Hi @kbat82
https://screenshots.firefox.com/xrx3PEGpRXN8fKNK/www.bestmedellinpenthouse.com

I did fix it. We don’t want to change the functionality of the theme with regards to the front-page or the dynamic function of the navigation.
I changed the code in the header-image file rather than replace it as you suggested and the metaslider instructions tell you to do. I kept the custom_header_markup and added the echo out the shortcode.

     <?php the_custom_header_markup(); 
	      {
		   echo do_shortcode('[metaslider id="448"]');}

		?>

Thank you for taking the time to help me!

Hi @cat5,

Great you got it working how you want now! Also, if you need to restrict the slideshow to only the homepage you can add the restrict_to=”home” attribute to the shortcode:

echo do_shortcode(‘[metaslider restrict_to=”home” id=”448″]’);