WordPress.org

Forums

Customizr
[resolved] Display post Featured Image below title. (16 posts)

  1. Wumakudu
    Member
    Posted 8 months ago #

    Hello,
    I'm tired of searching how to display Featured Post Image below the post title and date/publicated by...

    i jus want all my post to be like this:

    POST TITLE
    PUBLICATED BY ... ON ... ETC
    FEATURED IMAGE

    Where i must add and what code to display this image?

  2. Wumakudu
    Member
    Posted 8 months ago #

    Ok i resolved it with this cos added to functions.php

    add_filter( 'tc_content_headings_separator', 'my_extra_image' );
    function my_extra_image() {
    if ( has_post_thumbnail() ) { // check if the post has a featured image assigned to it.
    echo '<hr class="featurette-divider">';
    echo the_post_thumbnail();
    }
    }

    but it looks not so good that i thought:)

    anyone knows how to do this like this:

    ------------------| POST TITLE
    ..................|Ce billet a été publié dans le July 31, 2014 par..
    ..................|
    .IMAGE......|
    ..................|
    -------------------

    THANKS!

  3. ElectricFeet
    Member
    Posted 8 months ago #

    Just add extra html to the first echo line and/or echo another line of html afterwards.

  4. Wumakudu
    Member
    Posted 8 months ago #

    @ElectricFeet

    I'm unable to do this ;/ Could you explain this to me, or insert ready code here?
    I would be very grateful!

  5. ElectricFeet
    Member
    Posted 8 months ago #

    Not really, because it's not at all clear how you want it to look.

  6. Wumakudu
    Member
    Posted 8 months ago #

    Image (first) on the left of the page, then post title and below post title date etc :) Images are like rectangle longer line at the side.

  7. Wumakudu
    Member
    Posted 8 months ago #

    No one knows how to move post thumbnail/featured image of post from below of title to the left of the title? (the same line)
    That's the last my problem;/

  8. Andrew
    Forum moderator
    Posted 8 months ago #

    Please take the advice and provide more illustrative examples of what you want. If you think nobody knows the answer don't just ask if people do, instead improve your explanation of the problem.

  9. Wumakudu
    Member
    Posted 8 months ago #

    Here's picture explaining what i want to do.

    http://i44.photobucket.com/albums/f28/Wumakkudu/posthow_zps24daaf36.png

    The first thing i made with code:

    add_filter( 'tc_content_headings_separator', 'my_extra_image' );
    function my_extra_image() {
    if ( has_post_thumbnail() ) { // check if the post has a featured image assigned to it.
    echo '<hr class="featurette-divider">';
    echo the_post_thumbnail();
    }
    }

    Now i want all my posts to be like on the right of the screen.

  10. deputy05
    Member
    Posted 8 months ago #

    Here's picture explaining what i want to do...Now i want all my posts to be like on the right of the screen.

    Maybe I missed something...isn't this the default behavior of Customizr out-of-the-box?..where they alternate left and right. To keep them all left, see this snippet.

  11. nikeo
    Member
    Theme Author

    Posted 8 months ago #

    Hi @wumakudu, there's a recent snippet explaining how to change the post layout : content + thumbnails in all post lists of your Customizr website.
    Hope this will help!

  12. ElectricFeet
    Member
    Posted 8 months ago #

    I think @wumakudu is talking about having a featured image showing on the single posts, not the post list (I'm inferring this from the fact that he/she used the 'tc_content_headings_separator' hook).

    acub did some work on this here.

  13. Wumakudu
    Member
    Posted 8 months ago #

    Like ElectricFeet said i'm talking about showing featured image on the single posts :)
    i saw what acub wrote, but still don't know how to edit my code... it's tiring ;/

  14. ElectricFeet
    Member
    Posted 7 months ago #

    OK, here's the code to output a featured image on pages and single posts, as per your diagram. To be posted in the functions.php file of your child theme:

    // ============================================================ //
    // Add thumbnail (where available) before title on pages and    //
    // and single posts. Change span2 and span10 (in two places)    //
    // to change layout (spans must add up to 12)                   //
    // ============================================================ //
    
    // Add the thumbnail before the content title
    add_action( '__before_content_title' , 'my_extra_thumbnail_on_posts_and_pages', 5);
    function my_extra_thumbnail_on_posts_and_pages() {
    	if ( is_singular()  && has_post_thumbnail() ) {
    
    		ob_start();
    			echo '<div class="span2 my-extra-thumbnail" style="display: inline-block;vertical-align:top;">';
    
    					the_post_thumbnail();
    
    			echo '</div>';
    
    		$image = ob_get_contents();
    
    		ob_end_clean();
    
    		echo $image;
    	}
    
    }
    
    // Add row-fluid class to the page header, in order to add bootstrap span classes to thumbnail and heading/meta
    add_filter( 'tc_content_header_class', 'my_content_header_class' );
    function my_content_header_class($content_header_class) {
    	if ( is_singular()  && has_post_thumbnail() ) {
    
    		$content_header_class = $content_header_class . ' row-fluid';
    
    	}
    
    	return $content_header_class;
    
    }
    // Add a bootstrap span class to the page title when on a single blog entry or a page -- bit of a hack, as it latches on to the code to add the format-icon class
    add_filter( 'tc_content_title_icon', 'my_content_title_icon' );
    function my_content_title_icon($icon_class) {
    	if ( is_singular()  && has_post_thumbnail() ) {
    
    		$icon_class = $icon_class . ' span10';
    
    	}
    
    	return $icon_class;
    
    }
    
    // add a bootstrap span class to post metas when on a single blog entry or a page
    add_filter( 'tc_post_metas', 'my_post_metas' );
    function my_post_metas($html) {
    	if ( is_singular()  && has_post_thumbnail() ) {
    
    		$html = str_replace('<div class="entry-meta">', '<div class="entry-meta span10">', $html);
    
    	}
    
    	return $html;
    
    }
    
    // ============================================================ //
    // End of post/page thumbnail code                              //
    // ============================================================ //

    You can change the proportion of the page that the image takes up by changing span2/span10 to span3/span9 etc. As long as they add up to 12.

    The image that is output is the small thumbnail image. If you want a larger version output, then you need to add a parameter to the the_post_thumbnail() function above. You can choose from thumbnail (the default), or medium, large, or full. For example, to output a medium image (300px x 300px in Customizr), use the_post_thumbnail('medium') instead of the_post_thumbnail() above.

    Once you've added the image, you might want to also remove the <hr> separator under it. You can do this with the following in your functions.php file:

    add_filter( 'tc_content_headings_separator', 'remove_content_headings_separator' );
    function remove_content_headings_separator($content_headings_separator) {
    	if ( is_singular()  && has_post_thumbnail() ) {
    
    		$content_headings_separator = '';
    
    	}
    
    	return $content_headings_separator;
    
    }
  15. Wumakudu
    Member
    Posted 7 months ago #

    Wow, wow, wow! It works!! Thanks for everything.
    @ElectricFeet You are the best!

    Topic resolved.

  16. ElectricFeet
    Member
    Posted 7 months ago #

    :-) Great!

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.