How to set Featured Image to float left

Please could you post a link to a relevant page.

Usually in cases like this I don’t even bother, at least first, with the php files of wordpress.

What I’d do
– open the blog
– in Firefox and Chrome, F12, first upper-left too to Inspect something
– Click your featured image
– back to the web developer tools brought by F12, read the HTML for where your image is encased, it ought to have some particular styling identification. Id ? Class ?
– Take note of that id or class, and now edit your website’s stylesheet (style.css most likely) to add the mention that this id or class has to be made to float left

Usually, it’s faster to go that way, rather than try to figure out how each php file works ??

The theme developer kindly responded to a query I posted on their own site’s forum. He suggested I revert the php to its original, and add this to the CSS:

.has-post-thumbnail .featured-image {
    width: 290px;
}

.has-post-thumbnail .entry-container {
    width: 488px;
}

.has-post-thumbnail .featured-image,
.has-post-thumbnail .entry-container {
	display: inline;
	float: left;
}

Unfortunately, it means I also have to adjust the code in the responsive design. So I’ll give it a try and report back asap.

@lorro: the link is https://new.mademers.com/?page_id=101 (I’ve returned the content.php to its original).

I want to create smaller thumbnails for all the posts (see the first post “The charitable way to create a bestseller” for an example) and float it left.

@sabinoo: thanks for the suggestion to use FF or Chrome’s developer tool. I have used them to check responsive design, but I have to confess I find the site of all that code to be overwhelming (I’m not a programmer). Will try it again because I also have a widget I’m trying to do the same thing with.

You can set the thumbnail size at Admin page > Settings > Media, then:
https://www.ads-software.com/plugins/regenerate-thumbnails/

@lorro: in this theme, the thumbnail size in the Admin page > Settings > Media does not affect the featured image on the blog content/archive/search display.

I tried the code recommended by the developer; it doesn’t work because in the content.php the image is still set to sit atop the content. All that the developer-recommended code did was make the content container shrink.

If the theme is setting its own thumbnail image size, look for a line something like this. It’s likely to be in functions.php for the parent theme:

add_image_size( 'wp-post-image', 200, 200, true );

If its there, alter the 200s to your preferred size and test. If this works, we can make the change permanent with a function in the child theme’s functions.php.

The developer’s code works for me. I have a Chrome extension called Styler to test snippets. Could you put the developer’s code back in the page and I’ll try to debug it.

@lorro: that code doesn’t exist anywhere in the theme. I checked all files.

From what I can tell, the look of the post excerpts is controlled by the content.php and the CSS.

In this theme, the only way to have a thumbnail image for the blog excerpt is to create a separate, smaller image and set it as the featured image for the blog post, then disable the feature image for the main blog entry and add one’s larger image there as part of the post.

I put the developer code back in my child theme’s CSS. You can now see how the entry container and images have been shrunk but the order remains unchanged. Worse still, if you click on the blog post, its container size is also shrunk! Baaaaaad!

@lorro: Originally, I altered the content.php to put the image below the headline (see original post). That actually worked, though the developer said that this results in an HTML error. In any case, if I maintain this inversion of elements, he suggested I add:

#main article .featured-image {
  float: left;
]

into Appearance > Customizer > Theme Option > Custom CSS box.

The theme’s original content.php looks like this:

<?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="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(); ?>

		<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 -->

			<?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><!-- .entry-container -->
	</div><!-- .archive-post-wrap -->
</article><!-- #post -->

As you can see from my original post, all I did was move:

<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();

and changed the order of the final <div>s to reflect the new order of entry. If that does indeed result in an HTML error, can you see a way to rearrange the elements that does not result in an error? I could then try using the custom CSS he suggested.

deleted. I’m confusing myself. (This post, I mean, not the thread.)

Going back to the developer’s code, note the comma after “image” on the third bit – the comma is essential, so add it to the child/style.css.

Good catch on the comma! That fixed that.

Unfortunately, the code also affects the blog post itself: https://new.mademers.com/?p=1864

I wonder what would happen if I remove the pixel dimensions and only add in:

.has-post-thumbnail .featured-image,
.has-post-thumbnail .entry-container {
	display: inline;
	float: left;
}

Will try that next and report back.

Nope, doesn’t work. Sigh.

have also now adjusted the pixel dimensions and, while it clearly looks better than before, I’m still stuck with the blog post container also being affected.

Just noticed something else: if a post does not contain a featured image, the container remains at the default 780px. (See entry “Changes to Japan tax on Kindle Direct Publishing.”)

So do you think there is a way to limit the smaller container to only the excerpts?