Hi, how can we force the images of Big Grid to occupy all the space? Look here-> https://dl.dropboxusercontent.com/u/22334399/Schermata%202015-04-19%20alle%2022.00.50.png
Need to use images “larger” than that size, or use the “enlarge thumbnails” plugin, since WP cannot enlarge images by default to “fit spaces.”
I use the “enlarge thumbnails” plugin; and really all themes should probably “suggest” this since WordPress has chosen to disable this commonly needed function (stupidly).
Hi,
If your featured image is smaller than – http://screencast.com/t/fJJGUc67yC5 you will need to use plugin like Thumbnail Upscale to enlarge thumbnails: https://wordpress.org/plugins/thumbnail-upscale/ For upscale use a combination of plugins Thumbnail Upscale + Force Regenerate. Like Christopher already said WordPress doesn’t enlarge images.
Thanks!
Sorry… yes!! I meant to say “Thumbnail Upscale” plugin. Not enough sleep on Sunday 🙂
(doh!!!)
You can’t force without plugin? Putting maybe a command that tells the photos to expand inside the big grid occupying all the space? A 100%.
Sure you could hack that with CSS, but it’s still not going to be proportionally correct. And Google will ding you for “resizing” the image vs serving the image “at actual size” in pagespeed insights.
All the plugin does is re-enable the function that wordpress SHOULD have but they disable; which allows a new image to be written to fill the space and crop to fit.
But the picture remains the same, only it is enlarged via CSS to not show whitespaces. How can I do?
Wait for tagdiv to provide help on editing the big grid module to load image at 100% width and hide overlflow. Of course if you set percentages, that might not work consistently unless all your images are same size. And 100% width wouldn’t fill both width and height ….
Installing the plugin simplest thing. It’s tiny. We use it on all our sites. Only “best solution” to your issue.
The white space is always a little, so if you fit 100% do you notice the deformity.
I use it for all our sites…
example:
then notice the third slide on homepage
http://californianewswire.com/
No white space with “enlarge and crop” in the slider; works same way on the big grid.
(pardon the hideous URL for the post — it’s a 10 year old site and those permalinks kind of suck …) !
Ok, I see that the guys at tagDiv 😉
(yeah, I don’t work here … I just use the theme for our sites so usually have some “been there done that” help to share … we have nothing to do with tagdiv, just use their themes ) 😉
Hi,
Thanks Chris!
@OverPress The best solution is to use images at least at that size. But if you don’t want to use a plugin and you want to use css code please try this: http://screencast.com/t/Ds2nkjyRlfxK – http://screencast.com/t/xKMaUrMC – http://screencast.com/t/YgcSWWJjl
.td-big-grid-post-0 .entry-thumb{
min-height: 100%;
}
.td-big-grid-post-0 .td-module-thumb {
height: 100%;
}
.td-big-grid-post-0 .td-module-thumb a{
height: 100%;
}
@media (max-width: 767px) {
.td-big-grid-post-0 {
min-height: 100px !important;
max-height: 300px !important;
}
}
Thanks!
OK it works in big grid. But in the big slide? -> https://dl.dropboxusercontent.com/u/22334399/Schermata%202015-04-21%20alle%2011.18.55.png
This is the link problem -> http://overpress.it/news/
Hi,
Try this custom css for Slider: http://screencast.com/t/cPRGUo4o
.td_normal_slide .td-theme-slider.iosSlider-col-3 .td-module-thumb img {
min-height: 100%;
}
.td_normal_slide .td-theme-slider.iosSlider-col-3 .td-module-thumb a, .td_normal_slide .td-theme-slider.iosSlider-col-3 .td-module-thumb {
height: 100%;
}
Thanks!
Works, thanks!
Hi,
Please try this custom css: http://screencast.com/t/ivWMx3f4b9
.single_template_4 .td-post-featured-image img {
width: 100%;
}
Thanks!
Thanks! 🙂
