ThemeShaper Forums » Thematic

[closed]

Placing thumbnail before entry-title instead of after entry-meta.

(2 posts)
  • Started 3 years ago by Direct Sponsor
  • Latest reply from Direct Sponsor
  • This topic is resolved
  1. Post thumbnails float left of post excerpts. I want to instead place it before the post title in a column (div) of it's own to prevent text from wrapping underneath it.

    Please refer to this basic illustration to quickly understand what I wish to achieve:
    http://img816.imageshack.us/img816/7194/thematic1.png

    I've created the following Frankenstein code (much of which is probably unnecessary or flat out wrong e.g. it positions the thumbnail correctly but doesn't float it):

    //Float thumbnail to left of entry-title.
    function my_postheader($postheader) {
    
    //Only for template-home.php.
    if (is_page('Home')) {
    
    //Post title.
    $posttitle = '<h2 class="entry-title"><a href="';
    $posttitle .= apply_filters('the_permalink', get_permalink());
    $posttitle .= '" title="';
    $posttitle .= __('Permalink to ', 'thematic') . the_title_attribute('echo=0');
    $posttitle .= '" rel="bookmark">';
    $posttitle .= get_the_title();
    $posttitle .= "</h2>\n";
    
    //Excerpt and meta.
    $post = '';
    $post .= get_the_excerpt();
    $post = apply_filters('the_excerpt',$post);
    $postmeta = '<div class="entry-meta">';
    $postmeta .= thematic_postmeta_entrydate();
    $postmeta .= ' ';
    $postmeta .= thematic_postmeta_authorlink();
    $postmeta .= '.';
    //$postmeta .= thematic_postmeta_editlink();
    $postmeta .= "</div><!-- .entry-meta -->\n";
    
    //Thumbs.
    if ( apply_filters( 'thematic_post_thumbs', TRUE) ) {
    $post_title = get_the_title();
    $size = apply_filters( 'thematic_post_thumb_size' , array(100,100) );
    $attr = apply_filters( 'thematic_post_thumb_attr', array('title'	=> 'Permalink to ' . $post_title) );
    if ( has_post_thumbnail() ) {
    $ph = $postheader;
    $postheader = '<div style="float:left;"><a href="' . get_permalink() . '" title="Permalink to ' . get_the_title() . '">' . get_the_post_thumbnail(get_the_ID(), $size, $attr) . '</a></div><div style="float:right;">' .$posttitle.$postmeta.$post.'</div>';
    $postheader .= $ph;
    return $postheader;
    }
    }
    }
    }
    add_filter('thematic_postheader', 'my_postheader');

    Is there a neater/easier way of repositioning the thumbnail before the post title and in a column of it's own (i.e. so the text doesn't wrap).

    Posted 3 years ago #
  2. I've finally got it working by copying and pasting two large chunks of code from content-extensions.php and making a few minor edits using childtheme_override_postheader_posttitle and childtheme_override_content.

    I was trying to streamline my code using an action or a filter but after a few hours of searching with very little success I opted for the copy and paste approach:

    1. I created a childtheme_override_postheader_posttitle() function in functions.php and copy and pasted in the thematic_postheader_posttitle() function from content-extensions.php | Line 660.
    2. I created a childtheme_override_content() function in functions.php and copy and pasted in the thematic_content() function from content-extensions.php | Line 805.

    Here's my code that adds a thumbnail to the post title and displays the post title as inline so it wraps around the thumbnail (it also adds makes the post title on pages into permalinks):

    //Add thumbnail to post title.
    function childtheme_override_postheader_posttitle() {
    
    		if (is_single()) {
    	        $posttitle = '<h1 class="entry-title">' . get_the_title() . "</h1>\n";
    	    }
    		//Customized this so the title isn't static on pages since all pages use a custom template i.e. it highlights and permalinks.
    		elseif (is_page()) {   
    
    		    if ( apply_filters( 'thematic_post_thumbs', TRUE) ) {
    			     $post_title = get_the_title();
    			     $size = apply_filters( 'thematic_post_thumb_size' , array(100,100) );
    			     $attr = apply_filters( 'thematic_post_thumb_attr', array('title'	=> 'Permalink to ' . $post_title) );
    			     if ( has_post_thumbnail() ) {
    			          $post = '<a href="' . get_permalink() . '" title="Permalink to ' . get_the_title() . '">' . get_the_post_thumbnail(get_the_ID(), $size, $attr) . '</a>';
    				 }
    			}
    		    $posttitle = $post;
    	        $posttitle .= '<h2 class="entry-title" style="display:inline;"><a href="';
    	        $posttitle .= apply_filters('the_permalink', get_permalink());
    	        $posttitle .= '" title="';
    	        $posttitle .= __('Permalink to ', 'thematic') . the_title_attribute('echo=0');
    	        $posttitle .= '" rel="bookmark">';
    	        $posttitle .= get_the_title();
    	        $posttitle .= "</h2>\n";
    	    }
    		elseif (is_404()) {
    	        $posttitle = '<h1 class="entry-title">' . __('Not Found', 'thematic') . "</h1>\n";
    	    }
    		else {
    	        $posttitle = '<h2 class="entry-title"><a href="';
    	        $posttitle .= apply_filters('the_permalink', get_permalink());
    	        $posttitle .= '" title="';
    	        $posttitle .= __('Permalink to ', 'thematic') . the_title_attribute('echo=0');
    	        $posttitle .= '" rel="bookmark">';
    	        $posttitle .= get_the_title();
    	        $posttitle .= "</h2>\n";
    	    }
    
    		//return $posttitle;
    
    	    return apply_filters('thematic_postheader_posttitle',$posttitle); 
    
    } //end overall function
    
    //add_filter('thematic_postheader_posttitle','childtheme_override_postheader_posttitle');

    This is my code that removes the default thumbnail of thematic_content(). I simply commented out the line of code that generates that mark-up (html) for the thumbnail:

    function childtheme_override_content() {
    
    		global $thematic_content_length;
    
    		if ( strtolower($thematic_content_length) == 'full' ) {
    			$post = get_the_content(more_text());
    			$post = apply_filters('the_content', $post);
    			$post = str_replace(']]>', ']]>', $post);
    		} elseif ( strtolower($thematic_content_length) == 'excerpt') {
    			$post = '';
    			$post .= get_the_excerpt();
    			$post = apply_filters('the_excerpt',$post);
    			if ( apply_filters( 'thematic_post_thumbs', TRUE) ) {
    				$post_title = get_the_title();
    				$size = apply_filters( 'thematic_post_thumb_size' , array(100,100) );
    				$attr = apply_filters( 'thematic_post_thumb_attr', array('title'	=> 'Permalink to ' . $post_title) );
    				if ( has_post_thumbnail() ) {
    					//$post = '<a href="' . get_permalink() . '" title="Permalink to ' . get_the_title() . '">' . get_the_post_thumbnail(get_the_ID(), $size, $attr) . '</a>' . $post;
    					}
    			}
    		} elseif ( strtolower($thematic_content_length) == 'none') {
    		} else {
    			$post = get_the_content(more_text());
    			$post = apply_filters('the_content', $post);
    			$post = str_replace(']]>', ']]>', $post);
    		}
    		echo apply_filters('thematic_post', $post);
    
    }

    To achieve the desired column effect (see picture link in first post) without any text wrapping underneath the thumbnail I simply styled the thumbnail with enough bottom padding to push the text to the right "column".

    If I can streamline any of the above code, let me know. I now need to code the other conditional tags in my functions (e.g. is_single() etc.) which shouldn't be a problem.

    Posted 3 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.