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

[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

[Tom]

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 🙂

[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.

[Tom]

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

Let me know 🙂

[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

[Tom]

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

[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’;
} );

[Tom]

Instead of generate_before_content, try generate_before_main_content.

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

[Tom]

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

.page-hero {
    margin-left: -50px;
    margin-right: -50px;
    margin-top: -10px;
}

[Author]

Posts