[Resolved] Background image w/ category title overlay on category archives

Home Forums Support Background image w/ category title overlay on category archives

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #911455
    Eric

    I am trying to replace the default h1 titles on category archives with a custom background image with the category title as a text overlay. I’ve set this up for blog posts but I can’t figure out how to do it on category archives.

    I duplicated my posts header element and replaced {{post_title}} with {{post_terms.taxonomy}}, to be displayed on the specified category archive, but that didn’t work. It’s adding the image above each blog post listed on the category archive, and it’s not showing the category name in the overlay. I’ve searched the forum for “get_the_archive_title” but I’m still stuck.

    Thanks,
    Eric

    #911565
    Tom
    Lead Developer
    Lead Developer

    Hi Eric,

    What if you keep {{post_title}} in your Element for the category? That should remove the default title, and should include the category name on the background image.

    Let me know πŸ™‚

    #911584
    Eric

    Thanks, that put the category title on the image, but the image is showing above each blog post listed on my category archive, rather than just at the top of the content section.

    #912283
    Tom
    Lead Developer
    Lead Developer

    Which image? Any chance you can point me to a specific page where I can see the issue?

    Let me know πŸ™‚

    #912679
    Eric

    The background image … See here: http://www.ericsturgeon.com/blog/category/maine/katahdin/

    The background image is being repeated above very post and I just wanted it to be the header of the category, replacing the standard h1 title. I created this as a header element, to be displayed on the “post category archive” that I specified. Also, is there a way to create padding space above and below the background image? Would I have to create a separate hook to do that?

    Thanks!
    Eric

    #913456
    Tom
    Lead Developer
    Lead Developer

    Are you using a function to move the Page Hero? It looks like it’s been added to generate_before_content?

    #913848
    Eric

    Yes, I did. I followed these directions to move my posts header within the content area rather than above it. This was in a previous version of GP Premium. Not sure if its still necessary? I tried deactivating the function but then the posts header went above the content area and overlapped part of my site header / navigation.

    1. Open wp-content/plugins/gp-premium/elements/class-hero.php and find this line:

    add_action( ‘generate_after_header’, array( $this, ‘build_hero’ ), 9 );

    2. Replace it with this:

    $location = apply_filters( ‘generate_page_hero_location’, ‘generate_after_header’, $post_id );

    add_action( $location, array( $this, ‘build_hero’ ), 9 );
    3. Then you could add a custom function like this:

    add_filter( ‘generate_page_hero_location’, function() {
    return ‘generate_before_content’;
    } );

    #914489
    Tom
    Lead Developer
    Lead Developer

    Instead of generate_before_content, try generate_before_main_content.

    #914572
    Eric

    That worked, almost!

    The only issue I’m still having is that the featured image is now slightly wider than the content area. This is now happening on all posts as well as the category where I added the background image. I tried changing my media max width from 768px in the CSS but that didn’t change anything.

    http://www.ericsturgeon.com/blog/category/maine/katahdin/

    #914829
    Tom
    Lead Developer
    Lead Developer

    That’s happening because of this custom CSS you’ve added:

    .page-hero {
        margin-left: -50px;
        margin-right: -50px;
        margin-top: -10px;
    }
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.