Blog page listing displays Post Title after the Photo

5 Replies ·

  1. The Stargazer Blog Page lists most of my 800 posts (that are in the Standard Format) as follows:

    Photo
    Post Title
    byline such as Marcus Tibesar February 28, 2015 0
    Excerpt

    I would like to display the blog listing in a ‘more conventional’ format for the Standard Format as follows:

    Post Title
    byline
    Photo
    Excerpt

    What are the necessary changes that must be made to effect these changes please?

    http://tibesar.com (If needed, please register to gain access.)

  2. Justin Tadlock

    You’ll need to copy `content/content.php` and place it in a `/content` folder in your child theme. I’d recommend changing this new file to `post.php` if you only want it to overwrite blog posts. If you don’t have any custom post types, changing the name probably doesn’t matter though.

    Open te file to edit it and scroll down to below this line:

    `

    `

    You should see this line just below it:

    `
    ‘stargazer-full’, ‘order’ => array( ‘featured’, ‘attachment’ ) ) ); ?>
    `

    Cut and paste it after this line:

    `


    `

  3. Marcus Tibesar

    Hello Justin,

    Last night I found a 6-month old Post where you had written the following code and css.
    I then inserted this code into my child theme’s functions.php file. It now displays these pages in a more conventional format (thumbnail floating left with the Title, byline and Excerpt listed to the right of the thumbnail in 3 rows). This seems to be a better layout for my Home, Blog and Category Pages. I also ran the Regenerate Thumbnails plugin and created new thumbnails (338px wide by 228px high). I then added your custom css to the child theme.

    (Added to functions.php)

    `
    add_filter( ‘get_the_image_args’, ‘my_get_the_image_args’ );

    function my_get_the_image_args( $args ) {
    global $_my_post_count;

    $_my_post_count++;

    if ( ( is_home() || is_category() ) && 1 === $_my_post_count && ‘stargazer-full’ === $args[‘size’] ) {

    $args[‘size’] = ‘full’; // or ‘stargazer-full’ to use the theme-defined size
    }

    elseif ( ( is_home() || is_category() ) && 1 < $_my_post_count && 'stargazer-full' === $args['size'] ) {

    $args['size'] = 'thumbnail';
    }

    return $args;
    }'
    `

    Custom CSS:

    `
    '/* Float thumbnails to the left */
    @media only screen and ( min-width: 700px ) {
    .thumbnail,
    .post-thumbnail {
    float: left;
    max-width: 33%;
    margin: 0 0 1.5rem 1.5rem;
    padding-right: 20px;
    }
    }'
    `

  4. Justin Tadlock

    For code to appear correctly, you must post it between backtick characters. The backtick key is just below `Esc` on most keyboards. I tried to fix it for your post, but some of the characters got converted when you first submitted it.

  5. Marcus Tibesar

    Ooooops!

    Here is that code again Justin:

    /* Home Blog and Category Pages featured images follows - WRITTEN BY JUSTIN */
    add_filter( 'get_the_image_args', 'my_get_the_image_args' );
    
    function my_get_the_image_args( $args ) {
    	global $_my_post_count;
    
    	$_my_post_count++;
    
    	if ( ( is_home() || is_category() ) && 1 === $_my_post_count && 'stargazer-full' === $args['size'] ) {
    
    		$args['size'] = 'full'; // or 'stargazer-full' to use the theme-defined size
    	}
    
    	elseif ( ( is_home() || is_category() ) && 1 < $_my_post_count && 'stargazer-full' === $args['size'] ) {
    
    		$args['size'] = 'thumbnail';
    	}
    
    	return $args;
    }'
    
    Custom CSS:

    /* Float Home News and Category Pages thumbnails to the left */
    @media only screen and ( min-width: 700px ) {
    .thumbnail,
    .post-thumbnail {
    float: left;
    max-width: 33%;
    margin: 0 0 1.5rem 1.5rem;
    padding-right: 20px;
    }
    }`

  6. Marcus Tibesar
    /* Float Home News and Category Pages thumbnails to the left */
    @media only screen and ( min-width: 700px ) {
    	.thumbnail,
    																																											.post-thumbnail {
    		float: left;
    		max-width: 33%;
    		margin: 0 0 1.5rem 1.5rem;
    		padding-right: 20px;
    	}
    }