Fatured image size

[markhatter]

Hi,

I am doing some performance testing and a big issue is the size of the featured image that is used on the homepage downloads grid.

In a single product, the image size is fine but I’d like to serve up a smaller version on the home page. Is this possible?

This is an example of suggestion I get from GTMetrix.com

https://markhatter.co.uk/wp-content/uploads/edd/2019/08/mark-hatter-music-tiko-giorgadze-always-smiling.jpg is resized in HTML or CSS from 576×384 to 264×176. Serving a scaled image could save 53.8KiB (78% reduction).

Thanks
Mark

[FocuxTheme Support]

Hi

Please update ThemeVan Toolkit to 1.4.3. We have added a new field called “Featured Image size” for EDD Grid in page builder, you can set it to ‘medium’.https://www.dropbox.com/s/lg8o4qig4xc1ut6/edd-product-grid.jpeg?dl=0

Thanks

[markhatter]

Hi,
Thank you but I’m not using the EDD grid in that way. I’m using the [downloads] shortcode. Can I still specify an image size somehow?

Thanks

[markhatter]

Also, after updating the Themevan toolkit, the widgets at the bottom of my site changed!

I can’t be 100% it was the update that caused it but I haven’t made any other changes.

Thanks

[markhatter]

Can I have an update please?

Also, the featured image will need to be a different size on the grid for mobiles so how would this setting work?

Thanks

[FocuxTheme Support]

Hi

Please update the theme to v1.8.2 after 1 hour, I will add a new feature that set the thumbnail size for the different device.

Now the feature image size on the desktop version is ‘medium’, and on the mobile phone is ‘thumbnail’. They are WordPress built-in size. If you want to custom the size, you can copy the following function to the functions.php of your child theme

if( function_exists( 'dgwork_thumbnail_size' ) ) {
  function dgwork_thumbnail_size(){
     if( dgwork_device( 'phone' ) ){
         return 'thumbnail'; // for phone  150 x 150
     }elseif( dgwork_device( 'tablets' ) ){
         return 'medium'; // for tablets 300 x 300
     }else{
         return 'medium'; // for desktop 300 x 300
     }
  }
}

for example, if you want to change the size to 200 x 150, just write as

return array(200, 150);

And you may have to regenerate all thumbnails by with https://wordpress.org/plugins/regenerate-thumbnails/

[FocuxTheme Support]

You said “the bottom of my site changed!”, is it possible to post a screenshot?

[markhatter]

Thank you. I will let you know if I still have a problem.

The bottom of my site (the 4 widgets) have changed. The first 2 have changed to Recent Blogs and Instagram widgets.

Not sure how to get you a screenshot? I’ll try replying to your emails

Thanks

[markhatter]

Thanks, but I cannot get the image size to work.

I added the following to functions.php

if( function_exists( ‘dgwork_thumbnail_size’ ) ) {
function dgwork_thumbnail_size(){
if( dgwork_device( ‘phone’ ) ){
return ‘thumbnail’; // for phone 150 x 150
}elseif( dgwork_device( ‘tablets’ ) ){
return ‘medium’; // for tablets 300 x 300
}else{
return ‘medium’; // for desktop 300 x 300
}
}
}

I have registered a new size called “main page grid size” in my functions.php (dimensions are 264 x 176)

I did this by adding

add_theme_support( ‘post-thumbnails’ );
add_image_size( ‘main page grid size’, 264, 176 );

When I look at the source code on the page, it doesn’t choose the right image.

I was able to get it to work but changing .get_the_post_thumbnail(). where the image displays to .get_the_post_thumbnail(”, ‘main page grid size’). The only issue with this method is that it doesn’t change the image on a mobile device.

Thanks

[markhatter]

Thanks, but I cannot get the image size to work.

I added the following to functions.php

if( function_exists( ‘dgwork_thumbnail_size’ ) ) {
function dgwork_thumbnail_size(){
if( dgwork_device( ‘phone’ ) ){
return ‘thumbnail’; // for phone 150 x 150
}elseif( dgwork_device( ‘tablets’ ) ){
return ‘medium’; // for tablets 300 x 300
}else{
return ‘medium’; // for desktop 300 x 300
}
}
}

I then tried to do it this way –

I registered a new size called “main page grid size” in my functions.php (dimensions are 264 x 176)

I did this by adding

add_theme_support( ‘post-thumbnails’ );
add_image_size( ‘main page grid size’, 264, 176 );

I was able to get it to work but changing .get_the_post_thumbnail(). where the image displays to .get_the_post_thumbnail(”, ‘main page grid size’). This works great but the only issue with this method is that it doesn’t change the image on a mobile device.

(I have also regenerated my thumbnails to make sure the sizes exist)

Thanks

[FocuxTheme Support]

First of all, make sure you update the theme to the latest version.

Change add_image_size( ‘main page grid size’, 264, 176 ); to add_image_size( ‘main_page_grid_size’, 264, 176 );

Then, use main_page_grid_size in the following function

if( function_exists( 'dgwork_thumbnail_size' ) ) {
  function dgwork_thumbnail_size(){
     if( dgwork_device( 'phone' ) ){
         return 'main_page_grid_size'; // for phone
     }elseif( dgwork_device( 'tablets' ) ){
         return 'main_page_grid_size'; // for tablets
     }else{
         return 'main_page_grid_size'; // for desktop
     }
  }
}

Of course, you can set a different size for each device.

The last step, regenerate the thumbnail.

Thanks

[markhatter]

Hi,

Thank you. This seems to partly work 🙂

I have set the desktop size to use the ‘main_page_grid_size’ which is now working perfectly. However, if I open a single product, it is also using that size which is too small on a single page. I need to be able to use a larger image on the single product page. Also, the single product page loads strangely with a thin black box loading before the product.

If I load the main grid page on a mobile sized page on the desktop or at https://www.responsivedesignchecker.com/, it also still loads the main_page_grid_size image rather than the medium one.

Basically, everything now uses the ‘main_page_grid_size’ size.

You can see it here – markhatter.co.uk

This is what I have in functions.php

add_image_size( ‘main_page_grid_size’, 264, 176 );
if( function_exists( ‘dgwork_thumbnail_size’ ) ) {
function dgwork_thumbnail_size(){
if( dgwork_device( ‘phone’ ) ){
return ‘medium’; // for phone
}elseif( dgwork_device( ‘tablets’ ) ){
return ‘medium’; // for tablets
}else{
return ‘main_page_grid_size’; // for desktop
}
}
}

Thanks

[FocuxTheme Support]

Hi

Just try to improve the function as this:

if( function_exists( 'dgwork_thumbnail_size' ) ) {
  function dgwork_thumbnail_size(){
     if( dgwork_device( 'phone' ) ){
         return 'medium'; // for phone
     }elseif( dgwork_device( 'tablets' ) ){
         return 'medium'; // for tablets
     }else{
         if( is_single() ){
           return 'large'; // for desktop single post
         }else{
           return 'main_page_grid_size';
         }
     }
  }
}

You’d better check the mobile version with your real mobile phone, not the responsive window or simulator. Because the program can only detect the real device. I believe the file name of the featured image is different from the desktop version.

Thanks

[Author]

Posts