Show the smaller image instead of larger image in woocommerce - wordpress

I am using woo-commerce theme, in homepage image size criteria is around 234×350 when clicked it will be taken to it's specific page having image size of 450x600.. if user needs to see f in detail user can click the respective image and shown into real 1606×2406 dimension. However, woo-commerce shows the original image size in homepage of 1606x2406 leading to the massive page size. Is there any solution to show smaller dimension of the same image?
Here's the code of fetching image:
<?php foreach($metal_chairs as $key=>$metal):
$series =get_field('series',$metal->ID);
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $metal->ID ), $full_size );
$full_image = wp_get_attachment_image_src( get_post_thumbnail_id( $metal->ID ), 'full' );
$product = wc_get_product( $metal->ID );?>
<div class="product-<?php echo $key+1;?> swiper-slide products">
<a href="<?php echo get_the_permalink($metal->ID);?>" alt="">
<img srcset="<?php echo esc_url($image[0]);?>" src="<?php echo esc_url($image[0]);?>" alt="<?php echo esc_attr($metal->post_title);?>" />
</a>
</div>

This call are made by the template itself, not WooCommerce. You need to locate that template file a look at the hook. (This files are usually located at /yourtheme/woocommerce)
You can try changing this
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $metal->ID ), $full_size );
for this
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $metal->ID ), 'thumbnail' );

Related

How to display images of child products in woocommerce group product?

Recently I was designing in wordpress with woocommerce. While creating group products I wanted to display images of child products too. I checked on "catalog visibility" too but only name appears.
Well I found the answer, add this to wherever you want to display an image:
<?php $img_url = $image = wp_get_attachment_image_src( get_post_thumbnail_id( $loop->post->ID ), 'single-post-thumbnail' );?>
<img src="<?php echo $image[0]; ?>" data-id="<?php echo $loop->post->ID; ?>">

How to set WordPress RSS feed's image size in pixels?

Beyond the 'thumbnail' 'medium' and 'large' sizes? (and as seen applied in this answer: https://stackoverflow.com/a/9131274/4415757)
Image size doesn't seem to be customizable through mailchimp RSS-to-campaign editor, and when I tried to set a width and height inside the tag in the RSS file, it didn't work; maybe a nested quotation marks issue?
Here is how I inserted my post featured image into the custom made RSS file:
<?php while(have_posts()) : the_post(); ?>
<item>
<title><?php the_title_rss(); ?></title>
<link><?php the_permalink_rss(); ?></link>
<?php if(get_the_post_thumbnail()): ?>
<media:content url="<?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'medium'); echo $image[0]; ?>" medium="image" />
<?php endif; ?>
I tried to substitute 'medium' by 'thumbnail' and that seems to be he right parameter to manipulate, but when I tried to substitute it by 'width="600px" height="300px"' for example, I got the original image sizes instead.
Here is the solution I found. It is not about defining the image size in pixels in the RSS file but more like creating a new image size category in wordpress and then calling that size in the RSS media tag.
According to the article http://havecamerawilltravel.com/photographer/wordpress-resize-thumbnails:
I created an extra image size in wordpress, using the function add_image_size in my functions.php file. Example:
<?php
add_image_size( 'rss-thumb', 200, 150, true );
add_image_size( 'search-thumb', 150, 150, true );
add_filter( 'image_size_names_choose', 'my_custom_sizes' );
function my_custom_sizes( $sizes ) {
return array_merge( $sizes, array(
'rss-thumb' => __( 'RSS Thumb' ),
'search-thumb' => __( 'Search Thumb' ),
) );
}?>
Chosen the new image size in the RSS file, inside the tag;
<?php if(get_the_post_thumbnail()): ?>
<media:content url="<?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'rss-thumb'); echo $image[0]; ?>" medium="image" />
<?php endif; ?>
Regenerated the thumbnails with the help of a plugin "Force Regenerate Thumbnails", so the existing images would be saved wih the newly created size-category also.

Wordpress - How to display original featured Image Size in Post

I have created custom Post type "slider". The problem I am having is It is not displaying the original picture size in the slider.
Here's my code
<?php
$options = array(
'post_type' => "slideshow",
);
$my_query = new WP_Query($options);
while ($my_query->have_posts()) : $my_query->the_post();
if ( has_post_thumbnail() ) {
$image = wp_get_attachment_image_src( get_post_thumbnail_id( the_ID()));
}?>
<div data-thumb="<?php echo $image[0];?>"
data-src="<?php echo $image[0];?>">
</div>
<?php endwhile; ?>
According to the docs, you could pass the parameter large to the wp_get_attachment_image_src function:
wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
The problem with this is that checking the source code for this function seem to be a limitation in the size of the image.

In wordpress how to get post pecific image gallery for single post?

I am new in wordpress and have very basic knowledge of php.
I have created post. And in the specific post I want to show gallery related to that product in one section and post's description in the other section.
I have couple of images in gallery for some spaecific posts wth featured image and description.
I have to show the specific post in a inner page with the specific gallery in one section and its description in another section with featured image.
I guess that when you say gallery, you mean the featured image of the post.
So, to get that image, this could be a way
<?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<div> <?php echo $image[0]; ?> </div>
<?php endif; ?>
I hope it helps!
You can ge the image for the page
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
echo $image[0];

What is the Featured Image area for on the TwentyTen theme using WordPress?

I am creating a child theme in Wordpress using the TwentyTen theme as a parent. I saw under the Pages area in the admin section, there is a 'Featured Image' area, but I don't see where that featured image is shown on the page.
What is the featured image area for? I would ideally like to use that uploader to put an image at a specified location on the page.
In what file for twentyten can I find the code php code for the Featured Image area that is displayed in the pages admin area? I looked all through the functions.php file. I'm guessing it is a function in the core files and it is being called in the functions.php file in the twentyten theme, but I can't seem to see where that is happening. Can someone help me?
The Featured Image is sometimes called the Post Thumbnail. Where this shows up depends on your theme, but for TwentyTen, it replaces the default header image. You can see the code in use in header.php:
<?php
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() &&
has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
$image[1] >= HEADER_IMAGE_WIDTH ) :
// Houston, we have a new header image!
echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
else : ?>
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php endif; ?>

Resources