Ask your WordPress questions! Pay money and get answers fast! (more info)

Resize thumbnails to display correctly on catalogue archive page WordPress

  • SOLVED

Hello, So thankful to find this site. :)

I'm using a theme called Lorem & Ipsum eCommerce by AIT themes with Woocommerce.

The images are not sized correctly on the product category archive page. The grid template should call 300 x 300 size images to the page but instead calls 150 x 150 thumbs ad then upscales to 300 x 300 making them look pixelated and blurry.

http://www.myorganichavynn.com/product-category/organic-baby/
If you look at the source code for this page you will see that the 150 x 150 size is being used.

I have already changed my WP Media/Settings from thumbnail size of 150 x 150 to 300 x 300 but that did not help.
I have also checked the woocommerce.functions.php and the thumbs are sized at 300 x 300.

The theme developer requested I upgrade the theme which I have also done and then used the regenerate images pluggin but still the images are 150 x 150.

The 300 x 300 size images are available in the media folder.
How do I make the template call the 300 x 300 size images?

Thanks so much,
Annette Kalapaca

Answers (3)

2013-09-23

Navjot Singh answers:

Can you paste your theme's function.php here?


Annette Kalapaca comments:


<?php

/**
* AIT WordPress Theme
*
* Copyright (c) 2012, Affinity Information Technology, s.r.o. (http://ait-themes.com)
*/

// ==================================================
// Enables theme custom post types, widgets, etc...
// --------------------------------------------------

$aitThemeCustomTypes = array( 'grid-portfolio' => 31);

$aitThemeWidgets = array('post','flickr','submenu','twitter');

$aitEditorShortcodes = array('custom','columns','images','posts','buttons','boxesFrames','lists','notifications','modal','social','video','gMaps','gChart','language','tabs','gridgallery');

$aitThemeShortcodes = array('boxesFrames' => 2,'buttons' => 1,'columns'=> 1,'custom'=> 1,'images'=> 1,'lists'=> 1,'modal'=> 1,'notifications'=> 1,'posts'=> 1,'sitemap'=> 1,'social'=> 1,'video'=> 1,'language'=> 1,'gMaps'=> 1,'gChart'=> 1,'tabs'=> 1,'gridgallery' => 1);

if ( ! isset( $content_width ) ) $content_width = 1000;

// ==================================================
// Loads AIT WordPress Framework
// --------------------------------------------------

require dirname(__FILE__) . '/AIT/ait-bootstrap.php';



// ==================================================
// Metaboxes settings for posts and pages
// --------------------------------------------------

$pageOptions = array(
'featured-image' => new WPAlchemy_MetaBox(array(
'id' => '_ait_featured_images_options',
'title' => __('Featured Image', 'ait'),
'types' => array('post'),
'context' => 'normal',
'priority' => 'core',
'config' => dirname(__FILE__) . '/conf/post-featured.neon'
)),
'slider' => new WPAlchemy_MetaBox(array(
'id' => '_ait_slider_options',
'title' => __('Revolution Slider Settings', 'ait'),
'types' => array('post', 'page'),
'context' => 'normal',
'priority' => 'core',
'config' => dirname(__FILE__) . '/conf/page-slider-meta.neon',
)),
'testimonials' => new WPAlchemy_MetaBox(array(
'id' => '_ait_testimonials_options',
'title' => __('Testimonials Page Settings', 'ait'),
'types' => array('post', 'page'),
'context' => 'normal',
'priority' => 'core',
'config' => dirname(__FILE__) . '/conf/page-testimonials-meta.neon'
)),
'sections-order' => new WPAlchemy_MetaBox(array(
'id' => '_ait_sections_order',
'title' => __('Sections order for this page', 'ait'),
'types' => array('page'),
'context' => 'normal',
'priority' => 'core',
'config' => dirname(__FILE__) . '/conf/sections-order.neon'
)),
);



// ==================================================
// Theme's scripts and styles
// --------------------------------------------------

