Full width video in place of header image


#1

Astrid is an awesome theme. Five star no doubt.

I have a query about the header image. Is it possible to have a full width video in loop or a full width slider in place of the big header image?

Thanks.


#2

No, we’re going to have something like that in the pro version when we release it.

If you’re able to code a bit you can however make a child theme, copy header.php in it and replace the header image code with whatever code you need.


#3

I just added tried adding a slider using Slider WD and it was real easy. It didn’t cause any problems with the menu, header text, or the “explore” button. I just swapped the code below from header.php with the slider php function.

<img class="large-header" src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" alt="<?php bloginfo('name'); ?>">

I also copied this css to the child theme and changed the opacity.

.header-image::after {
background-color: rgba(37, 46, 53, 0.2); /* original opacity was 0.9 */


#4

I spoke too soon. The slider lookls great until the browser window is reduced in size and the menu collapses. Then the original header image pops out below the slider.

I tried removing the image in Header area > Header Image, but that removes the slider as well. I think the slider height is also going to be a problem, because it needs to increase when the menu collapses.

Any suggestions Vlad?

Thanks.


#5

You would need to remove all the code inside the header-image div so that the mobile header image won’t be displayed.

It disappears when you remove the image because that div is shown only when a header is present <?php if ( astrid_has_header() == 'has-header' ) : ?>.


#6

Thanks. I removed the mobile code, but left the header text <?php astrid_header_text(); ?>

Unfortunately, it looks like the slider height is still a problem on small screens if I want to use the default header text. I’ll try adding it the slider, but it may be best to wait for the Pro version. Any idea when that will be?


#7

That’s why there’s a mobile header image option in Astrid. So you can add a smaller image that fits nicely with your text on small screens. Only other option for us would have been to add the image as a background rather than an <img> element but that would have caused the image to crop.

What you can do in your case is use some images with a bigger height.

Pro version will be released these days though what it will do is replace the header image with a shortcode area so it won’t use astrid_header_text() because as you said you can add your text directly into the slider and have more flexibility with positioning and stuff. It will probably also let you set a shortcode for mobile devices so you can have two properly optimized different sliders.