skip to Main Content
Our free WordPress themes are downloaded over 3 MILLION times. Get them now!

Forum Replies Created

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • in reply to: Custom Header Images on Pages #237682

    coyotemusic
    Participant

    Actually, that last CSS does get the custom images on Pages, even on mobile. But on Desktop, as you scroll-up, the Home header image ‘peeks’ out from the bottom of the header image. The custom-css image ‘catches up’ and covers the Home header image after a second, but you see it nonetheless. It’s as if the custom css needs to catch up with the site’s default parallax css. The only way around this that I can find is to comment out the header-image lines in section-header-page.php. I know that’s not the best approach, but I’ve spent days trying to get a solution in place and it’s not important enough to continue to work on. I’ll just comment out those lines in the future if/when I update the theme.

    If/When there is a theme update, I wonder if there could be a minor tweak to these lines…

    if ( get_header_image() !== '' ) {
    	echo '<div class="parallax-bg-image" data-image-source="' . get_header_image() . '"></div>';
    } else {
    	echo '<div class="parallax-bg-image" data-image-source=' . get_template_directory_uri() . '/layout/images/header-bg.jpg"></div>';
    }

    …where an additional conditional is added, so that if there’s a Feature Image on the Page entry, it gets used as the Header Image. Otherwise its defaults to Home header, then the theme’s default header image (as is currently the case).

    Thank you again for your help.

    in reply to: Custom Header Images on Pages #237667

    coyotemusic
    Participant

    I made that change, but it didn’t impact the Pages’ header image on mobile. Those still match the Home page’s header image on mobile. But, that did help! Instead of the .home class, using the class of the page does it. So I removed all other custom CSS and left the template as-is. Then in Additional CSS just need to add the following for each Page:

    .page-id-PAGE_ID .parallax-bg-image {
    background-image: url(http://domain.com/wp-content/uploads/path-to-image.png) !important;
    background-size: cover;
    }

    That covers both desktop and mobile. Thank you for taking the time to work through this!

    in reply to: Custom Header Images on Pages #237498

    coyotemusic
    Participant

    Agreed that editing the theme files directly is a bad practice. A pure CSS solution is preferrable.

    However, when I uncommented the theme file and added background-size:cover: to each page’s custom css, the Home page header replaced the custom image (again, on mobile only). That is the state of the code now if you want to take a look. I also tried adding !important to each line of custom css, but that did not affect the Page header image on mobile.

    Thanks for your continued help with this!

    in reply to: Custom Header Images on Pages #237323

    coyotemusic
    Participant

    The CSS solution works great. Thank you! As a note, however, I still needed to comment out the following code in section-header-page.php. With it in place, even using !important on the custom CSS, the Home page header image would still appear on the Pages in mobile.

    //	if ( get_header_image() !== '' ) {
    //		echo '<div class="parallax-bg-image" data-image-source="' . get_header_image() . '"></div>';
    //	} else {
    //		echo '<div class="parallax-bg-image" data-image-source=' . get_template_directory_uri() . '/layout/images/header-bg.jpg"></div>';
    //	}
    • This reply was modified 2 months, 1 week ago by  coyotemusic.
    in reply to: Custom Header Images on Pages #237152

    coyotemusic
    Participant

    Attaching a screenshot of inspector of iPhone rendering…

    Attachments:
    in reply to: Custom Header Images on Pages #237151

    coyotemusic
    Participant

    The image appearing on mobile has been the same header image as the Home page. What I’m wanting to do is have different header images on each of the other two pages. I’ve just updated section-header-page.php (around line 61) to check for specific pages by page_id, like:

    $this_page_id = get_the_ID();
    // /services
    if ( $this_page_id == 2) {
    	echo '<div class="parallax-bg-image" data-image-source=' . get_site_url() . '/wp-content/uploads/2019/07/cropped-blonde.png"></div>';
    }
    // /about
    if ( $this_page_id == 100) {
    	echo '<div class="parallax-bg-image" data-image-source=' . get_site_url() . '/wp-content/uploads/2019/07/cropped-platinum.png"></div>';
    }

    That works well for desktop, but the image doesn’t show on mobile. So, I guess I’m looking for (1) how to manually code for mobile or (2) change Page header images via the GUI (it’d be awesome if setting Featured Image would do this).

    Thanks.

Viewing 6 posts - 1 through 6 (of 6 total)
Disclosure: This page contains external affiliate links that may result in us receiving a commission if you choose to purchase mentioned product. The opinions on this page are our own and we don't receive additional bonus for positive reviews.
Back To Top