change location of post thumbnails

Here is the Codex page on changing post thumbnail sizes
https://codex.www.ads-software.com/Function_Reference/set_post_thumbnail_size

and here is an article explaining how to use that
https://wpmu.org/daily-tip-how-to-change-the-post-thumbnail-size-in-a-wordpress-theme/

You have to change the location of the thumbnails by adjusting the page’s CSS. You will have to post a URL if you want someone to help with that. The CSS required is specific to your site. First change the thumbnail sizes, then ask for help with the CSS.

Thanks for your answer,
i followed your link and tried adding those few lines in functions.php
as well as the code in the home.php and single.php
But even though after doing that, the thumbnails are still the same.

Here is my blog if it can help, https://www.naimedart.com
Thanks

i would also like to add, it may help.

my original theme was “aggregator” and i think it already has the function added but not sure how. All i know is that i activated auto thumbnails using the blog-page template and then under the template option i checked a box called generate auto thumbnails.

Thanks

Hi

Its hard to tell without seeing the theme’s code but it looks like your current theme is not using post thumbnails and is making the post images appear in its own, non-standard way. If that is true the theme would need to be changed a bit to use the smaller thumbnails.

ok i see, thanks for your answer.
I tried opening the page template file under the theme’s folder: called page-blog.php
i found a php scipt;

<?php $thumb = '';
					$width = 100;
					$height = 100;
					$classtext = '';
					$titletext = get_the_title();

$thumbnail = get_thumbnail($width,$height,$classtext,$titletext,$titletext);
							$thumb = $thumbnail["thumb"]; ?>

							<?php if ( $thumb <> '' && !$et_ptemplate_showthumb ) { ?>
								<div class="et_pt_thumb alignleft">
									<?php print_thumbnail($thumb, $thumbnail["use_timthumb"], $titletext, $width, $height, $classtext); ?>
									<a href="<?php the_permalink(); ?>"><span class="overlay"></span></a>
								</div> <!-- end .thumb -->
							<?php }; ?>

i changed the size on the beginning to 100×100 the problem is that only changes the picture, what about the box which holds the image?

Requires resizing an image and some CSS changes

The background box that surrounds the image is this file
images/blog-image-overlay.png
its 199 x 199px – make it smaller – resize to exactly surround the new thumbnail size.

In this file
https://www.naimedart.com/ndblog/wp-content/themes/Aggregate/epanel/page_templates/page_templates.css

on line 21 is this

div.et_pt_thumb {
    height: 191px;
    margin: 0 20px 0 0;
    padding: 8px 0 0 8px;
    position: relative;
    width: 191px;
}

On line 22 is this

div.et_pt_thumb span.overlay {
  background: url("images/blog-image-overlay.png") no-repeat scroll 0 0 transparent;
  display: block;
  height: 199px;
  left: 0;
  position: absolute;
  top: 0;
  width: 199px;
}

Change the height and width in both to match the new thumbnail image size, and the new height and width of the surrounding box

Keep in mind when you change the theme’s core files, when the theme upgrades the changes you make will be written over by the new theme version. Most themes have a way to customize the theme, either with a CSS panel in the theme options section, or by making a child theme and customizing it.

Thank you very much for your help,
i have managed to change the size but i still have a little problem. The thumbnail doesn’t seem to fit in the box anymore. or it doesn’t position itself correctly in the center.
Do i have to take count of the border? if yes in which setting?

i think this will help:

its not in the panel setting because i disable all thumbs in the theme panel.
i was thinking could it be the post thumbnail php file outside the themes folder who is generating them?

in the section that starts on line 21 in CSS adjust the padding
padding: padding: 8px 0 0 8px;

Start with this
padding: padding: 5px 0 0 5px;
and adjust until you are satisfied with the look

Thank you so much after a few adjustments i seem to have found the correct padding and sizes.

Could i just bug you with one last question: actually my first question.
How can i put those thumbnails next to the title.

I guess it has to been modified in the css file.

Hi

In that code from page-blog.php that you posted earlier. You need to move the location of the block of code you posted, that displays the thumbnail.

In a normal WP theme the post content is displayed using the_content() or the_excerpt(). Most likely the thumbnail display code is now just before or after that. You need to move it so it displays just before the_title() which is what causes the post title to display. Most likely its going to need some CSS tweaks after you reposition it there.

that worked! and doesn’t look that bad but a few switches will make it better.

Thank you for help! ??

RESOLVED

in this on line 21, change the first margin number to 7px as I have below, to vertically center the thumbnail with the title

div.et_pt_thumb {
    height: 41px;
    margin: 7px 20px 0 0;
    padding: 0 0 0 0;
    position: relative;
    width: 40px;
}

if i may ask you one last question… https://www.naimedart.com

how do you think i could make it so the thumbnails are aligned to the title and not just in the same line

You answered me before i even asked. thanks ??