How to set Featured Image to float left

  • Resolved Bad_Egg

    (@bad_egg)


    9 years ago

    I want to change the position of the featured image for blog post list/archive/search and cannot figure it out.

    Originally, the theme was designed to display, in this order:
    1. Featured image
    2. Post header
    3. Post date, # of comments
    4. Excerpt

    In my child theme I have managed to alter the content.php to rearrange the display to:
    1. Post header
    2. Post date, # of comments
    3. Featured image
    4. Excerpt

    However, I would also like the image to float left. I cannot figure out how to do this, whether I can do this in the content.php or if I have to also alter the CSS. Any help would be appreciated.

    Here is the code for content.php:

    <?php
/**
 * The default template for displaying content
 *
 * Used for both single and index/archive/search
 *
 * @package Catch Themes
 * @subpackage Clean Box
 * @since Clean Box 0.1
 */
?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<div class="entry-container">
			<header class="entry-header">
				<h1 class="entry-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h1>

				<?php if ( 'post' == get_post_type() ) : ?>

					<?php clean_box_entry_meta(); ?>

				<?php endif; ?>
			</header><!-- .entry-header -->

    	<div class="archive-post-wrap">
		<?php
		/**
		 * clean_box_before_entry_container hook
		 *
		 * @hooked clean_box_archive_content_image - 10
		 */
		do_action( 'clean_box_before_entry_container' );
		// Get the Excerpt
		$cleanbox_excerpt = get_the_excerpt(); ?>

			<?php
			$options = clean_box_get_theme_options();

			if ( is_search() || ( 'full-content' != $options['content_layout'] && !empty( $cleanbox_excerpt ) ) ) : // Only display Excerpts for Search and if 'full-content' is not selected ?>
				<div class="entry-summary">
					<?php the_excerpt(); ?>
				</div><!-- .entry-summary -->
			<?php else : ?>
				<div class="entry-content">
					<?php the_content(); ?>
					<?php
						wp_link_pages( array(
							'before' => '<div class="page-links"><span class="pages">' . __( 'Pages:', 'clean-box' ) . '</span>',
							'after'  => '</div>',
							'link_before' 	=> '<span>',
		                    'link_after'   	=> '</span>',
						) );
					?>
				</div><!-- .entry-content -->
			<?php endif; ?>

			<footer class="entry-footer">
				<?php clean_box_tag_category(); ?>
			</footer><!-- .entry-footer -->
		</div><!-- .archive-post-wrap -->
	</div><!-- .entry-container -->
</article><!-- #post -->
Viewing 4 replies - 16 through 19 (of 19 total)
  • Thread Starter Bad_Egg

    (@bad_egg)

    lorro:

    The other issue is that I then have to add new CSS code for all the breakpoints. Would not rearranging the content.php (similar to what I did before but done properly) and then adding the custom CSS not solve the responsive design problem since I would not be changing the containers themselves?

    Still working on getting the float working before looking at the other things.

    It looks like you’ve altered the widths of the two elements, and the width settings are that the two items are too wide to fit side by side. For a 160px wide image the entry-summary can be only 560px wide, not 610px.

    Thread Starter Bad_Egg

    (@bad_egg)

    Hi lorro:

    I’m working using a full-size screen, so the 610 works. (The default is 780px wide, so I just deducted the 160 from 780 and left 10px for padding.) I also checked on my laptop; the image floats to the left as required. So the float appears to be fine; it’s just that the 610px container size also affects the blog post itself, which is otherwise 780 pixels wide.

    Thread Starter Bad_Egg

    (@bad_egg)

    After much fiddling about I have finally settled on this compromise:

    I reordered the content.php as I did originally — and which works without breaking anything despite the theme’s developer telling me the reorganization results in an HTML error — and added this to the custom CSS:

    #main article .featured-image {
  float: left;
  margin-right: 20px;
}

    The result is the headline and metadata on top, followed by a thumbnail image floating left to the excerpt. It works visually, doesn’t break the site, and works with the site’s existing responsive design code.

    Much thanks to those who weighed in, especially @lorro.

    (Lorro, if you came up with a better solution, I’m still all ears. Please let me know.)

Viewing 4 replies - 16 through 19 (of 19 total)
  • The topic ‘How to set Featured Image to float left’ is closed to new replies.