using WooCommerce I put this snippet in function.php to define the size of images overwriting the panel settings :
function yourtheme_woocommerce_image_dimensions() {
$single = array(
'width' => '400', // px
'height' => '300', // px
'crop' => 1 // true
);
$thumbnail = array(
'width' => '180', // px
'height' => '135', // px
'crop' => 1 // false
);
$catalog = array(
'width' => '140', // px
'height' => '105', // px
'crop' => 1 // true
);
// Image sizes
update_option( 'shop_single_image_size', $single ); // Single product image
update_option( 'shop_thumbnail_image_size', $thumbnail );
update_option( 'shop_catalog_image_size', $catalog ); // Product category thumbs
All works fine but now I'd like to set different image sizes relating to $catalog just in single product page (where there's a widget showing that images).
I've tried with conditional statements, cause I don't want to use css tricks, but without luck.
Any help will be appreciate.
Thank you.
Did you re-generate the thumbnails after changing the size? If no, than try force regenerate thumbnails plugin to re-generate images that will have new sizes. When indicating new size in Wp functions, than it will affect new uploads but you also need to regenerate new sizes for previously uploaded ones.
Related
I'm using woocommerce hooks with thumbnail regenerate plugin but still have same issue i didn't see any changes in my website i removed cache as well.
add_filter( 'woocommerce_get_image_size_gallery_thumbnail', 'override_woocommerce_image_size_gallery_thumbnail');
function override_woocommerce_image_size_gallery_thumbnail( $size ) {
// Gallery thumbnails: proportional, max width 200px
return array(
'width' => 100,
'height' => 100,
'crop' => 0,
);
}
I think the answer to that is in the "Appearance / Customize" then Woocommerce. There you can choose how products images are cropped.
Product images are displaying wrong - you can see the next image when not selected. <div> element with data-thumb attribute has width 360 pixels. This is the default view when page is loaded:
but when you click anywhere it will disappear and second image is not visible anymore:
So I tried to change single_image_width value from 300 px to 800 with no result
function theme_woocommerce_setup() {
add_theme_support(
'woocommerce',
array(
'thumbnail_image_width' => 150,
'single_image_width' => 800,
'product_grid' => array(
'default_rows' => 3,
'min_rows' => 1,
'default_columns' => 4,
'min_columns' => 1,
'max_columns' => 6,
),
)
);
//add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );
}
add_action( 'after_setup_theme', 'theme_woocommerce_setup' );
My theme doesn't overwrite product-image.php nor product-thumbnails.php templates located in /woocommerce/templates/single-product/ directory and also doesn't use any filters via functions.php file to change behavior of gallery.
Basically, I'm trying to do a simple shortcode wherein the user can display a fixed size of an image regardless of the size. For Example [gallery] image [/gallery] it will be displayed like this
http://i255.photobucket.com/albums/hh140/testament1234/thumb_zps5820cef3.png
I tried coming up with my own code but looks like my codes are wrong. I'm not familiar with PHP or WordPress coding yet. I know things like this can be done using plugins but I would rather learn how to code
function image_gallery($atts, $content=null) {
extract(shortcode_atts(array(
'width' => 400,
'height' => 200,
), $atts));
return '<div class="gallery"></div>';
}
add_shortcode('gall', 'image_gallery' );
the styles was provided via style.css
function image_gallery($atts, $content=null) {
extract(shortcode_atts(array(
'width' => 400,
'height' => 200,
'image' => ''
), $atts));
return '<div class="gallery"><img src="'.$image.'" width="'.$width.'" height="'.$height.'" /></div>';
}
add_shortcode('gall', 'image_gallery' );
activate the plugin
in your post or page add this shortcode [gall image="path_to_your_image"]
I created a wordpress theme based on the classic twentyten theme.
I changed the size of the header images in the functions.php but apart from that I didnt mess around with the custom header stuff. Now wordpress is ignoring it when I assign featured images to pages and instead only displays the background selected in the header settings.
The size of the image doesnt seem to have anything to do with the problem. I have tried using the exact image size and larger images, they are always ignored...
Thanks if you can help!
PS. Here a link to the website: http://stuck-mueller.de/beta/
here is the code from the functions.php:
// The custom header business starts here.
$custom_header_support = array(
// The default image to use.
// The %s is a placeholder for the theme template directory URI.
'default-image' => '%s/images/headers/path.jpg',
// The height and width of our custom header.
'width' => apply_filters( 'twentyten_header_image_width', 960 ),
'height' => apply_filters( 'twentyten_header_image_height', 240 ),
// Support flexible heights.
'flex-height' => true,
// Don't support text inside the header image.
'header-text' => false,
// Callback for styling the header preview in the admin.
'admin-head-callback' => 'twentyten_admin_header_style',
);
add_theme_support( 'custom-header', $custom_header_support );
if ( ! function_exists( 'get_custom_header' ) ) {
// This is all for compatibility with versions of WordPress prior to 3.4.
define( 'HEADER_TEXTCOLOR', '' );
define( 'NO_HEADER_TEXT', true );
define( 'HEADER_IMAGE', $custom_header_support['default-image'] );
define( 'HEADER_IMAGE_WIDTH', $custom_header_support['width'] );
define( 'HEADER_IMAGE_HEIGHT', $custom_header_support['height'] );
add_custom_image_header( '', $custom_header_support['admin-head-callback'] );
add_custom_background();
}
// We'll be using post thumbnails for custom header images on posts and pages.
// We want them to be 940 pixels wide by 198 pixels tall.
// Larger images will be auto-cropped to fit, smaller ones will be ignored. See header.php.
set_post_thumbnail_size( $custom_header_support['width'], $custom_header_support['height'], true );
You don't need the apply_filters() just assign the width and height to integers like:
'width' => 960,
'height' => 240,
Check out the codex here for more info
I wanted to pull the settings found for Media settings (thumbnail, medium and large declared sizes) into my template. How do I do it, I cannot seem to find on Wordpress API, or maybe I didn't search quite well.
Thanks
There does not appear to be a special set of functions to retrieve these, but they are saved in the options table, so with a little bit of effort we can retrieve all those values.
Image Sizes
For the image dimension settings, you should be able to get these from the options table. The default sizes are 'medium', 'thumbnail', 'large', and 'post-thumbnail'. Keep in mind that crop only exists for thumbnails, and that it is a checkbox.
To get dimensions do the following:
$thumbnail_size = array (
'width' = get_option('thumbnail_size_w'),
'height'= get_option('thumbnail_size_h'),
'crop' = get_option('thumbnail_crop')
);
$medium_size = array (
'width' = get_option('medium_size_w'),
'height'= get_option('medium_size_h')
);
$large_size = array (
'width' = get_option('large_size_w'),
'height'= get_option('large_size_h')
);
Embeds
Keep im mind that auto refers to whether or not to use oEmbed to auto embed media when people paste in a url.
$embeds = array(
'auto' => get_option('embed_autourls'),
'width'=> get_option('embed_size_w'),
'height' => get_option('embed_size_h')
);
Uploading Files
The upload path is relative to ABSPATH (that is to say, it can not be outside the WordPress root directory - there is also a constant 'UPLOADS' that can change this setting. Keep in mind that the Year/Month option is another checkbox.
$upload_path = array(
'path' => get_option('upload_path'),
'url_path' => get_option('upload_url_path'),
'yearmonth_folders' => get_option('uploads_use_yearmonth_folders')
);
If we wanted to put this together as one big function for easy use...
/**
* Returns settings from the Media Settings page.
*
* #author Eddie Moya
* #param string $option (Optional) The key for the particular set of options wanted.
*
* #return array Returns a set of specific options if $options is set, otherwise returns all optons.
*/
function get_media_settings($option = null){
$thumbnail_size = array (
'width' = get_option('thumbnail_size_w'),
'height'= get_option('thumbnail_size_h'),
'crop' = get_option('thumbnail_crop')
);
$medium_size = array (
'width' = get_option('medium_size_w'),
'height'= get_option('medium_size_h')
);
$large_size = array (
'width' = get_option('large_size_w'),
'height'= get_option('large_size_h')
);
$embeds = array(
'auto' => get_option('embed_autourls'),
'width'=> get_option('embed_size_w'),
'height' => get_option('embed_size_h')
);
$upload_path = array(
'path' => get_option('upload_path'),
'url_path' => get_option('upload_url_path'),
'yearmonth_folders' => get_option('uploads_use_yearmonth_folders')
);
$settings = array(
'thumbnail_size' => $thumbnail_size,
'medium_size' => $medium_size,
'large_size' => $large_size,
'embed_size' => $embeds,
'upload_path' => $upload_path
);
if(!empty($option)){
return $settings[$option];
else
return $settings;
}
You are of course free or organize all that data however you want, this is just an example. You can obviously also just directly get the options you want, although it might be annoying to have to remember all their names.