Can't get images and text to align to the left correctly

  • Resolved TwilightTigers

    (@twilighttigers)


    10 years, 3 months ago

    Hi I can’t get images and text to align correctly to to left. This is the page I am having problems with: https://myfeetgettingdirty.com/blog/ . This is the code I am using:

    <!-- NOTE: If you need to make changes to this file, copy it to your current theme's main
	directory so your changes won't be overwritten when the plugin is upgraded. -->

<!-- Start of Post Wrap -->
<div class="post hentry ivycat-post">
	<!-- This is the output of the post TITLE -->
	<h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

	<!-- This is the output of the EXCERPT -->
	<div class="entry-summary">
		<?php the_excerpt(); ?>
	</div>

    <!-- This will output of the featured image thumbnail  -->
	<div class="featured-image">
			<?php the_post_thumbnail( array( 180, 9999 ), array( 'class' => 'alignleft' , 'style' => 'border:5px solid white ; margin-right:5px ;' ) ); ?>
	</div>

	<!-- This is the output of the META information -->
	<div class="entry-utility">
		<?php if ( count( get_the_category() ) ) : ?>
			<span class="cat-links">
				<?php printf( __( '<span class="%1$s">Posted in</span> %2$s', 'twentyten' ), 'entry-utility-prep entry-utility-prep-cat-links', get_the_category_list( ', ' ) ); ?>
			</span>
			<span class="meta-sep">|</span>
		<?php endif; ?>
		<?php
			$tags_list = get_the_tag_list( '', ', ' );
			if ( $tags_list ):
		?>
			<span class="tag-links">
				<?php printf( __( '<span class="%1$s">Tagged</span> %2$s', 'twentyten' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list ); ?>
			</span>
			<span class="meta-sep">|</span>
		<?php endif; ?>
		<span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'twentyten' ), __( '1 Comment', 'twentyten' ), __( '% Comments', 'twentyten' ) ); ?></span>
		<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="meta-sep">|</span> <span class="edit-link">', '</span>' ); ?>
	</div>
</div>
<!-- // End of Post Wrap -->

    https://www.ads-software.com/plugins/posts-in-page/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Contributor Patrick Jackson

    (@pjackson1972)

    Hi TwilightTigers,

    It looks like you just need to play with the layout and styling a bit.

    What do you want the layout to look like, exactly? Do you want the featured image to be to the left of its title, excerpt, etc.; and for each post to be on its own row?

    You might start by adding a clear class to the outermost div for each post. That will ensure each post entry gets its own row.

    Your style sheet has a clear class defined that applies the clear:both property to its element. Adding this to the post wrapper div will clear any float properties applied between posts that are causing them to bunch up.

    ...
<!-- Start of Post Wrap -->
<div class="post hentry ivycat-post clear">
	<!-- This is the output of the post TITLE -->
...

    If you want the image to always be left of the post’s title and excerpt, since the image is already floating left, you should be able to just move the image’s div higher in the content — above the title — so that everything that follows after it will be rendered to its right. 

    ...
<!-- Start of Post Wrap -->
<div class="post hentry ivycat-post clear">

        <!-- This will output of the featured image thumbnail  -->
	<div class="featured-image">
	    <?php the_post_thumbnail( array( 180, 9999 ), array( 'class' => 'alignleft' , 'style' => 'border:5px solid white ; margin-right:5px ;' ) ); ?>
	</div>

	<!-- This is the output of the post TITLE -->
	<h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

	<!-- This is the output of the EXCERPT -->
	<div class="entry-summary">
		<?php the_excerpt(); ?>
	</div>

	<!-- This is the output of the META information -->
....

    Are we moving in the right direction with these changes?

    Thread Starter TwilightTigers

    (@twilighttigers)

    It looks like everything is working now. Thank you for taking the time out of your day to solve my problem. : )

    Thanks Again,
    Twilight

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Can't get images and text to align to the left correctly’ is closed to new replies.