function aitEnqueueScriptsAndStyles()
{
if (!is_admin()) {

// just shortcuts
$s = THEME_CSS_URL;
$j = THEME_JS_URL;

aitAddStyles(array(
'jquery-ui-custom' => array('file' => "$s/jquery-ui-1.8.16.custom.css"),
'ait-anything-slider' => array('file' => "$s/anythingslider.css"),
'jquery-colorbox' => array('file' => "$s/colorbox.css"),
'jquery-fancybox' => array('file' => "$s/fancybox/jquery.fancybox-1.3.4.css"),
'ait-jquery-hover-zoom' => array('file' => "$s/hoverZoom.css"),
'jquery-prettysociable' => array('file' => "$s/prettySociable.css"),
));

$scripts = array(
'jquery-ui-tabs' => true, // only enqueue, already registered in WP
'jquery-ui-accordion' => true,
'ait-jquery-plugins' => array('file' => "$j/libs/jquery-plugins.js", 'deps' => array('jquery')),
'ait-jquery-anything-slider-fx' => array('file' => "$j/libs/jquery.anythingslider.fx.min.js", 'deps' => array('jquery')),
'ait-jquery-anything-slider' => array('file' => "$j/libs/jquery.anythingslider.min.js", 'deps' => array('jquery', 'ait-jquery-plugins', 'ait-jquery-anything-slider-fx')),
'ait-sliders' => array('file' => "$j/sliders.js", 'deps' => array('jquery', 'ait-jquery-plugins', 'ait-jquery-anything-slider-fx', 'ait-jquery-anything-slider')),
'ait-woocommerce' => array('file' => "$j/woocommerce.js", 'deps' => array('jquery', 'wc-add-to-cart', 'woocommerce'), 'ver' => false, 'inFooter' => true),
'ait-gridgallery' => array('file' => "$j/gridgallery.js", 'deps' => array('jquery', 'ait-jquery-plugins')),

'ait-main-script' => array('file' => "$j/script.js", 'deps' => array('jquery', 'ait-jquery-plugins'), 'localize' => array('imgUrl' => THEME_IMG_URL)),
);

if(basename(get_page_template()) == 'homepage-products-tabs.php')
$scripts['ait-woocommerce-products-tabs'] = array('file' => "$j/woocommerce-products-tabs.js", array('jquery'), 'ver' => false, 'inFooter' => true);

aitAddScripts($scripts);
}
}

add_action('wp_enqueue_scripts', 'aitEnqueueScriptsAndStyles');



// ==================================================
// Theme setup
// --------------------------------------------------

function aitThemeSetup()
{
load_theme_textdomain('ait', get_template_directory() . '/languages');

add_editor_style();

add_theme_support('post-thumbnails');
add_theme_support('automatic-feed-links');
add_theme_support('woocommerce');

register_nav_menu('primary-menu', __('Primary Menu', 'ait'));
register_nav_menu('footer-menu', __('Footer Menu', 'ait'));
}

add_action('after_setup_theme', 'aitThemeSetup');



// ==================================================
// Register our sidebars and widgetized areas.
// --------------------------------------------------

function aitWidgetAreasInit()
{
aitRegisterWidgetAreas(array(
'homepage' => array('name' => __('Homepage Widget area', 'ait')),
'subpages' => array('name' => __('Subpages Widget Area', 'ait')),
'blog' => array('name' => __('Blog Widget Area', 'ait')),
'post' => array('name' => __('Post Widget Area', 'ait')),
'footer-area' => array('name' => __('Footer Widget Area', 'ait')),
'shop-sidebar' => array('name' => __('Shop Sidebar Widget Area', 'ait')),
'shop-filter' => array(
'name' => __('Shop Filter Widget Area', 'ait'),
'description' => __('This widget area can contain only these 3 widgets: Layered Nav, Product Tags and Product Categories. Other widgets inserted here will not be displayed in the filter widget area on shop page.', 'ait')
),
'product' => array('name' => __('Product Page Widget Area', 'ait')),
));
}

add_action('widgets_init', 'aitWidgetAreasInit');



// ==================================================
// Some helper functions and filters for theme
// --------------------------------------------------

