[Resolved] Where can I add divs to the featured image thumbnails on custom post archive?

[Ria]

I’ve searched and experimented with no luck, so I need to ask, how I can find the actual code or create a (hook? function? action? conditional?) way to add a div around my featured image thumbs on a (custom post type) archive page?

The only place in the GP php files I’ve found <div class="post-image"> is in inc/structure/featured-images.php and it looked like this:

// If we're not on any single post/page or the 404 template, we must be showing excerpts.
		if ( ! is_singular() && ! is_404() ) {
			echo apply_filters( 'generate_featured_image_output', sprintf( // WPCS: XSS ok.
				'<div class="post-image">
					<a href="%1$s">
						%2$s
					</a>
				</div>',
				esc_url( get_permalink() ),
				get_the_post_thumbnail(
					get_the_ID(),
					apply_filters( 'generate_page_header_default_size', 'full' ),
					array(
						'itemprop' => 'image',
					)
				)
			) );
		}
	}
}

So I thought maybe it could be placed in my child theme functions.php and altered to:

//To change the styling of the archive page thumbnails for team and board posts
if ( ! is_singular( 'team') || (! is_singular( 'board') && ! is_404() )) {
			echo apply_filters( 'generate_featured_image_output', sprintf( // WPCS: XSS ok.
				'<div class="team-single-image"><span class="mug">
					<a href="%1$s">
						%2$s
					</a>
				</span></div>',
				esc_url( get_permalink() ),
				get_the_post_thumbnail(
					get_the_ID(),
					apply_filters( 'generate_page_header_default_size', 'full' ),
					array(
						'itemprop' => 'image',
					)
				)
			) );
		}

But all that did was vertically stretch out the site header area, and it didn’t touch the featured image thumbs on the posts list. I figured out that this code must have something to do with the custom page headers and not the featured image thumbnails.

The other place I found <div class="post-image"> was on line 145 in the GP Premium plugin in blog/functions/images.php but I have no idea what to do with that in regard to how to bring that into my child theme functions.php and do my thing with it.

On my cpt content-single-team.php (same as content-single.php) I see do_action( 'generate_after_entry_title' ); and do_action( 'generate_after_entry_header' ); where I’d expect to see the featured image thumb generated, but I have no idea where to go to either remove/add my own class of thumbnail on the (content-single-team.php or content-single.php) page code or create some sort of override in functions.php to add my divs.

How do I get my grubby paws on that <div class="post-image"> so I can add some more divs/spans to it? Just adding some css to the only existing class (.post-image) for these thumbnails is not going to do the trick for this layout.

GeneratePress 2.0.2

GP Premium 1.5.6

[Tom]

Hi there,

Try adding this function to your child theme:

add_filter( 'generate_featured_image_output', 'tu_change_cpt_image_structure' );
function tu_change_cpt_image_structure( $output ) {
	if ( is_singular( 'team' ) || is_singular( 'board' ) ) {
		$output = sprintf( // WPCS: XSS ok.
			'<div class="post-image">
				<a href="%1$s">
					%2$s
				</a>
			</div>',
			esc_url( get_permalink() ),
			get_the_post_thumbnail(
				get_the_ID(),
				apply_filters( 'generate_page_header_default_size', 'full' ),
				array(
					'itemprop' => 'image',
				)
			)
		);
	}

	echo $output;
}

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ria]

Hi Tom,
First, thank you so much for addressing this so quickly! I really appreciate the help.

Your code did only half the trick. I probably forgot to mention that I want the same style divs to be applied to the featured-image thumbs on the single post, as well. The code (below) made the changes to the thumbs on the archive pages but not on the single post pages. Which is confusing, since if ( is_singular('team') || is_singular('board') is in the code.

Here is what I added to my child theme functions.php :

//Give me more styling control over the featured image thumbs in cpt
add_filter( 'generate_featured_image_output', 'tu_change_cpt_image_structure' );
function tu_change_cpt_image_structure( $output ) {
	if ( is_singular('team') || is_singular('board') || is_archive('team') || is_archive('board') ) {
		$output = sprintf( // WPCS: XSS ok.
			'<div class="team-single-image"><span class="mug">
				<a href="%1$s">
					%2$s
				</a>
			</span></div>',
			esc_url( get_permalink() ),
			get_the_post_thumbnail(
				get_the_ID(),
				apply_filters( 'generate_page_header_default_size', 'full' ),
				array(
					'itemprop' => 'image',
				)
			)
		);
	}

	echo $output;
}

As I mentioned, this code is working fine for the post archive thumbs, but not for the single post thumbs. 🙁

[Tom]

Perhaps try this filter name instead: generate_single_featured_image_output

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ria]

Hi Tom,

Thanks again. Unfortunately, changing the filter name to generate_single_featured_image_output only worked on the single post featured image, but then the archive page featured image thumbs lost the style. 🙁

Is there any way to do both?

EDIT: I figured it out on my own. 🙂

I just added both filters. I’m a PHP genius! (Hahaha, no. I’m so not a PHP genius) But I stumble around and try stuff until it works. This is what I have now in my child theme functions.php that’s doing the trick:

//Give me styling control over the featured image thumbs in cpt
add_filter( 'generate_single_featured_image_output', 'tu_change_cpt_image_structure' );
add_filter( 'generate_featured_image_output', 'tu_change_cpt_image_structure' );
function tu_change_cpt_image_structure( $output ) {
	if ( is_singular('team') || is_singular('board') || is_archive('team') || is_archive('board') ) {
		$output = sprintf( // WPCS: XSS ok.
			'<div class="team-single-image"><span class="mug">
				<a href="%1$s">
					%2$s
				</a>
			</span></div>',
			esc_url( get_permalink() ),
			get_the_post_thumbnail(
				get_the_ID(),
				apply_filters( 'generate_page_header_default_size', 'full' ),
				array(
					'itemprop' => 'image',
				)
			)
		);
	}

	echo $output;
}

Thanks again, Tom! GP is the best.

[Tom]

Great job! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts