前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >woocommerce调用产品相册gallery图片如何操作?wordpress技巧

woocommerce调用产品相册gallery图片如何操作?wordpress技巧

作者头像
ytkah
发布2019-06-24 10:26:38
1.3K0
发布2019-06-24 10:26:38
举报
文章被收录于专栏:ytkahytkah

  wordpress官网有很多woocommerce模板,但有些客户要求定制模板,这时可能会碰到产品相册图片调用的问题,如果根据自带的Storefront主题来改很麻烦,那我们就自己定义吧!下来就随ytkah一起来看看woocommerce调用产品相册gallery图片吧!以下方法参考https://gist.github.com/Niloys7/17b88d36c1c38844a6cf2127c15dee63

代码语言:javascript
复制
<?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图片)

代码语言:javascript
复制
<!-- 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文件需要自己定义

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-06-14 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
网站建设
网站建设(Website Design Service,WDS),是帮助您快速搭建企业网站的服务。通过自助模板建站工具及专业设计服务,无需了解代码技术,即可自由拖拽模块,可视化完成网站管理。全功能管理后台操作方便,一次更新,数据多端同步,省时省心。使用网站建设服务,您无需维持技术和设计师团队,即可快速实现网站上线,达到企业数字化转型的目的。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档