Category - Web Design

1
Fix Blurry Product Thumbnail Images in the Divi Shop Module
2
Dark Dreamweaver Theme

Fix Blurry Product Thumbnail Images in the Divi Shop Module

If you have built an eCommerce store using Woocommerce and Divi, you will probably know how powerful these plugins are and just how rapidly you can build a professional, SEO optimised storefront almost entirely in the browser with a minimal amount of coding.

Having said that, there are few shortcomings in Divi, particularly with regards to getting things right for SEO.

One such issue being the low resolution thumbnail images in the Divi shop module.

Blurry, Low Resolution Images

The product photos in the grid listing of the Divi shop module are rendered at just 150px by 150px byt the WordPress Thumbnail function. This means that they have to be scaled up by the browser. The net result being blurry photos.

This might be okay if you have 5 products per row, but if you decide to change the module to show 3 products per row, then those 150px images have to be scaled up to 320px wide by the browser. I’m sure that you’re already aware that scaling up an image to more than double it’s original size is obviously going to reduce image quality, quite a lot. The end result is blurry product photos. Not good if you want a nice looking website or online store:

Blurry Product Photos

 

Increasing Image Resolution

To correct this problem, we will have to tell WordPress (or Divi) to output the images at a higher resolution than 150px. After some digging through the Divi code to trace how the image tags are generated, I found a clean way to set image sizes for product images in archive listings, using WordPress filters.

To increase the size of your shop’s product images, add the following code to the functions.php file within your theme:

function theme_setup() {
 
function theme_size_of_product_thumb($u)
{
return array(332, 332,true);
}
add_filter('single_product_archive_thumbnail_size', 'theme_size_of_product_thumb');
 
}
 
add_action( 'after_setup_theme', 'theme_setup' );

After you have added the code, refresh the frontend of your website and the product images should appear sharp:

Sharp High Resolution Product Photos

 

In the example here, I used 332×332 for the image dimensions as that was sufficient for the 3 items per row I was displaying.

If your images are displayed larger than 332×332, perhaps if you are showing fewer than 3 items per row, then you might want to render your images at a higher resolution.

Bear in mind though that larger images means larger image filesizes, which in turn leads to slower page load times. As long as you don’t go huge, this shouldn’t be too much of an issue.

Dark Dreamweaver Theme

code-colouringIf, like me, you spend all day staring at a Dreamweaver code screen, you may have given thought to your eyesight and the steps you take to preserve it.

After over 10 years of software development, I have finally taken it upon myself to set my IDE background to black. I have tried this a couple of times over the years, but have immediately changed it back due to it looking ‘wierd’. I had just become too accustomed to the colour coding scheme PHP uses and found it extremely difficult to re-adjust.

After a scour on the internet for some sort of ‘theme’, I came across this excellent color scheme.

I’ve now applied this colour scheme to the three PCs I develop on and two weeks down the line I’m really getting used to it. I think it will take another couple of weeks before the colours become second nature to my brain, but it’s worth it in the long run.

Copyright © 2018. Created by Hayden Kibble.