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);
Related
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]
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 WooCommerce and i want to show the product-category banner in product page.
for the product-category i used this code:
add_action( 'woocommerce_archive_description', 'woocommerce_category_image', 2 );
function woocommerce_category_image() {
if (is_product_category()){
global $wp_query;
$cat = $wp_query->get_queried_object();
$thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true );
$image = wp_get_attachment_url( $thumbnail_id );
if ( $image ) {
echo '<img src="' . $image . '" alt="" class="cat_ban"/>';
}
}
}
and for the product page i use a similar code with some changes,but it doesn't work,can some one point me to my mistake?
add_action( 'woocommerce_archive_description', 'woocommerce_product_image', 2 );
function woocommerce_product_image() {
if (is_product()){
global $post;
$terms = get_the_terms( $post->ID, 'product_cat' );
$cat = $terms->term_id;
$thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true );
$image = wp_get_attachment_url( $thumbnail_id );
if ( $image ) {
echo '<img src="' . $image . '" alt="" class="cat_ban"/>';
}
}
}
found a solution on my own,hope it will help you:
add_action( 'woocommerce_before_single_product', 'woocommerce_product_image', 2 );
function woocommerce_product_image(){
$product_cats = wp_get_post_terms( get_the_ID(), 'product_cat' );
if ( $product_cats && ! is_wp_error ( $product_cats ) ){
$cat = array_shift( $product_cats );
$thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true );
$image = wp_get_attachment_url( $thumbnail_id );
$category_link = get_category_link($cat);
if ( $image ) {
echo '<img src="' . $image . '" alt="" class="cat_ban"/>';
}
}
}
You can add category banner to product page use this code -
add_action('woocommerce_before_single_product', 'woocommerce_add_category_banner', 2);
function woocommerce_add_category_banner()
{
global $product;
if (isset($product) && is_product())
{
global $wp_query;
$cat = $wp_query->get_queried_object();
$thumbnail_id = get_woocommerce_term_meta($cat->term_id, 'thumbnail_id', true);
$image = wp_get_attachment_url($thumbnail_id);
if ($image)
{
echo '<img src="' . esc_url($image) . '" alt="" />';
}
}
}
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');
}
At the moment on my portfolio page you can click on a portfolio item and a ajax container pops up. And in this container you can click on a button to go to the project and read more details.
BUT
I want to disable this ajax container and when you click on a single portfolio item it needs to go straight to the project item page with all the details on it etc.
Now have I been searching in all of the .php files and in the scripts but I just can't find the action when you click on a portfolio item and I'm not really sure with what I need to replace it when found. I hope someone could help me with this one.
Here is the code of the portfolio page:
<div id="portfolio-grid" class="clearfix">
<?php
while ( $portfolio_query->have_posts() ) : $portfolio_query->the_post();
get_template_part( 'includes/entry', 'portfolio' );
endwhile;
wp_reset_postdata();
?>
</div> <!-- end #portfolio-grid -->
And here is the code of the Ajax container -I think-
function et_show_ajax_project(){
global $wp_embed;
$project_id = (int) $_POST['et_project_id'];
$portfolio_args = array(
'post_type' => 'project',
'p' => $project_id
);
$portfolio_query = new WP_Query( apply_filters( 'et_ajax_portfolio_args', $portfolio_args ) );
while ( $portfolio_query->have_posts() ) : $portfolio_query->the_post();
global $post;
$width = apply_filters( 'et_ajax_media_width', 600 );
$height = apply_filters( 'et_ajax_media_height', 480 );
$media = get_post_meta( $post->ID, '_et_used_images', true );
echo '<div class="et_media">';
if ( $media ){
echo '<div class="flexslider"><ul class="slides">';
foreach( (array) $media as $et_media ){
echo '<li class="slide">';
if ( is_numeric( $et_media ) ) {
$et_fullimage_array = wp_get_attachment_image_src( $et_media, 'full' );
if ( $et_fullimage_array ){
$et_fullimage = $et_fullimage_array[0];
echo '<img src="' . esc_url( et_new_thumb_resize( et_multisite_thumbnail($et_fullimage ), $width, $height, '', true ) ) . '" width="' . esc_attr( $width ) . '" height="' . esc_attr( $height ) . '" />';
}
} else {
$video_embed = $wp_embed->shortcode( '', $et_media );
$video_embed = preg_replace('/<embed /','<embed wmode="transparent" ',$video_embed);
$video_embed = preg_replace('/<\/object>/','<param name="wmode" value="transparent" /></object>',$video_embed);
$video_embed = preg_replace("/height=\"[0-9]*\"/", "height={$height}", $video_embed);
$video_embed = preg_replace("/width=\"[0-9]*\"/", "width={$width}", $video_embed);
echo $video_embed;
}
echo '</li>';
}
echo '</ul></div>';
} else {
$thumb = '';
$classtext = '';
$titletext = get_the_title();
$thumbnail = get_thumbnail($width,$height,$classtext,$titletext,$titletext,false,'Ajaximage');
$thumb = $thumbnail["thumb"];
echo '<a href="'. esc_url( get_permalink() ) . '">';
print_thumbnail($thumb, $thumbnail["use_timthumb"], $titletext, $width, $height, $classtext);
echo '</a>';
}
echo '</div> <!-- end .et_media -->';
echo '<div class="et_media_description">' .
'<h2 class="title">' . '' . get_the_title() . '' . '</h2>' .
truncate_post( 560, false );
echo '</div> <!-- end .et_media_description -->';
echo '<a class="more" href="' . get_permalink() . '">' . __( 'Meer info ยป', 'Flexible' ) . '</a>';
endwhile;
wp_reset_postdata();
die();
}
You can see the page here: http://bit.ly/10BDVVf
Again thank you!
This is being controlled via javascript in /wp-content/themes/Flexible/js/custom.js. Comment out lines 29-77 and it will link as expected (the return false at the end cancels that standard navigation), but keep in mind that if you edit the theme directly and upgrade it, your changes will be overwritten.