Saturday, December 14, 2013

Change image size in Grid Product, Wordpress

Grid Product is a very good plug in for displaying products.

To show products, you have add <code> [product] </code> in your page.
Its default view is grid type. If you want to see magazine type, use <code>[product view=list]</code>

However, You many face hardship because of the image size in twenty twelve theme.
Default Featured Image size is half of following. The picture is full because it is Tiga theme.



In this case you have to change some code about image size in grid product plugin.

There are two ways.

1. Change and set image size:
-In your wp-content>plugins>grid product folder,  open grid-products.php.
You have to change image size as follows:

Original:
add_image_size('product-image',240,140, true);
add_image_size('product-image2',195,140, true);

After change:

add_image_size('product-image',180,180, true);
add_image_size('product-image2',180,180, true);

-Change thumnail box size.
You can find the following code for getting thumnail. You have to change the final image size.

Original:

$theimage=wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()) , 'product-image');

    $product_shortcode .= '<tr><td align="center"><a href="' . get_permalink() . '"><img src="'.$theimage[0].'" alt="" /></a></td>';


Where to change:
revise img src part as <img src="'.$theimage[0].'" " style="max-width:100px;" alt="" height="100"  />

Thumnail parts are too. One is for list type and the other is grid type. You also have to change both.

Then, you have resize the image and upload it again in Featured Image of your post/product/page.

2. If you use Tiga theme, it is much easier.

In functions.php of Tiga wordpress theme, you can find the following

 add_image_size( 'tiga-140px' , 140, 140, true );
 add_image_size( 'tiga-300px' , 300, 130, true );
 add_image_size( 'tiga-700px' , 700, 300, true );
 add_image_size( 'tiga-620px' , 620, 350, true );
 add_image_size( 'tiga-460px' , 460, 300, true );

Paste them to grid-products.php after original add image.

Find the following codes

$theimage=wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()) , 'product-image');
$theimage=wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()) , 'product-image2');

Change product-image and product-image2 as tiga-140px as follows

$theimage=wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()) ,'tiga-140px' /*'product-image'*/);
$theimage=wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()) ,'tiga-140px' /*'product-image2'*/);

I think it is better to use comment (/* */ )because you can use it later by uncommenting.

After doing it, it can show the original image, you can resize the image in Featured Image and update.
It will show a full fit image.



Thank you.

Reference: codex.wordpress.org/Function_Reference/add_image_size

No comments:

Post a Comment