wordpress插件multiple-post-thumbnails实现多缩略图教程

在使用wordpress二次开发的时候文章或页面特色图片只能添加一张,想实现一文多图有点麻烦,好在有神器插件multiple-post-thumbnails,但在使用的过程中发现了问题网上的很多教程无法输出结果,百般折腾才实现预想结果。 

下面说下具体是怎么实现的

插件使用方式终结如下:

1、安装插件这个教程就不写了

2、在模板function.php添加如下代码

 //自定义添加特色图片


if (class_exists('MultiPostThumbnails')) {

$ob=new MultiPostThumbnails(

array(

'label' => '第二个特色图片',

'id' => 'secondary-image', //模板调用参数 第几个图片

'post_type' => 'page' //page代表页面 post代表文章

)


);


new MultiPostThumbnails(

array(

'label' => '第三个特色图片',

'id' => 'third-image',

'post_type' => 'page'

)

);

new MultiPostThumbnails(

array(

'label' => '第四个特色图片',

'id' => 'four-image',

'post_type' => 'page'

)

);

}

参数说明:id代表图片标志在前台调用使用。

post_type代表使用在哪里 页面还是文章。 post代表文章,page代表页面 。

3、后台截图

 wKioL1gS89OhQu74AAIq0-gbaRM266.png-wh_50

4、最最重要的一步!!!也是很多教程说的不明白的地方!!!

  前台调用代码

<?php

  $imageid = MultiPostThumbnails::get_post_thumbnail_id('page', 'four-image', $post->ID);

$imageurl = wp_get_attachment_image_src($imageid,'large');

echo $imageurl[0];  

?>

参数说明:

page就是页面或者文章的意思,两个参数 page或者post也就是functions.php的post_type写

第二个参数是调用上传的第几个图片 这个是functions.php自己定义的id

$post->ID你的文章或者页面ID

$imageurl 打印出来格式如下

array(size=4) 

  0 =>string'http://localhost.wp.com/wp-content/uploads/2016/10/home_we1-2.jpg'(length=65) //图片地址

  1 =>int292 //图片宽

  2 =>int209 //图片高

   3 =>booleanfalse

应该写的很清楚了吧 有问题给我留言,看到会及时回复。

参考:http://www.alexbarber.com/wordpress-and-multipostthumbnails-get-image-url/ 

个人博客地址:http://www.weiyi.wiki

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在使用 WordPress 个客户开发项目的时候,经常会碰到需要设置多个日志缩略图的需求,当然我们可以通过自定义字段实现,但是这样使用起来不是非常方便,没有默认的设置特色图片那么好用,这时候,我一般使用 Multiple Post Thumbnails 这个 WordPress 插件来解决。 Multiple Post Thumbnails 介绍 Multiple Post Thumbnails 是一个面向 WordPress 开发者的一个插件,它定义了一套在后台增加多个缩略图的机制,以及在前端调用新增缩略图的方法,并且它定义的后台空间支持最新的 WordPress 3.5 图片上传方式,使用起来和默认的特色图片基本一致。 Multiple Post Thumbnails:可以定义多个日志缩略图WordPress 插件 Multiple Post Thumbnails 使用方法 前面说过 Multiple Post Thumbnails 是一个面向开发者的插件,所以需要你对主题进行一定的修改才能使用,下面简单介绍下使用方法: 1. 上传插件并激活。  2. 如果你想给当前日志添加第二章缩略图,在当前主题的 functions.php 中添加如下代码: if (class_exists('MultiPostThumbnails')) {     new MultiPostThumbnails(         array(             'label' => 'Secondary Image',             'id' => 'secondary-image',             'post_type' => 'post'         )     ); } 当然你可以通过将 post_type 设置为 page,给静态页面设置第二章缩略图,也给自定义日志类型设置。    3. 最后通过下面代码显示定义的缩略图: <?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-image'); endif; ?>
可以使用 PDF.js 库来实现在 Vue 中预览 PDF 并显示缩略图。具体实现步骤如下: 1. 安装 pdfjs-dist 和 vue-pdf 依赖: ``` npm install pdfjs-dist vue-pdf --save ``` 2. 在 Vue 组件中引入依赖: ```javascript import pdfjsLib from 'pdfjs-dist'; import VuePdf from 'vue-pdf'; ``` 3. 在组件中使用 VuePdf 组件,并设置 props: ```html <template> <div> <vue-pdf :src="pdfUrl" :page="currentPage" @num-pages="numPages = $event"></vue-pdf> <div v-for="i in numPages" :key="i"> <img :src="`data:image/jpeg;base64,${thumbnails[i - 1]}`" /> </div> </div> </template> <script> export default { components: { VuePdf, }, data() { return { pdfUrl: 'https://example.com/example.pdf', currentPage: 1, numPages: 0, thumbnails: [], }; }, methods: { async generateThumbnails() { const pdf = await pdfjsLib.getDocument(this.pdfUrl).promise; for (let i = 1; i <= this.numPages; i++) { const page = await pdf.getPage(i); const viewport = page.getViewport({ scale: 0.5 }); const canvas = document.createElement('canvas'); const canvasContext = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; await page.render({ canvasContext, viewport }).promise; const thumbnail = canvas.toDataURL('image/jpeg'); this.thumbnails.push(thumbnail.split(',')[1]); } }, }, mounted() { this.generateThumbnails(); }, }; </script> ``` 在上面的代码中,我们使用了 VuePdf 组件来预览 PDF,同时使用了 PDF.js 库来生成缩略图。在 mounted 钩子函数中调用 generateThumbnails 方法来生成缩略图,并将缩略图数据存储在 thumbnails 数组中。在模板中使用 v-for 循环渲染缩略图

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值