[Suggestion] Better quality images on Module 10 from mobile

Posted in: Newsmag
Post count: 90

Hello, I had a problem with quality of images in module 10 viewed from mobile, as they’re pixeled as the default size used is around 150px and they appear to full screen on mobile if you use them to show the latest post on your blog page.

This is my solution. It’ll load a bigger image, but sizes are not that much great to have a bad impact on website performances.

1. Create a new image size for thumbnails (e.g. I’ve used 640×350)
2. Modify Newsmag->includes->modules->td_module_10 in this way:

<div class="<?php echo $this->get_module_classes();?>" <?php echo $this->get_item_scope();?>>
<?php echo $this->get_image('td_640x350');?>

<div class="item-details">

3. add this code to the child theme CSS:

@media (min-width: 768px) {
.td_module_10 .td-module-thumb img {
max-width: none;
height: 135px;
width: 246px;
margin-left: -33px;
}
.td_module_10 .td-module-thumb {
width: 180px;
height: 135px;
overflow: hidden;
}
.td_module_10 .td-module-thumb .td-video-play-ico img {
max-width: 40px;
max-height: 40px;
}
.td_module_10 .td-module-thumb .td-video-play-ico {
left:103px;
}
}

Viewing 1 post (of 1 total)
You must be logged in to reply to this topic.