WordPress.org

Support

Support » Themes and Templates » Move text next to image

Move text next to image

  • Hi,

    I am using a plugin to get recent uploads by users to show on their profile page. (I have this all working but I would like to change the layout a little bit)

    If you review this users profile for example: http://www.copymusic.co.uk/COPYmusicscout2/ you will see that the picture loads up followed by the title then the excerpt.

    I would like it look more like the widgets at the bottom of the page, where the title and excerpt are next to the picture.

    I am familier with PHP and can follow simple instructions, however this is beyond me!

    I have copied below the code I beleive to be relevent if it will be of assistance,

    $html .= '<li>';
    
    				/*
    					The following lines will display the post thumbnail if uncommented
    					...also, it uses the thumbnail size created by the function at the bottom
    					of this script which is also commented out.
    				*/
    					$postID = get_the_ID();
    					if ( current_theme_supports( 'post-thumbnails' ) ) {
    						$html .= get_the_post_thumbnail( $postID, 'latest-by-author' );
    					}
    
    				// Displays a link to the post, using the post title
    				$html .= '<h4><a href="' . get_permalink() . '" title="' . get_the_title() . '">' . get_the_title() . '</a></h4>';
    				$content=preg_replace('/<img[^>]+./','',get_the_content());
    				$html .= '<p>'.substr($content,0,200).'<a href="' . get_permalink() . '" title="' . get_the_title() . '">..Read more</a></p>';
    				// Displays the post excerpt if "excerpt" has been set to true
    				if($excerpt == 'true'){
    	         	$html .= '<p>' . get_the_excerpt() . '</p>';
    	      	}
    				$html .= '</li>';
    			endwhile;
    			$html .= '</ul>';
    		}

    Many thanks,
    Ryan

Viewing 7 replies - 1 through 7 (of 7 total)
  • WPyogi
    Forum Moderator

    @wpyogi

    That kind of alignment is done by using “float: left;” in the CSS code for the image. Most themes use the WP built-in alignment using the class .alignleft so you should be able to use that or create your own class for those images.

    Thanks for the quick reply, WPyogi,

    What would be the best way to incorporate `.alignleft’ ?

    unfortunately, this snit something I am that familiar with . . . If it’s a relatively simple fix any suggestions would appreciated!

    Ryan

    WPyogi
    Forum Moderator

    @wpyogi

    Okay, I think the best way is to add custom CSS so try this in your custom CSS file/location:

    ul.latestbyauthor img {
       float: left;
       margin-right: 10px;
    }
    
    ul.latestbyauthor li{
       clear: both;
       padding-bottom: 20px
    }

    Thanks,

    So I saved that in the custom CSS, I am assuming I now need to somehow reference the Custom CSS in the widget code?

    WPyogi
    Forum Moderator

    @wpyogi

    It’s already referenced by the class, but it’s not visible in your custom CSS – where did you save it – and be sure to clear any caches.

    Hi,

    Sorted it!

    Sorry, I didn’t save it to the custom CSS sheet on WP, I saved it to the custom CSS part on my theme editor!

    I really appreciate your assistance!

    Kind Regards
    Ryan

    WPyogi
    Forum Moderator

    @wpyogi

    No problem — glad it works!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Move text next to image’ is closed to new replies.