- NewspaperRetina Images
- NewspaperThumbnails – Fix strange looking images on blocks
- TutorialsExisting content
- NewspaperUsing the theme with existing content
Hi,
I have checked your site, the image need to be at least 745x483 which represents the big image thumb size and the image needs to be of that width to fill the whole container: http://screencast.com/t/bGUSeknE67LX
Please try a plugin like Thumbnail Upscale to enlarge thumbnails, because WordPress doesn’t enlarge images: https://wordpress.org/plugins/thumbnail-upscale/ For upscale use a combination of plugins Thumbnail Upscale + Force Regenerate.
Thanks!
Hi,
Regenerating thumbnails should solve this issue unless the image you use it’s smaller that the dimensions needed because WordPress doesn’t enlarge images. If you use larger images please regenerate your thumbnail following this guide: https://forum.tagdiv.com/how-to-fix-strange-thumbnails/
Please try a plugin like Thumbnail Upscale if you need to enlarge thumbnails: https://wordpress.org/plugins/thumbnail-upscale/ to enlarge thumbnail. For upscale use a combination of plugins Thumbnail Upscale + Force Regenerate.
Thanks!
Hi,
You can change thumbnail size for blocks/modules in functions.php: http://screencast.com/t/YMAcSPF2DY and after that please regenerate thumbnails: https://forum.tagdiv.com/how-to-fix-strange-thumbnails/
Thanks!
Weird. Perhaps you have some caching turned on conflicting with that, and so serving up old version of image.
This image is pretty big
http://evolvehype.com/…ploads/2015/03/ehlprodivision-100×65.jpg
254 KB (260,690 bytes)
with a quality factor of “50” — and images re-generated
generally speaking the size would/should be roughly 3 KB
perhaps you have some aggressive caching turned on? YOu need to turn that OFF before running the regenerate-thumbnails …
also make sure your functions file has the RIGHT code to do that — check it against my optimization sticky at top of forum as my code from functions.php is also there.
It does work 🙂
-
This reply was modified 11 years by
simchris.
Thanks for the reply Emil,
I added the code then installed Regenerate Thumbnails, but it doesn’t look like it did anything. Same thing saying thumbnails aren’t optimized
Hi,
Wordpress doesn’t compress images by default, you have to compress them yourself before upload, or use a plugin which can add such functionality, or add the following code in functions.php:
add_filter( 'jpeg_quality', create_function('', 'return 50;' ) );
This will compress all images to 50%, you can change that value, after you add the code you have to regenerate all thumbs – https://forum.tagdiv.com/how-to-fix-strange-thumbnails/
Thank you, Emil G.
Once you enable all of the sizes in the theme panel (they don’t all come enabled by default), regenerate your thumbnails and that grey area will go away. The images will be both scaled down correctly from the original and cropped to fit the exact dimensions of each thumbnail use on the site. But again, only if enabled in the panel I screen capped above.
As Chris pointed out, WordPress will only scale images down, not up. So make sure any images you upload are originally large enough to fill any space you will need it for. I believe the lone exception is that the theme will blow up an image to fit the screen if you use a the full-width featured post post format, but that’s because it’s a background image in that style.
Hi,
You will need to regenerate your thumbnails after you make the change in the module. I’m not sure what you mean when you say that images looks stretched, as I tested this and it is look fine on my side. And on mobile view appears exactly how they are cropped at 681px width. You can use also your solution if you are satisfied or add another size in the module and try to find the best solution for you.
Thanks!
Hi,
If you want change the width and height and also crop(center) of the thumb please edit the td_config.php file: http://screencast.com/t/MvPEw8AGR ..then regenerate thumbnails using this guide: https://forum.tagdiv.com/how-to-fix-strange-thumbnails/
For example I edited like this – http://screencast.com/t/b7zifZGZLK then regenerate thumbs – http://screencast.com/t/cYyU8UxbXF
Before: http://screencast.com/t/bzJFlnc3VDsT
Result: http://screencast.com/t/MImsQmSf
Please also consider that changing thumb sizes will also affect other blocks/modules which also use this thumbs.
Hope this helps!
Hi,
Unfortunately that happens as the module uses a small thumb and on mobiles it gets enlarged (stretched) via css.
If you don’t mind using a larger thumb image for module 10 thumbs you could try to change the thumb size for it. Edit the td_config file and change the width and height of the thumb from here: http://screencast.com/t/oaBaVnCOMDW ..then regenerate thumbnails using this guide: https://forum.tagdiv.com/how-to-fix-strange-thumbnails/
Please also consider that changing this thumb sizes will also affect mega menu and block 11 which also use this thumbs.
Or you can use the same size for images like there are on desktop also on mobile screen using this custom css: http://screencast.com/t/ALLD1c6teqj
@media (max-width: 767px){
.td_module_10 .td-module-thumb {
width: 180px;
}
}
Hope this helps!
-
This reply was modified 11 years by
Alin [tagDiv].
-
This reply was modified 11 years by
Alin [tagDiv].
Hi,
Regenerate thumbnails using the guide below them make sure you empty caches and purge files if you use CDN host.
https://forum.tagdiv.com/how-to-fix-strange-thumbnails/
Thanks
Hi,
@bariton I have checked your site and I did not found a Big Grid or Slider to inspect this. Did you solve the issue?
If you still have issues please regenerate your thumbnails: https://forum.tagdiv.com/how-to-fix-strange-thumbnails/
@Afterglow Please regenerate your thumbnails: https://forum.tagdiv.com/how-to-fix-strange-thumbnails/
Thanks!
-
This reply was modified 11 years by
Alin [tagDiv].
Hi,
Sorry for misunderstanding I also tested this and seems to work fine after regenerate thumbnails: http://screencast.com/t/WK5TAlBv – http://screencast.com/t/jwUag6cme3w
I’m not sure what is happening on your side. Is it apply after you regenerate thumbnails? But how it is revert?
Thanks!
Hi,
If you want change the size of the image just change the width and the height from functions.php and then regenerate thumbnails: http://screencast.com/t/9Cv3knEZe – http://screencast.com/t/1bEiqxenu6uc
Thanks!
Hi,
Unfortunately that happens as the block uses a small thumb and on mobiles it gets enlarged (stretched) via css.
If you don’t mind using a larger thumb image for block’s 11 thumbs you could try to change the thumb size for it. Edit the td_config file and change the width and height of the thumb from here: http://screencast.com/t/7uaZn7UEvGC ..then regenerate thumbnails like this: https://forum.tagdiv.com/how-to-fix-strange-thumbnails/
Please also consider that changing this thumb sizes will also affect mega menu and module 10 which also use this thumbs.
Hope this helps!
Thanks
Hi,
Thanks Chris!
@unplug.tips
We’re sorry for the delay and for all the trouble you’ve experienced using the theme. I’ve checked your site and noticed that you’ve managed solve your issue.
Regarding the https/SSL issues please note that we will include them in the next version of the theme so you don’t need to worry about this and we’re sorry for this as we had it on our todo list but we’ve somehow missed it.
Regarding images please consider that the theme creates thumbs for all images you upload, so if you need to save your host resources then you can consider which thumbs/block you will use then turn the thumbs you don’t need off from theme panel: http://screencast.com/t/kVkTcpkcesU ..and use a plugin like Force Regenerate thumbs: https://wordpress.org/plugins/force-regenerate-thumbnails/ ..which will also remove the unnecessary thumbs.
@Kvr28 Usually Facebook doesn’t update your post new info right away so it would be best ti give it some time or use the debugger tool to fetch the new information: https://developers.facebook.com/tools/debug/
Thanks
Hi,
I guess that you are refer to the Big Slide image, as I did not find any Revolution Slider on your homepage.
The image need to be at least 745x483 which represents the big image thumb size and the image needs to be of that width to fill the whole container. Regenerating thumbnails should solve it unless the image you use it’s smaller that the dimensions needed because WordPress doesn’t enlarge images.
If you use larger images please regenerate your thumbnail following this guide: https://forum.tagdiv.com/how-to-fix-strange-thumbnails/
Please try a plugin like Thumbnail Upscale to enlarge thumbnails: https://wordpress.org/plugins/thumbnail-upscale/ to enlarge thumbnail. For upscale use a combination of plugins Thumbnail Upscale + Force Regenerate.
Thanks!
Hi,
Please try a plugin like Thumbnail Upscale to enlarge thumbnails: https://wordpress.org/plugins/thumbnail-upscale/ to enlarge thumbnail. For upscale use a combination of plugins Thumbnail Upscale + Force Regenerate.
Thanks!
-
This reply was modified 11 years by
Alin [tagDiv].
Not sure if this will fix anything but it’s worth a shot. Have you got the 80×60 thumbsize enabled in Block Settings > Thumbs on modules & blocks? That size seems to be used by the gallery and is turned off by default. You’d have to regenerate thumbnails again after turning it on.
Hi Chris,
Thanks for the quick response. I installed and ran the regenerate thumbnails plugin, cleared the cache, but no luck. I’m not missing any basic media size setting am I?
Might not be your issue, but be sure to run “regenerate thumbnails” to make sure you actually have all the small images 🙂
Hi,
Glad that you managed to solve this!
Please regenerate your thumbnails using this guide: https://forum.tagdiv.com/how-to-fix-strange-thumbnails/ and let me know if you still have issues with this.
Thanks!
Yes! The compression level setting (from my helpful optimization guide) only impacts thumbnails created by WordPress via server imagemagick/GD libs. — it does NOT change the images you upload —
so if you upload image at 40k full size
normal thumb at smaller size, might be 10-14k
set compression higher, thumb might be 7k
No real visible difference — a thumb is just supposed to be an image “hint” to the full page/photo — not presentational anyway.
Kind of like in Photoshop, the diff. between the “10” setting and “7” setting makes the photo half the size, with no real noticeable difference (except with images that have a lot of “red” — ). Jpeg is a “lossy” compression method no matter what (hence why DVDs with low bitrates look like crap also!).
Some people prefer a setting of “60” … but I’ve found “50” works fine unless it’s a portfolio site or something. OR, images with a LOT of “red” which is the bane of jpeg compression.
Try it… set compression to “50” (or “60”) — anything better than default of “90”! Then regenerate thumbnails.
For your full size images you need to start with better compression — or, use something like smush.it (if you can get that to work), or something like mod_pagespeed which will optimize then cache for you.
Anyway, that’s been my experience.
Glad to help 🙂
Today i did simulate my website http://www.wpdiv.com with http://www.mobilephoneemulator.com/
Sometimes there is no issues but very frequently CSS not loading properly and menu got broken as illustrated in below screenshot.
http://oi60.tinypic.com/m096c.jpg
How can i resolve the same?
Expecting your kind co-operation
With regards
Selvam.S
Note : When you testing website via http://www.mobilephoneemulator.com/ don’t forget to navigate the website with simulator itself to regenerate the issue.