I would like to change the dir path of my image. The current product-image.php woocommerce template is :
<?php
if( has_post_thumbnail() ) {
$image = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ) );
$image_title = esc_attr( get_the_title( get_post_thumbnail_id() ) );
$image_link = wp_get_attachment_url( get_post_thumbnail_id() );
list( $magnifier_url, $magnifier_width, $magnifier_height ) = wp_get_attachment_image_src( get_post_thumbnail_id(), "shop_magnifier" );
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '%s', $magnifier_url, $image_title, $image ), $post->ID );
} else {
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt=" ' . esc_attr__( 'Placeholder', 'jico' ) . ' " />', $placeholder, $placeholder ), $post->ID );
}
?>
How can i customize the %s in img src="%s" ?
Could someone help me gain some direction with this?
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' );
echo $image[0]
Related
I am editing the latest-blog.php file for WordPress and I have two goals.
I would like the post category to be displayed and have a class of category assigned to it.
I would like to assign a class to the thumbnail, the title and the excerpt so I can style them.
The code below is where I believe the changes need to made
foreach ( $recent_posts as $post ) {
$post_id = $post['ID'];
$title = get_the_title( $post_id );
if ( ! $title ) {
$title = __( '(Untitled)' );
}
$post_url = get_permalink( $post_id );
$text = get_post( $post_id );
$text = $text->post_content;
$text = wp_trim_words( $text, 25, '... <a class="subtitle-red" style="display:block;" href="'.$post_url.'">read full article</a>' );
$excerpt = $text;
$list_items_markup .= sprintf(
'<li>
%1$s%3$s<p>%4$s</p>',
get_the_post_thumbnail( $post_id ),
esc_url( get_permalink( $post_id ) ),
esc_html( $title ),
$excerpt
);
if ( isset( $attributes['displayPostDate'] ) && $attributes['displayPostDate'] ) {
$list_items_markup .= sprintf(
'<time datetime="%1$s" class="wp-block-latest-posts__post-date">%2$s</time>',
esc_attr( get_the_date( 'c', $post_id ) ),
esc_html( get_the_date( '', $post_id ) )
);
}
$list_items_markup .= "</li>\n";
}
As this is a core WP file editing it really isn't the best idea so an extra question... could this be done via functions.php instead?
Thanks
TJ
I want to replace full size image with large image on woocommerce lighbox.
here is my code -
<?php
if ( has_post_thumbnail() ) {
$image = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ) );
$image_title = esc_attr( get_the_title( get_post_thumbnail_id() ) );
$image_link = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID) );
$attachment_count = count( $product->get_gallery_attachment_ids() );
if ( $attachment_count > 0 ) {
$gallery = '[product-gallery]';
} else {
$gallery = '';
}
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '%s', $image_link, $image_title, $image ), $post->ID );
} else {
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="Placeholder" class="bigbox" />', woocommerce_placeholder_img_src() ), $post->ID );
}
?>
<?php do_action( 'woocommerce_product_thumbnails' ); ?>
I've tried to change $image_link to
$image_link = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large' );
with no luck.
The $image_link comes as array. to echo the image link, try,
<?php echo $image_link[0]; ?>
So your full code should be like this
WooCommerce has the filter 'woocommerce_single_product_image_html' , you don't repeat the code in your theme for this.
You would add the following in your functions.php or your functions plugin.
Note: this works in 2.6x and will not work with 2.7 since they changed the single image display a lot.
function yourprefix_woocommerce_single_product_image_html( $html, $post_id ) {
if ( ! class_exists( 'WooCommerce' ) ) return;
//bail if WooCommerce is not installed and active since we are using the WC_VERSION constant
if ( version_compare( WC_VERSION, '2.7', '<' ) ) {
$image_title = esc_attr( get_the_title( get_post_thumbnail_id() ) );
$image_link = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' ); //this is where and use the [0] on this variable in the sprintf
$image = get_the_post_thumbnail( $post_id, 'shop_single', array( 'title' => $image_title ) );
$html = sprintf('%s', $image_link[0], $image_title, $image );
} //end version compare still return the html so we don't get an error
return $html;
}
add_filter( 'woocommerce_single_product_image_html', 'yourprefix_woocommerce_single_product_image_html', 10, 2 );
Note: wp_get_attachment_image_src() is not what is used in the default code, it's wp_get_attachment_image_url() which gets the image uploaded, not a sized image. If you want the generated image use $variable = wp_get_attachment_image_src( ... ); and then $variable[0] for the url, $variable[1] width, $variable[2] height. There are plenty of tuts on this, so I won't repeat
I'm using this snippet to output the product gallery attachments on a custom wordpress template for a woocommerce site. I'm using a lightbox for the popup. But I struggling to get the attachment url, instead it keeps on using the featured image the pop-up.
<?php
global $product;
$attachment_ids = $product->get_gallery_attachment_ids();
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail_size' );
$url = $thumb['0'];
echo '<div>';
foreach( $attachment_ids as $attachment_id )
{
echo '<a href="' . $url . '" rel="shadowbox" >' ."<img src=".$image_link = wp_get_attachment_url( $attachment_id, 'large')." style='width:70px; height:70px;' >". '</a>';
}
echo '</div>';
?>
Any ideas on how to target the correct url path for the product gallery images?
Any help much appreciated!
I have changed 'thumbnail_size' to 'large' added global $post; and changed .wp_get_attachment_image_src( $attachment_id, 'large')..
The $post will need to be decalered globaly to access it's contents since this is outside "the loop".
EDIT 2 I've updated the code below so it should link to the image clicked. Removed $thumb and $url as it's not being used.
<?php
global $product;
global $post;
$attachment_ids = $product->get_gallery_attachment_ids();
echo '<div>';
foreach( $attachment_ids as $attachment_id )
{
echo '<a href="' .wp_get_attachment_image_src( $attachment_id, 'large'). '" rel="shadowbox" >' ."<img src=".wp_get_attachment_image_src( $attachment_id, 'large')." style='width:70px; height:70px;' >". '</a>';
}
echo '</div>';
?>
Hope this will help you
global $product;
$attachment_ids = $product->get_gallery_attachment_ids();
foreach( $attachment_ids as $attachment_id )
{
//Get URL of Gallery Images - default wordpress image sizes
echo $Original_image_url = wp_get_attachment_url( $attachment_id );
echo $full_url = wp_get_attachment_image_src( $attachment_id, 'full' )[0];
echo $medium_url = wp_get_attachment_image_src( $attachment_id, 'medium' )[0];
echo $thumbnail_url = wp_get_attachment_image_src( $attachment_id, 'thumbnail' )[0];
//Get URL of Gallery Images - WooCommerce specific image sizes
echo $shop_thumbnail_image_url = wp_get_attachment_image_src( $attachment_id, 'shop_thumbnail' )[0];
echo $shop_catalog_image_url = wp_get_attachment_image_src( $attachment_id, 'shop_catalog' )[0];
echo $shop_single_image_url = wp_get_attachment_image_src( $attachment_id, 'shop_single' )[0];
//echo Image instead of URL
echo wp_get_attachment_image($attachment_id, 'full');
echo wp_get_attachment_image($attachment_id, 'medium');
echo wp_get_attachment_image($attachment_id, 'thumbnail');
echo wp_get_attachment_image($attachment_id, 'shop_thumbnail');
echo wp_get_attachment_image($attachment_id, 'shop_catalog');
echo wp_get_attachment_image($attachment_id, 'shop_single');
}
I'm looking to print out the alt text for each thumbnail image on this page http://www.venaproducts.com/dev/product/fosmon-hybo-duoc-case-for-amazon-fire-phone/
However the first image alt text seems to be used for ALL thumbnail images even though the alt text are different. Any help is much appreciated.
global $post, $product, $woocommerce;
$attachment_ids = $product->get_gallery_attachment_ids();
if ( $attachment_ids ) {
?>
<div id="product-images" class="thumbnails"><?php
$small_img = wp_get_attachment_image_src(get_post_thumbnail_id(),'single-product-thumbnail');
$middle_img = wp_get_attachment_image_src(get_post_thumbnail_id(),'single-product');
$large_img = wp_get_attachment_image_src(get_post_thumbnail_id(),'single-product-zoom');
$img_id = get_post_thumbnail_id(get_the_id());
$alt_text = get_post_meta($img_id, '_wp_attachment_image_alt', true);
echo '<a href="#" data-image="' . $middle_img[0] . '" data-zoom-image="' . $large_img[0] . '">
<img src="' . $small_img[0] . '" alt="' . $alt_text . '">
</a>';
$loop = 0;
$columns = apply_filters( 'woocommerce_product_thumbnails_columns', 3 );
foreach ( $attachment_ids as $attachment_id ) {
$classes = array( 'zoom' );
if ( $loop == 0 || $loop % $columns == 0 )
$classes[] = 'first';
if ( ( $loop + 1 ) % $columns == 0 )
$classes[] = 'last';
$image_link = wp_get_attachment_url( $attachment_id );
if ( ! $image_link )
continue;
// $image = wp_get_attachment_image( $attachment_id, apply_filters( 'single_product_small_thumbnail_size', 'shop_thumbnail' ) );
// $image_class = esc_attr( implode( ' ', $classes ) );
// $image_title = esc_attr( get_the_title( $attachment_id ) );
$small_img = wp_get_attachment_image_src( $attachment_id, 'single-product-thumbnail' );
$middle_img = wp_get_attachment_image_src( $attachment_id, 'single-product' );
$large_img = wp_get_attachment_image_src( $attachment_id, 'single-product-zoom' );
// echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', sprintf( '%s', $image_link, $image_class, $image_title, $image ), $attachment_id, $post->ID, $image_class );
echo '<a href="#" data-image="' . $middle_img[0] . '" data-zoom-image="' . $large_img[0] . '">
<img src="' . $small_img[0] . '" alt="' . $alt_text . '">
</a>';
$loop++;
}
?></div>
<div class="carousel-prev product-prev"></div>
<div class="carousel-next product-next"></div>
<?php
}
You set your $alt_text value when you handle the post thumbnail, outside the foreach loop.
In your foreach loop, when you are going through the attachments, you have forgotten to update the value.
Try something like this in the foreach loop:
$small_img = wp_get_attachment_image_src( $attachment_id, 'single-product-thumbnail' );
$middle_img = wp_get_attachment_image_src( $attachment_id, 'single-product' );
$large_img = wp_get_attachment_image_src( $attachment_id, 'single-product-zoom' );
$alt_text = get_post_meta($attachment_id, '_wp_attachment_image_alt', true);
I am having a little trouble editing a Woocommerce template with hooks. Essentially I would just like to change the product-image template so instead of linking to the uploaded product image, it links to the product post.
The current product-image.php woocommerce template has
global $post, $woocommerce, $product;
?>
<div class="images">
<?php
if ( has_post_thumbnail() ) {
$image_title = esc_attr( get_the_title( get_post_thumbnail_id() ) );
$image_link = wp_get_attachment_url( get_post_thumbnail_id() );
$image = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array(
'title' => $image_title
) );
$attachment_count = count( $product->get_gallery_attachment_ids() );
if ( $attachment_count > 0 ) {
$gallery = '[product-gallery]';
} else {
$gallery = '';
}
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '%s', $image_link, $image_title, $image ), $post->ID );
} else {
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="Placeholder" />', woocommerce_placeholder_img_src() ), $post->ID );
}
?>
<?php do_action( 'woocommerce_product_thumbnails' ); ?>
</div>
I am unsure of how to adapt the echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '%s', $image_link, $image_title, $image ), $post->ID ); to change the %s to a link to the post.
The hook I am using is:
add_action('woocommerce_product_thumbnails', 'custom_links');
function custom_links() {
//code
}
Could someone help me gain some direction with this?
You are calling action not filter. Also you are calling the wrong one.
Change this:
add_action('woocommerce_product_thumbnails', 'custom_links');
to this:
add_filter('woocommerce_single_product_image_html', 'custom_links', 10, 2);
The 2 represents the argument count for the function and your custom_links() should be something like:
function custom_links($link, $post_id) {
$pattern = '/(?<=href=")([^"]*)/';
$replacement = get_permalink($post->ID);
return preg_replace($pattern, $replacement, $link);
}
Process the $link variable as needed and then return it.