Thumbnail Placeholder RESIZE

Hi najrj89. Not sure what’s happening on the site you linked. I didn’t get any images or placeholders due to numerous 404 Not Found errors. In any case, the theme placeholder images are located in the /hueman/img folder:
thumb-medium.png 520×245
thumb-small 160×160
thumb-standard 300×300

You could resize those but you’d have to also check the theme css as there are places where the images are resized to 100% of the content area width, regardless of the actual image size.

Thanks for your replay

frankly i actually waiting for your replay since you are the only one who is actively supporting this thread

Its sad that the website i gave is having problem , i have a screenshot of this website https://i.picresize.com/Ek6l

I actually open a bookstore via hueman theme since im familiar with this theme

Therefor i need thumbnail placeholder(featured image) would be 198*300 size all the time
I actually want to customize hueman theme like this one (atleast the featured image size)

https://themes.laborator.co/#theme=aurum

themes-labrador.co has a content container width of 1170px. The individual “columns” are set up using this css:

@media (min-width: 992px)
.col-md-4 {
  width: 33.33333333%;
}

@media (min-width: 992px)
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
  float: left;
}

This gives the individual article containers a width of 390px. Each of those has a padding of 15px left and right which leaves 360px. The images are all 640×400 and are being resized to 360×225 using this css:

body .wrapper .demo-holder .demo-box .demo-image {
  width: 100%;
  height: auto;
}

This makes the images responsive as the containers are resized. You could override that by giving the image a fixed width and the height would be automatically adjusted proportionately. But they would remain that width for all devices unless you adjusted it for mobile devices using a media query.

Hi bdbrown
I think that would be bit complicated for me.

but How can i stop featured image from height cropping

sample example- ibuyhot.com

as you said before the theme placeholder images are located in the /hueman/img folder:
thumb-medium.png 520×245
thumb-small 160×160
thumb-standard 300×300

should i change to –

thumb-medium.png 198×300
thumb-small 160×160
thumb-standard 300×300

Can you post a link to your site so we can see what’s happening to the images? Thanks.

Here it it https://ibuyhot.com/

its not my actual website but im trying to modifying everything here to see the result i want

1. Is your post set to Image format?
2. When you say “Featured Image”, did you add a Featured Image to that post? Or is that image actually included in the post content?

1. no , i didnt set to image format , i post it as standard post, if i set to image format(featured image) it shows up in the post content with cropped size

2. i added a featured image beside post image (both are same size since i want to be the same)

Note : i even tried this

i try to modify content-standard.php (in a child theme) to use the thumb-medium (520×245) image. For both the thumbnail and the placeholder, replace thumb-standard with thumb-medium:

<article id=”post-<?php the_ID(); ?>” <?php post_class(‘group post-standard’); ?>>
<div class=”post-inner post-hover”>

<div class=”post-thumbnail”>
” title=”<?php the_title(); ?>”>
<?php if ( has_post_thumbnail() ): ?>
<?php the_post_thumbnail(‘thumb-standard’); ?>
<?php elseif ( ot_get_option(‘placeholder’) != ‘off’ ): ?>
<img src=”<?php echo get_template_directory_uri(); ?>/img/thumb-standard.png” alt=”<?php the_title(); ?>” />
<?php endif; ?>
<?php if ( has_post_format(‘video’) && !is_sticky() ) echo'<span class=”thumb-icon”><i class=”fa fa-play”></i></span>’; ?>
<?php if ( has_post_format(‘audio’) && !is_sticky() ) echo'<span class=”thumb-icon”><i class=”fa fa-volume-up”></i></span>’; ?>
<?php if ( is_sticky() ) echo'<span class=”thumb-icon”><i class=”fa fa-star”></i></span>’; ?>

<?php if ( comments_open() && ( ot_get_option( ‘comment-count’ ) != ‘off’ ) ): ?>
“><span><i class=”fa fa-comments-o”></i><?php comments_number( ‘0’, ‘1’, ‘%’ ); ?></span>
<?php endif; ?>
</div><!–/.post-thumbnail–>

<div class=”post-content”>

<div class=”post-meta group”>
<p class=”post-category”><?php the_category(‘ / ‘); ?></p>
<p class=”post-date”><?php the_time(‘j M, Y’); ?></p>
</div><!–/.post-meta–>

<h2 class=”post-title”>
” rel=”bookmark” title=”<?php the_title(); ?>”><?php the_title(); ?>
</h2><!–/.post-title–>

<?php if (ot_get_option(‘excerpt-length’) != ‘0’): ?>
<div class=”entry excerpt”>
<?php the_excerpt(); ?>
</div><!–/.entry–>
<?php endif; ?>

</div><!–/.post-content–>

</div><!–/.post-inner–>
</article><!–/.post–>

but i got this message

The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.

If you haven’t already done so you might check out the Forum Welcome in the WP Codex. A couple of sections to note:
– When you post code you should use the code button “backticks” to enclose the code. This helps keep it out of the forum spam filter. More information here.
– Posting the same question in multiple threads is generally frowned upon and forum moderators will delete duplicate posts. See this reference.

On your site, from what I see, it looks like:
1. Your “Uncategorized Test 1” post is in Image format and has a Featured Image assigned, but no image in the post content.
2. Your “Fantasy Thumbnail” post is a Standard format, does not have a Featured Image, and has one image within the post content.
3. Theme Options > Blog > Standard Blog List is enabled.
4. There is custom css being applied to the images on the Home page.

Couple of questions:
1. Are there any other customizations to index.php or content-standard.php?
2. Are you using any page builders or other plugins that might pertain to images?
3. What is the original size of the image that was uploaded to the Media Library?
4. Your initial question was related to the Thumbnail Placeholder but we’ve been dealing with images. Normally a post without a Featured Image would show the placeholder on the Home page, but your Fantacy post shows an image. Did you use a function or plugin to display the image on the Home page?

