Hey guys,
For my homepage I’m using Block 4. For my category page Module M2. Everything looks great on both big and smaller screens. My question is about the display of the featured images in smaller to medium sized screens. Up until a width of about 768px the theme still uses the 324x160px generated image. As the image is as wide as the screen, this results in a very ugly low res thumb from about 400px to 768px width. Do you have any suggestions on how to fix this?
Hello VoZz,
As you can see here -> http://screencast.com/t/0QHgKfiZWt these are all dimensions from all the thumbs that our theme uses for the featured images. Please ensure that you have correctly added your images. Also, please ensure that this issue does not come from your untested plugins which could create this problem. Try to disable all the active plugins, leave just Visual Composer to active, clear all cache and install only the plugins that come bundled with our theme. Also, you can try to use Thumbnail Regenerate & Force Regenerate for your thumbs and check after the results.
Hope this helps. If you need more guidance in this regard, please provide your website URL so I can further inspect the issue.
Thank you for your understanding!
Hey Catalin,
Thanks for your reply. Maybe it’s me, but it doesn’t feel like that adresses the issue I’m describing.
If the theme creates a 324x160px thumb for certain blocks/modules, and the thumb is still used when the screen width (and so the width of the image) is around 700px, it seems to me there is no way that image is ever going to be displayed properly? Regardless of any plugins? The theme just keeps using the 324px width image, while it is stretched to 700px.
The website URL is http://www.tickettipper.nl.
Hello VoZz,
Please notice that our theme only crops the image on the specific size of thumb used. The cropping system for our theme is from center to top. Please check your Theme panel, Block Settings Area->Thumbs on modules&Block and there you can see what sizes are active for your thumbs. If you have an image for example ->700px, the theme will generate a lot of images for each size of the thumbs -> http://screencast.com/t/l46FxjpPQk and this will be used if the specific thumb when this will be used on the theme. Please notice that the theme does not stretch or enlarge the image, but only just cut out. Here you can see the path where the theme generates all the images for all the sizes which are activated from the panel -> http://screencast.com/t/fvhsTwqYar4
Thank you for your understanding!
Hey Catalin,
Maybe I’m not explaining it the right way to you.
I’m not using a 700px image. I upload every image with a size of 1920 x 1080px. I understand that the theme makes different sizes images.
On the homepage I use block 4. The theme uses the 324x160px created images for this block. For bigger screens you have 3 posts next to eachother on regular sized screens. Looks perfect. For the smaller screens you get one post under another screen wide. This works perfect to.
Unless the screen is between about 400px and 750px. You still get one post under another screen wide, but because the theme uses the 324x160px created image, that small image has to cover a width of up to 750px on for example a tablet. And thats when it looks bad. And that’s what I want to fix.
Hello VoZz,
Now I understand what you mean, sorry for my misunderstanding! Unfortunately, as you can see, this is the behaviour of the theme for smaller devices as the image size will be stretched with a bit of CSS (width 100%), even if the quality of the image was loaded in the bigger one. Please notice that is not a simple task to change the structure of this block and if you want to change this, is required to do some additional customizations through code in order to achieve as you wish. This was our developer decision. Also, we work hard further for new improvements and in near future update maybe our developers will find some solutions in this regard but we cannot say for sure the date when this will be available.
If you want to display more levels in our theme and you are not aware of the steps which are needed to take in this regard, please consider hiring a freelancer/developer to help you because we cannot provide customization services at the moment, sorry!
Thank you for your understanding!
Hey Catalin,
I’m glad we understand eachother now 🙂
But that’s to bad. So maybe you could help me with an alternative solution?
If I can’t fix it at the moment, I would like to display a message for people on tablets, something like “Please tilt your device for the best display of this website”.
Could you help me with a CSS media query so that a message is displayed between certain screen widths?
Hello VoZz,
In this case, a quick solution for you, if you want to improve the image quality for your mobile devices when using the Block 4 is to try to change the thumbs that are using for this type of block. Please notice that the block 4 uses the module 2. Also, from td_config.php you have to change the get_image parameter like this -> http://screencast.com/t/yhifkpUip with a big thumb dimension. Also, please notice that this solution requires some CSS additional customizations for good results.
Hope this helps!
Thank you for your understanding!
The link doesn’t work anymore. Can you explain again how to change the thumbnail size for a certain block / module through code. (I am not using the tag composer so do not have access to the flex blocks.)
Hello,
These are the paths => wp-content/plugins/td-composer/legacy/Newspaper/includes/td_config.php => https://i.imgur.com/bQpMgSf.png and this for flex block 1wp-content/plugins/td-composer/legacy/Newspaper/includes/modules/td_module_flex_1.php
Also, please check this topic https://forum.tagdiv.com/topic/how-to-change-the-size-of-thumbs-on-moduleblock/
Thank you!
