Full width video in place of header image

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?


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.

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 */

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?


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' ) : ?>.

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?

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.