Show post title over images during rollover

Hi Misty,

This requires more than a CSS change. Check out the theme’s content.php to see how everything is generated — the title is not printed at all when an image is in place. You’ll need to change that in a child theme with a new content.php file. Then you’d use CSS to style the printed title over the image.

While we don’t offer direct CSS support in this forum, there are a number of resources here, plus you can see how it’s currently done in the theme’s style.css. I also recommend using Firebug for CSS work–makes it much easier.

Hope this helps!

content-home.php seems to have the code for creating the thumbnails:

$thumb = get_the_post_thumbnail( $post->ID, ‘post-thumbnail’, array( ‘title’ => esc_attr( get_the_title() ) ) );

$thumb = wp_get_attachment_image( $attachment->ID, ‘post-thumbnail’, false, array( ‘title’ => esc_attr( get_the_title() ) ) );

$thumb = ‘<span class=”no-thumbnail”>’ . get_the_title() . ‘</span>’;

somehow combine the code in that last one into the first two thumbnail options.

I know, logically it would seem that everything I would need is right there; but my knowledge of PHP is limited and even after spending an entire day experimenting with the code for content-home.php I was no closer.

You may be able to do something like….

$thumb = get_the_post_thumbnail( $post->ID, 'post-thumbnail', array( 'title' => esc_attr( get_the_title() ) ) ) . '<span class="no-thumbnail">' . get_the_title() . '</span>';

Which *I think* will print the image, followed by a span with the post title. Then use CSS to layer the span over the image to look how you want. Untested, but that’s where I would start.

Thanks for the effort Caroline. I appreciate it. Unfortunately I’m getting a parse error for an ‘unexpected ‘&” in that line.

Thoughts anyone?

Can you post a few lines of code so we can look?

I simply dropped in the revised code into content-home.php, so that it now reads as follows:

global $post;
$postclass = '';

if ( '' != get_the_post_thumbnail() ) {
	$thumb = get_the_post_thumbnail( $post->ID, 'post-thumbnail', array( 'title' => esc_attr( get_the_title() ) ) ) . '<span class=&quot;no-thumbnail&quot;>' . get_the_title() . '</span>';
}
else {
	$args = array(
				'post_type' => 'attachment',
				'numberposts' => 1,
				'post_status' => null,
				'post_mime_type' => 'image',
				'post_parent' => $post->ID,
			);

	$first_attachment = get_children( $args );

	if ( $first_attachment ) {
		foreach ( $first_attachment as $attachment ) {
			$thumb = wp_get_attachment_image( $attachment->ID, 'post-thumbnail', false, array( 'title' => esc_attr( get_the_title() ) ) );
		}
	}
	else {
		$thumb = '<span class="no-thumbnail">' . get_the_title() . '</span>';
		$postclass = 'no-thumbnail';
	}
}
?>

Again, my knowledge of PHP is limited, so I apologize if this was an obvious error. I’m much more confident with the styling to get the rollover effect working, but getting the post title to render is proving challenging.

This part is the culprit:

<span class=&quot;no-thumbnail&quot;>

You need to turn these:

"

back into standard double quotes. Copying/pasting converted everything to HTML entities, which caused the parse error.

Ahhhhh….so sorry, I should have caught that!

Copied the code through BBEdit first before pasting and it looks like it’s working. Post titles are rendering on the page below the images. Now just need to work on applying the CSS.

Thanks so much! It’s really going to help the navigation for our magazine.

After doing the above, I am now having trouble centering the post titles under the circle icons. Can anyone help with the CSS part?

They should be centered unless they’re long (in which case, they’ll just overflow). This was necessary in order to get them vertically aligned in the circles.

The theme wasn’t designed to be used with only post titles, so it doesn’t surprise me there are issues. You may just have to play around with it until you find the look you like. This forum does not offer CSS support, but here are some resources to get you started:

CSS
Firebug makes troubleshooting your CSS much easier

I use firebug and if I only add text-align: center to the first variables in the styles.css it works but then it switches the text on the posts and pages to be centered also. Please help! Thanks.

I’m also not just using post titles. I am using the circles but want the names of the posts below the circle not in them.

Hello i use this code:

<?php
/**
 * @package Spun
 * @since Spun 1.0
 */

/*
 * Get the post thumbnail; if one does not exist, try to get the first attached image.
 * If no images exist, let's print the post title instead.
 */

global $post;
$postclass = '';

if ( '' != get_the_post_thumbnail() ) {
	/* $thumb = get_the_post_thumbnail( $post->ID, 'post-thumbnail', array( 'title' => esc_attr( get_the_title() ) ) ); */
        	$thumb = get_the_post_thumbnail( $post->ID, 'post-thumbnail', array( 'title' => esc_attr( get_the_title() ) ) ) . '<span class="no-thumbnail">' . get_the_title() . '</span>';
}
else {
	$args = array(
				'post_type' => 'attachment',
				'numberposts' => 1,
				'post_status' => null,
				'post_mime_type' => 'image',
				'post_parent' => $post->ID,
			);

	$first_attachment = get_children( $args );

	if ( $first_attachment ) {
		foreach ( $first_attachment as $attachment ) {
			$thumb = wp_get_attachment_image( $attachment->ID, 'post-thumbnail', false, array( 'title' => esc_attr( get_the_title() ) ) );
		}
	}
	else {
		$thumb = '<span class="no-thumbnail">' . get_the_title() . '</span>';
		$postclass = 'no-thumbnail';
	}
}
?>

<article id="post-<?php the_ID(); ?>" <?php post_class( $postclass ); ?>>
	<a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php echo $thumb; ?></a>
</article><!-- #post-<?php the_ID(); ?> -->

But the home page not change, the name is not in front of the circle, what i’m doing wrong?

Thanks

@gfr77,
You can discuss that in your own thread.