wordpress官网有很多woocommerce模板,但有些客户要求定制模板,这时可能会碰到产品相册图片调用的问题,如果根据自带的Storefront主题来改很麻烦,那我们就自己定义吧!下来就随ytkah一起来看看woocommerce调用产品相册gallery图片吧!以下方法参考https://gist.github.com/Niloys7/17b88d36c1c38844a6cf2127c15dee63
<?php
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');
}
?>
以下是ytkah实现的效果图,图片可左右切换,点击下方缩略图也可以切换
具体的代码如下(一个是调用产品特色图the_post_thumbnail_url,一个是产品相册gallery图片)
<!-- Swiper -->
<div class="swiper-container gallery-top">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="<?php the_post_thumbnail_url( 'full' ); ?>" alt="">
</div>
<?php
global $product;
$attachment_ids = $product->get_gallery_attachment_ids();
foreach( $attachment_ids as $attachment_id )
{
echo '<div class="swiper-slide"><img src="' .$full_url = wp_get_attachment_image_src( $attachment_id, 'full' )[0] .'" alt=""></div>';
}
?>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next hidden-xs"></div>
<div class="swiper-button-prev hidden-xs"></div>
</div>
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="<?php the_post_thumbnail_url( 'small' ); ?>" alt="">
</div>
<?php
global $product;
$attachment_ids = $product->get_gallery_attachment_ids();
foreach( $attachment_ids as $attachment_id )
{
echo '<div class="swiper-slide"><img src="' .$shop_thumbnail_image_url = wp_get_attachment_image_src( $attachment_id, 'shop_thumbnail' )[0] .'" alt=""></div>';
}
?>
</div>
</div>
当然,js和css文件需要自己定义