Full width slider on home page

[jphipps]

I would like to have a full width slider on the home page – http://rooftops.com – similar to this – http://rooftops.com/new-slider-test/

Would like this below nav and above standard format of body and right sidebar.

How do I set this up?

Thanks.

Topic

[Jason Bobich]

Hi,

1. When you say “full width” do you mean up above the sidebar + content, full-width of the layout container? If so, then you’ll use the layout builder to construct the page, and then you’ll put your slider in the “Featured Area” of the layout. Checkout the videos in your docs about the layout builder, and will explain how this works.

2. If when you say “full-width” you mean full-width of of the browser window, there is no feature in the theme for this. A plugin like Revolution Slider will allow you to do this, though. If using this plugin, it’s best to use the Columns element, set it to one column, and then put their shortcode usage within the content like [rev_slider foo] — the plugin has some feature to force the slider full-screen.

[jphipps]

I have setup the slider at the top of the page above the content (with sidebar – right). This works fine on a desktop but on an iPhone it is incorrect.

iPhone with the slider template in place – http://postimg.org/image/g4jpo1697/
iPhone with default template (no slider) – http://postimg.org/image/4qx6ctvqj/

I am using a template with a 1 column setup (100%) for the slider within Raw Content in the Featured Above, Primary Area uses Current Page Content.

Why is the template not working as responsive should?

Thanks.

[Jason Bobich]

How are you putting the YouTube video in there?

[jphipps]

Standard YouTube Embed code. I have reduced the size in order to make it work with the setup but there is obviously something that is not working right on the responsive stuff. My only thought is I should use some other format than 1 column setup….

[Jason Bobich]

By default, the embed code you’re pasting from YouTube isn’t going to be responsive. In WordPress there’s something called oEmbed, which is how you want to be embedding your videos into pages and posts. It works by simply placing the URL to the YouTube video page in your content, which would be https://www.youtube.com/watch?v=HQAjI4ZcPgo

More Info: https://codex.wordpress.org/Embeds

This way, WordPress handles embedding the video for you. This is beneficial because it means the themes and plugins have a chance to hook in and manipulate the output. In this case, the theme filters in and is able to make your YouTube video responsive.

This feature of WordPress does not work, by default, in the raw content textarea of a column element in the layout builder. There are two ways you can get around this:

Option 1: You can put your content within another page. Then within the column select to include content from external page.

Option 2: You can enable the feature within the raw content textarea by adding this to your child theme’s functions.php:

add_filter( 'themeblvd_the_content', array( $GLOBALS['wp_embed'], 'run_shortcode' ), 8 );
add_filter( 'themeblvd_the_content', array( $GLOBALS['wp_embed'], 'autoembed'), 8 );

[jphipps]

Thanks so much, Jason…

[Author]

Replies