WordPress.org

Ready to get started?Download WordPress

Forums

Spun
[closed] Show post title over images during rollover (18 posts)

  1. mkericson
    Member
    Posted 1 year ago #

    Hi there,

    When rolling over the homepage images, we would like to have the post title render on the dark gray circle as it does when there is no image at all. I'm assuming this can be done with CSS, but unfortunately I haven't kept up to date on how such things are achieved. I thought it would be faster to simply ask.

    With thanks,
    Misty

  2. Caroline Moore
    Member
    Theme Author

    Posted 1 year ago #

    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!

  3. cheerioboy
    Member
    Posted 1 year ago #

    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.

  4. mkericson
    Member
    Posted 1 year ago #

    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.

  5. Caroline Moore
    Member
    Theme Author

    Posted 1 year ago #

    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.

  6. mkericson
    Member
    Posted 1 year ago #

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

    Thoughts anyone?

  7. Caroline Moore
    Member
    Theme Author

    Posted 1 year ago #

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

  8. mkericson
    Member
    Posted 1 year ago #

    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.

  9. Caroline Moore
    Member
    Theme Author

    Posted 1 year ago #

    This part is the culprit:

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

    You need to turn these:

    &quot;

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

  10. mkericson
    Member
    Posted 1 year ago #

    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.

  11. nick0604@msn.com
    Member
    Posted 1 year ago #

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

  12. Caroline Moore
    Member
    Theme Author

    Posted 1 year ago #

    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

  13. nick0604@msn.com
    Member
    Posted 1 year ago #

    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.

  14. nick0604@msn.com
    Member
    Posted 1 year ago #

    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.

  15. gfr77
    Member
    Posted 1 year ago #

    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

  16. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  17. tracyselena2
    Member
    Posted 1 year ago #

    Hi, I am trying to get this to work as well. I am not a javascript or css expert although I can get by. I've added this:

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

    to the content-home.php file

    and it's showing the titles underneath the circles.

    to me it makes logical sense that the code is doing this:

    if no thumbnails
    put title
    if thumbnail
    put thumbnail
    endif

    i'm not sure but to me it makes more send to edit something in this part of the code as well:

    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(); ?> -->

    or maybe I'm just missing something altogether.

  18. Andrew
    Forum Moderator
    Posted 1 year ago #

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.