[Resolved] Page header image and Featured image conflict

[Paul]

Hey Tom.

Somewhat related to the discussion here: https://generatepress.com/forums/topic/make-a-full-feature-out-of-full-page-image-headers-with-titles/#post-152325

… and another conversation we’ve had.

This request is simpler.

If I set the Pager hader image, hard crop and fixed height of 300px, the image is displayed perfectly on the single post page, cropped etc.

If I then check the “Add to blog excerpt (if no Featured Image is set)” checkbox, the same cropped image is shown on the blog index.

PERFECT!

However, a lot of third-party plugins, like the “Recent Posts Widget With Thumbnails” plugin, looks at either the featured image or images in the post.

Of course, I use neither. I am using the Page header image.

When I set the featured image on the blog post, the single post display works correctly, still cropping the image per the page header image settings.

But the image on the blog index is now the full (featured) image, and no longer respects the cropping settings in the page header image.

Is there something small I can tweak in my child template to stop GP from using the featured image when there is already a page header image set? (thus leaving the featured image only for other plug-ins that can’t see your custom image).

As an aside, while I absolutely LOVE the GeneratePress Theme, and your first-class support, having custom image fields like this, instead of just utilizing the featured image, will always create this sort of contention/problem. In the re-write of page header, it would be good to utilize the featured image media with the crop settings etc. Just a thought…

Cheers; Paul.

[Tom]

Hi Paul,

There wasn’t, but now there is.

I just added a filter that will allow you to force the usage of the custom field: generate_post_image_force_featured_image

This will only work in GP Premium 1.2.80 (shoot me an email to grab the latest).

add_filter( 'generate_post_image_force_featured_image','generate_post_image_force_featured_image' );
function generate_post_image_force_featured_image()
{
	global $post;
	$page_header_add_to_excerpt = get_post_meta( $post->ID, '_meta-generate-page-header-add-to-excerpt', true );
	if ( $page_header_add_to_excerpt !== '' )
		return false;
	
	return true;
}

Adding PHP: https://generatepress.com/knowledgebase/adding-php-functions/

Then this CSS:

.page-header-post-image + .post-image {
 	display: none;   
}

Adding CSS: https://generatepress.com/knowledgebase/adding-css/

having custom image fields like this, instead of just utilizing the featured image, will always create this sort of contention/problem. In the re-write of page header, it would be good to utilize the featured image media with the crop settings etc. Just a thought…

100% agreed – the re-write will make full usage of the featured image field and phase out the custom field 🙂

[Paul]

Bloody marvelous, as always.

Will send you an email to get my hands on 1.2.80.

Thanks again, Tom!

[Tom]

Sent 🙂

[Paul]

Ok Tom.

That almost worked.

After installing 1.2.80 and adding the filter and CSS you suggested, I was now getting BOTH images. Large then cropped.

Here’s the markup that was generated:

<div class="inside-article">
    <div class="post-image">
        <a href="http://proteinpalate.com/2016/02/28/protein-spice-cake/" title="Protein Spice Cake">
            <img width="3648" height="2736" src="http://proteinpalate.com/wp-content/uploads/2016/02/P1311098.jpg" class="attachment-full size-full wp-post-image" alt="Protein Spice Cake" itemprop="image" srcset="http://proteinpalate.com/wp-content/uploads/2016/02/P1311098-300x225.jpg 300w, http://proteinpalate.com/wp-content/uploads/2016/02/P1311098-768x576.jpg 768w, http://proteinpalate.com/wp-content/uploads/2016/02/P1311098-1024x768.jpg 1024w, http://proteinpalate.com/wp-content/uploads/2016/02/P1311098.jpg 3648w" sizes="(max-width: 3648px) 100vw, 3648px"/>
        </a>
    </div>
    <div class="post-image page-header-post-image">
        <a href="http://proteinpalate.com/2016/02/28/protein-spice-cake/" title="Protein Spice Cake">
            <img width="1100" height="300" src="http://proteinpalate.com/wp-content/uploads/2016/02/P1311098-1100x300.jpg" class="attachment-1100x300x1 size-1100x300x1" alt="Protein Spice Cake" itemprop="image"/>
        </a>
    </div>
    <header class="entry-header">
        <h2 class="entry-title" itemprop="headline">
            <a href="http://proteinpalate.com/2016/02/28/protein-spice-cake/" rel="bookmark">Protein Spice Cake</a>
        </h2>
        <div class="entry-meta">
            <span class="posted-on">
                <a href="http://proteinpalate.com/2016/02/28/protein-spice-cake/" title="11:23 pm" rel="bookmark">
                    <time class="entry-date published" datetime="2016-02-28T23:23:35+00:00" itemprop="datePublished">February 28, 2016</time>
                </a>
            </span>
            <span class="byline">
                <span class="author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author">by 
                    <a class="url fn n" href="http://proteinpalate.com/author/jcthiel/" title="View all posts by Joelle Thiel" rel="author" itemprop="url">
                        <span class="author-name" itemprop="name">Joelle Thiel</span>
                    </a>
                </span>
            </span>
        </div>
        <!-- .entry-meta -->
    </header>
    <!-- .entry-header -->
    <div class="entry-content" itemprop="text">
        <h2>At the moment, cooking in my house tends to be a bit tricky, with me closely counting macros to lose fat and my husband in a bulking phase. &nbsp;I love to bake, and this cake works for both our diets.</h2>
        <p class="read-more-container">
            <a class="read-more content-read-more" href="http://proteinpalate.com/2016/02/28/protein-spice-cake/">Read more…</a>
        </p>
    </div>
    <!-- .entry-content -->
    <footer class="entry-meta">
        <span class="cat-links">
            <span class="screen-reader-text">Categories </span>
            <a href="http://proteinpalate.com/category/dessert/" rel="category tag">Dessert</a>
        </span>
        <span class="tags-links">
            <span class="screen-reader-text">Tags </span>
            <a href="http://proteinpalate.com/tag/cinnamon/" rel="tag">cinnamon</a>, 
            <a href="http://proteinpalate.com/tag/protein-powder/" rel="tag">protein powder</a>, 
            <a href="http://proteinpalate.com/tag/raisins/" rel="tag">raisins</a>
        </span>
        <span class="comments-link">
            <a href="http://proteinpalate.com/2016/02/28/protein-spice-cake/#respond">Leave a comment</a>
        </span>
    </footer>
    <!-- .entry-meta -->
</div>

As you can see, only your cropped image gets the class page-header-post-image. So the selector as written doesn’t select the featured image.

I changed the CSS selector as follows, and it works. Can you confirm that’s the best approach?

.inside-article div.post-image:first-of-type {
    display: none;   
}

I always try to be as specific as possible with CSS as I am never sure what else will be swept up in my selectors!

What do you think?

[Tom]

Can’t see anything wrong with that CSS, glad it’s working! 🙂

[Author]

Posts