It seems like we have several things going on here. Working with images is not the easiest thing in WP. It can be very frustrating and there are a lot of variables. Take a look at this post as an example. That’s not to say we can’t resolve your issue. Since this is a test site you at least have the option of removing functionality and customizations to get to a base configuration which might be easier to troubleshoot.

my “Fantasy Thumbnail” post is a Standard format, have a Featured Image, and has one image within the post content too.

yes – Theme Options > Blog > Standard Blog List is enabled. in that way i get Featured Image more accurately i want

answer of your questions:

1. i did it but change it to original code again after when i saw nothing working

2.i am using recommended regenerate thumbnail plugin only

3. for featured Image it was 220*250, for post it is 198*300

4.my question still related to the Thumbnail Placeholder , Thumbnail Placeholder hold the Featured Image but i want to change the size(reverse the width and height) of the place holder to fit my image more accurately

yes its really frustrating to not see the result

Spent a couple of hours testing and here’s what I found.
I copied the original 400×640 image from your site. Then I uploaded it to a test site I have running Hueman. These are the thumbnails that were created:
WP default ‘thumbnail’ 150×150 cropped height in center of image based on width
Hueman ‘thumb-small’ 160×160 cropped height in center of image based on width
WP default ‘medium’ 188×300 full image
Hueman ‘thumb-standard’ 320×320 cropped height in center of image based on width
Hueman ‘thumb-medium’ 520×245 cropped height in center of image based on width
WP default ‘large’ not created for whatever reason
Hueman ‘thumb-large’ 720×340 cropped height in center of image based on width

Give those images, I think there are a couple of ways to approach this. Both involve modifications to content.php.

1. Use a Featured Image
– add a Featured Image to the post
– add the same image to the post content; size ‘Medium’
– copy content.php to a child theme
– in this line in content.php, replace ‘thumb-medium’ with ‘medium’

<?php if ( has_post_thumbnail() ): ?>
	<?php the_post_thumbnail('thumb-medium'); ?>

– add this css to your child theme:

/* set featured image to natural size */
.blog .post-thumbnail img {
  width: initial;
}

2. Use the first image ATTACHED to a post, with or without a Featured Image
– click Add Media button on the post editor
– on the Insert Media page, Media Library tab, left dropdown, select Uploaded to this post
– select files; upload and return to Insert Media page
– if you want to display the image in the post, select Attachment size Medium and click Insert into post; otherwise just close the Insert Media page
– copy content.php to a child theme
– in content.php find this code block:

<?php if ( has_post_thumbnail() ): ?>
	<?php the_post_thumbnail('thumb-medium'); ?>
<?php elseif ( ot_get_option('placeholder') != 'off' ): ?>
	<img src="<?php echo get_template_directory_uri(); ?>/img/thumb-medium.png" alt="<?php the_title(); ?>" />
<?php endif; ?>

and replace the entire block with this:

<?php if ( has_post_thumbnail() ): ?>  // if there is a Featured Image, use it
	<?php the_post_thumbnail('medium'); ?>

<?php else: ?>  // otherwise check for images attached to the post; return the first one
	<?php
	 // GET THE FIRST IMAGE ATTACHED TO THE POST OR THE LOWEST IMAGE ID IN A GALLERY.
	 // THIS ONLY WORKS FOR IMAGES THAT ARE UPLOADED TO THE POST IN THE MEDIA MANAGER, NOT INSERTED INTO THE POST CONTENT FROM THE MEDIA LIBRARY!!
		$args = array(
		'order'          => 'ASC',
		'orderby'        => 'menu_order',
		'post_type'      => 'attachment',
		'post_parent'    => $post->ID,
		'post_mime_type' => 'image',
		'post_status'    => null,
		'numberposts'    => 1,
		);
		$img_attachments = get_posts($args);
	?>
	<?php if ($img_attachments): ?>  // if there is at least one image attached to the post
		<?php foreach ($img_attachments as $attachment) {
			echo wp_get_attachment_link($attachment->ID, 'medium', false, false);  // use the attached image as the Featured Image
		} ?>
	<?php elseif ( ot_get_option('placeholder') != 'off' ): ?>  // no image; if theme Image Placeholder option is ON, display placeholder
		<img src="<?php echo get_template_directory_uri(); ?>/img/thumb-medium.png" alt="<?php the_title(); ?>" />
	<?php endif; ?>

<?php endif; ?>

– add this css to your child theme:

/* set featured image to natural size */
.blog .post-thumbnail img {
  width: initial;
}

Give one of those a try and let me know how it goes.

when im trying to change the content php i getting this error

https://i.picresize.com/EqHE

The code appears to be from content.php but the window heading and active tab indicate that it’s functions.php. If all you changed was “thumb-medium’ to ‘medium’ then there shouldn’t be any error. What does the actual error message behind the editor say?

Hi bdbrown ,

1.
1st approach working like a charm!!!!…i dont think anybody would have problem with placeholder now

You are Amazing!!!!!!!!!!!bdbrown

But i still have a problem
I directly edited the main theme content.php to replace “medium”
because when i try to copy the whole content php to my child function php and activate it, i get this error
https://i.picresize.com/Eq0f

to remove the error, Do i need to add anything when i copy content.php in funtion.php(child)

2.

I didnt try second approach yet

One more thing, like i need to post same image for featured and content,
as you can see in my test website- “featured*post 1 image”
I posted this as “image format” and didn’t add any content image but featured image, now the problem is image cropped completely in content page

Glad you got one of the options working. Regarding copying content.php: you wouldn’t copy that into your child theme functions.php file. You would copy the entire content.php file into your child theme so you have a copy of content.php there to edit.