WordPress.org

Ready to get started?Download WordPress

Forums

Move text next to image (8 posts)

  1. ryanpym
    Member
    Posted 1 year ago #

    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

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  3. ryanpym
    Member
    Posted 1 year ago #

    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

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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
    }
  5. ryanpym
    Member
    Posted 1 year ago #

    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?

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  7. ryanpym
    Member
    Posted 1 year ago #

    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

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    No problem -- glad it works!

Topic Closed

This topic has been closed to new replies.

About this Topic