Project Image as header image only for certain categories

Hi athemes team,

I’ve got a question on the images in the post type “projects”. In the customizer I set the project image to be displayed as header image. But for one certain project category, I would like not to set the featured image as header image.

Is there an easy way to achieve this?
Maybe with CSS somehow activate the standard header image for a certain category?

Thank you.

Hello there,

Thank you for contacting us about our theme Sydney Pro. I am happy to help out.

You can try this jQuery code solution for that purpose.

The only adjustment you will need to do apart from the image address is the body class name attached on the category page. You can find it with the help of the web browser’s inspector tool. Please share the link your project category page in case you can’t locate the correct body class name. I am very happy to help.

Stay safe.
Have an excellent day :slight_smile:

Regards,
Kharis
aThemes Support

I also tried the plugin “Unique Headers”, but this did not work too.

Hello there,

To set new header image on this page, you can try these steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    jQuery(function($) {

      if( $('body').hasClass('postid-18564') ) {

        var newImage = 'https://www.biosphaerenpark.eu/wp-content/uploads/biosphaerenpark-fexen-referenten-partner.jpg';

        if( $('.header-image').length ) {

          $('.header-image').css('background-image', 'url(' + newImage + ')');

          $('.header-inner').attr('src', newImage);
          
        }
      
      }

    });
  1. Update

Regards,
Kharis
aThemes Support

Hello,

Thank you for trying to help.
Your solution is only changing the header image for this post, not for all posts in this category.

But I tried to modify the code, and now it is working:

jQuery(function($) {
      if( $('article').hasClass('category-yourcategory') ) {
        var newImage = 'https://www.your-domain.com/your-image.jpg';
        if( $('.header-image').length ) {
          $('.header-image').css('background-image', 'url(' + newImage + ')');
          $('.header-inner').attr('src', newImage);
        }
      }
});

Hello there,

Glad to know that the code worked for you with some adjustments. Thank you for sharing your final code. I really appreciate it.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support