Hey @debashish,
The code that creates thumbnails can be found in the “Mh Magazine Lite” theme folder inside the “functions.php” file.
You can modify it in the child theme to suit your requirements.
The code we have used is:
/***** Add Custom Image Sizes *****/
if (!function_exists('mh_magazine_lite_image_sizes')) {
function mh_magazine_lite_image_sizes() {
add_image_size('mh-magazine-lite-slider', 1030, 438, true);
add_image_size('mh-magazine-lite-content', 678, 381, true);
add_image_size('mh-magazine-lite-large', 678, 509, true);
add_image_size('mh-magazine-lite-medium', 326, 245, true);
add_image_size('mh-magazine-lite-small', 80, 60, true);
}
}
add_action('after_setup_theme', 'mh_magazine_lite_image_sizes');
Hi Harish,
Thanks for the reply. What change should I do? I guess stopping the thumbnail creation by commenting out the code won’t help, as it will break the images at all places. Should I just change the code in child theme to make all the sizes same (example as follows). But if I do that will the images get resized accordingly (e.g. where mh-magazine-lite-small is used it resizes to 80×60) on the respective places while displaying? Will I also need to do allied CSS changes?
/***** Add Custom Image Sizes *****/
if (!function_exists('mh_magazine_lite_image_sizes')) {
function mh_magazine_lite_image_sizes() {
add_image_size('mh-magazine-lite-slider', 326, 245, true);
add_image_size('mh-magazine-lite-content', 326, 245, true);
add_image_size('mh-magazine-lite-large', 326, 245, true);
add_image_size('mh-magazine-lite-medium', 326, 245, true);
add_image_size('mh-magazine-lite-small', 326, 245, true);
}
}
add_action('after_setup_theme', 'mh_magazine_lite_image_sizes');
Appreciate the help.
Thanks,
Debashish
-
This reply was modified 4 years ago by
Debashish.
-
This reply was modified 4 years ago by Debashish.
Hey Debashish,
Yes, that is correct. You should add this code to “functions.php” inside your child theme. You can change the dimensions of the thumbnails but after doing any changes, you will need to regenerate the thumbnails. For that, you can use a plugin like https://wordpress.org/plugins/regenerate-thumbnails/.
Thanks Harish, appreciate the prompt reply as always. I am still curios on how the theme will handle display of the image. For e.g. where mh-magazine-lite-small is used and I have an image of size 326×24, will the CSS display it resized to 80×60 on the respective place? Or I also need to do some CSS changes?
I think no CSS changes will be needed in this case. I recommend you test it and if there is any problem let us know.
Appreciate the help. That worked. Thanks.
I am sorry to revive this thread again, but it seems the navigation for Previous & next post at the bottom of Single post page is now ruined as it shows big images, and leave a big white space beneath it just above the footer section (example: http://dinorover.debashish.com/toothless-dino/). How do I fixed that? I am not facing issue with thumbnail size anywhere else.
Hi,
Can you please disable all plugins and let us know so we can test again?
Ok Harish, disabled all plugins. Just FYI I had the same set of plugins before I made the thumbnail related code change as above, so that shouldn’t matter. You can check again please.
Hey @debashish,
Thanks for that. Can you please try using the following CSS and test again?
.mh-post-nav img {
margin-bottom: 10px;
}
.mh-post-nav span {
overflow: inherit !important;
}
Thanks Harish, appreciate the prompt response. The Next and Previous link text now re-appeared, also the white space is gone. But the thumbnail images (that appear alongside these links) are still appearing large 🙁
-
This reply was modified 4 years ago by Debashish.
Please ignore. I was able to solve it by adding image width & height on the same CSS sent by you. Thanks again for all the help.
.mh-post-nav img {
margin-bottom: 10px;
width: 60px;
height: 60px;
}
Hey @debashish,
Thanks for the update and I’m glad this is solved.
When using CSS on images, I would recommend testing as if the images are of different proportion, then they will appear distorted.
Agree Harish. Sadly I do not fully understand WordPress thumbnail creation & usage logic, and am not so good in CSS too. I was basically annoyed with too many image versions created by themes as well as plugins and the mindless cropping of image. I could achieve stopping them via the Disable Media Sizes plugin. I found another plugin Crop Thumbnails that helps crop the image properly, there is manual effort involved but at least I would know that the cropped thumbnail is good. But do not know how I could tell the WordPress theme to use the smaller thumbnail for example at the bottom Nav (Next Previous posts). No idea how WordPress choses which image to show.
-
This reply was modified 4 years ago by Debashish.
Thanks for sharing the solution you found that works for you.
How WordPress choses what image to show: That is usually coded into the theme files.
Hope that helps. If you have any questions, please let me know!