function default_menu(){
wp_nav_menu(array('menu' => 'Main Menu', 'fallback_cb' => 'default_page_menu', 'container' => 'nav', 'container_class' => 'mainmenu', 'menu_class' => 'menu clear'));
}


function default_page_menu(){
echo '<nav class="mainmenu">';
wp_page_menu(array('menu_class' => 'menu clear'));
echo '</nav>';
}


function default_footer_menu(){
wp_nav_menu(array('menu' => 'Main Menu', 'container' => 'nav', 'container_class' => 'footer-menu', 'menu_class' => 'menu clear', 'depth' => 1));
}

remove_action('wp_head', 'wp_generator'); // do not show generator meta element

add_filter('widget_title', 'do_shortcode');
add_filter('widget_text', 'do_shortcode'); // do shortcode in text widget

add_filter('home_template', 'aitIndexTemplate');



// ==================================================
// WooCommerce
// --------------------------------------------------

/**
* Removes slider metabox when custom page template is selected
*/
function aitRemoveSliderMetabox($post)
{
global $wp_meta_boxes;

if(isset($post->page_template) and ($post->page_template == 'homepage-products-slider.php' or $post->page_template == 'homepage-products-tabs.php')){
if(isset($wp_meta_boxes['page']['normal']['core']['_ait_slider_options_metabox']))
unset($wp_meta_boxes['page']['normal']['core']['_ait_slider_options_metabox']);
}
}

add_action('add_meta_boxes_page', 'aitRemoveSliderMetabox', 0, 3);


/**
* Includes WooCommerce configuration
*/
require_once dirname(__FILE__) . '/woocommerce/woocommerce-functions.php';



// ==================================================
// Loads Revolution Slider
// --------------------------------------------------

require_once dirname(__FILE__) . '/plugins/ait-revslider.php';


Navjot Singh comments:

Not much of help. Can you give me your ftp and login details?


Annette Kalapaca comments:

yes ...

wp login:
www.myorganichavynn.com/wp-admin
username: admin
password: nextpage

FTP:
www.myorganichavynn.com
usename: myorgani
password: nextpage.5266

thanks.


Navjot Singh comments:

Done. It works. Had to enable the catalog image size option in the settings temporarily to get around it.


Navjot Singh comments:

Check PM


Navjot Singh comments:

I think I was working on it. Howcome he is getting voted for it?


Navjot Singh comments:

Click Vote to award prize link beneath the question to award the prize money.

2013-09-23

Expert answers:

1. So, go to Settings > Media and make your sizes bigger
2. Go to WooCommerce > Settings > Catalogue - you will find at the very bottom "Image Options". Change the size here too.

Read this article: http://docs.woothemes.com/document/using-the-appropriate-product-image-dimensions/
Use regenerate thumb plugin: http://wordpress.org/extend/plugins/regenerate-thumbnails/


Annette Kalapaca comments:

Thanks Subharanjan,

1. So, go to Settings > Media and make your sizes bigger
I have done this.

2. Go to WooCommerce > Settings > Catalogue - you will find at the very bottom "Image Options". Change the size here too.
The theme developer has disabled this feature in the woo commerce settings.

I installed the regenerate thumbs pluggins but the theme template calls the 150 x 150 image.


Expert comments:

Check... it works now !!


Annette Kalapaca comments:

YES it does. Thanks so much.
What change did you make?
If I click up vote do you get paid?
Thanks again!
xo
Annette


Expert comments:

1. I just updated the option values by below code:
update_option( 'woocommerce_thumbnail_image_width', '300' );
update_option( 'woocommerce_catalog_image_width', '300' );

2. set_post_thumbnail_size( 300, 300);

3. Checked and as you had already installed Regenerate Thumbnails, I went to Tools -> Regen. Thumbs and completed generating thumbs , which you hadn't done I guess.

2013-09-23

Ellah Alzona answers:

Try adding this code to the functions.php

if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 300, 300); // default Post Thumbnail dimensions
}



Annette Kalapaca comments:

Thanks Ellah A.

I pasted the code but it didn't help. :(

I attached a screen shot of the source code.
It's still calling the 150 x 150 image ...
http://www.myorganichavynn.com/product-category/organic-baby/