Hello, I found your article about “How to disable featured image cropping on the blog page” https://uxbarn.ticksy.com/article/8228/ Thank you for that; I was looking for a way to un-crop those images. I’m wondering if, instead of displaying a full size uncropped image, I can instead have it display a smaller (but uncropped) version of the Featured image. How would I do that?
The latest version of Fineliner (v2.0.0) already includes that feature. The blog thumbnails will now be scaled down with soft cropping, not hard cropping as before.
Fineliner v2.0.0 was just released yesterday. If you have set up the Envato Market plugin, you should see a notification about the newer version under its menu.
After updating, please re-upload the featured image of your blog posts once again to see the scaled down version.
This fix doesn't seem to working for me; maybe I'm missing something?
I update the theme.
Then I went to a blog post and removed the Featured Image from it. I updated the post. Then I added the Featured Image back to it and updated the post again. The image was still cropped on the blog page.
So, because updating the theme would have erased the earlier edit I made following your directions below (at the link in my original question), I went back to Appearance>Editor and edited the code again to force WP to show a full-size image. Which it now does. But I want the image to be smaller, uncropped. What should I do?
After removing the Featured Image from the post, you would have to re-upload the image from your computer to WP site once again, not just re-select it from the Media Library. The theme will apply the new scaling feature when re-uploading the image. This should help.
For your question about your customization that was erased, I would strongly not suggest editing the theme files directly for any custom changes or adjustment. You should use a child theme or Custom CSS field (for CSS editing) in the Style Customizer. For more info about the child theme, please read here: https://codex.wordpress.org/Child_Themes. And here is a related article for the Fineliner theme: https://uxbarn.ticksy.com/article/2790/
When the theme is being updated, it means that all the files from the newer version will replace the old ones. So if you edit the code directly, your customization would be gone.
Note that, for any customization articles, they assume that you should use the child theme by default. It is always suggested in WP customization. For example, if you want to edit the code in the "index.php" file of the theme, you can just copy the file and put it into your child theme's folder and edit it from there. This child theme's file will not be affected when updating the parent theme.
But keep in mind that you might need to check the child theme's code from time to time because if there is a major change in the parent theme, you should also update the child theme's files to reflect those too.
For more about customization of the theme or if you are not sure about it, I would suggest finding a freelancer to help you out for the customization job. You can find good services at https://studio.envato.com
I reversed the steps that I had taken before. I carefully edited the code back to its original, and I removed the custom CSS I had added in Style Customizer. Then I deleted the blog image from WP, then re-uploaded it to WP and then re-selected it as the Featured image for the blog post. Now, the image appears full size on the Blog page (not cropped as before). Still not what I need. What have I missed?
Hmm. OK maybe I understood your question incorrectly. You mean you would like to display the blog thumbnail in smaller size than the uploaded on the front end. Is that correct?
If that is the case, you would have to use custom CSS to limit the width of the image by applying the custom CSS code like this:
Hello, I found your article about “How to disable featured image cropping on the blog page” https://uxbarn.ticksy.com/article/8228/ Thank you for that; I was looking for a way to un-crop those images.
I’m wondering if, instead of displaying a full size uncropped image, I can instead have it display a smaller (but uncropped) version of the Featured image. How would I do that?
Thank you!
Hi Emily!
The latest version of Fineliner (v2.0.0) already includes that feature. The blog thumbnails will now be scaled down with soft cropping, not hard cropping as before.
Fineliner v2.0.0 was just released yesterday. If you have set up the Envato Market plugin, you should see a notification about the newer version under its menu.
After updating, please re-upload the featured image of your blog posts once again to see the scaled down version.
You can find more details about the update in the changelog that is at the bottom of the item page here: https://themeforest.net/item/fineliner-responsive-portfolio-wordpress-theme/6363903
Let me know if it helps!
Paul
Hi Paul,
This fix doesn't seem to working for me; maybe I'm missing something?
I update the theme.
Then I went to a blog post and removed the Featured Image from it. I updated the post. Then I added the Featured Image back to it and updated the post again. The image was still cropped on the blog page.
So, because updating the theme would have erased the earlier edit I made following your directions below (at the link in my original question), I went back to Appearance>Editor and edited the code again to force WP to show a full-size image. Which it now does. But I want the image to be smaller, uncropped. What should I do?
Thanks,
Emily
After removing the Featured Image from the post, you would have to re-upload the image from your computer to WP site once again, not just re-select it from the Media Library. The theme will apply the new scaling feature when re-uploading the image. This should help.
For your question about your customization that was erased, I would strongly not suggest editing the theme files directly for any custom changes or adjustment. You should use a child theme or Custom CSS field (for CSS editing) in the Style Customizer. For more info about the child theme, please read here: https://codex.wordpress.org/Child_Themes. And here is a related article for the Fineliner theme: https://uxbarn.ticksy.com/article/2790/
When the theme is being updated, it means that all the files from the newer version will replace the old ones. So if you edit the code directly, your customization would be gone.
Note that, for any customization articles, they assume that you should use the child theme by default. It is always suggested in WP customization. For example, if you want to edit the code in the "index.php" file of the theme, you can just copy the file and put it into your child theme's folder and edit it from there. This child theme's file will not be affected when updating the parent theme.
But keep in mind that you might need to check the child theme's code from time to time because if there is a major change in the parent theme, you should also update the child theme's files to reflect those too.
For more about customization of the theme or if you are not sure about it, I would suggest finding a freelancer to help you out for the customization job. You can find good services at https://studio.envato.com
Thank you Paul.
I reversed the steps that I had taken before. I carefully edited the code back to its original, and I removed the custom CSS I had added in Style Customizer. Then I deleted the blog image from WP, then re-uploaded it to WP and then re-selected it as the Featured image for the blog post. Now, the image appears full size on the Blog page (not cropped as before). Still not what I need. What have I missed?
Thanks,
Emily
Hmm. OK maybe I understood your question incorrectly. You mean you would like to display the blog thumbnail in smaller size than the uploaded on the front end. Is that correct?
If that is the case, you would have to use custom CSS to limit the width of the image by applying the custom CSS code like this:
.blog-item-thumbnail {max-width:300px; margin: auto;
}
Hope this is what you need.
Yes!! That's it! :) :) :)
The image is centered. How can I make it left-justified?
Thank you.
Sure! You can just remove the "margin: auto;" line in the given CSS code for the left alignment.
Awesome! Thank you.