如何获取文章中第一张图片并显示图片

2024-01-07 14:50

本文主要是介绍如何获取文章中第一张图片并显示图片,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在写wordpress模板的时候,一般为了布局合理而且显示的较为美观,作者会考虑加入此项功能:获取wordpress文章中的第一张图片并显示出来。有些wordpress模板加入了缩略图功能,有些设置特色图片,虽然方法不同,但效果一样。比如暗淡的黑IT网络现用主题wpdaxue,采取第三方文件timthumb.php来获取缩略图,效果如下图。下面暗淡的黑在这提供两种代码方法实现wordpress取文章中第一张图片功能。

wordpress教程:如何获取文章中第一张图片并显示图片

实现方法

此文代码预留地址:https://gist.github.com/andandehei/8928266

方法1.无视任何设置,直接获取文章中第一张图片并显示;如果文章无图片,获取自定义图片并显示。

此方法翻译自http://www.wprecipes.com/how-to-get-the-first-image-from-the-post-and-display-it

①将以下代码粘贴到functions.php文件中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function catch_that_image ( )  {
global  $post ,  $posts ;
$first_img  =  '' ;
ob_start ( ) ;
ob_end_clean ( ) ;
$output  =  preg_match_all ( '/<img.+src=[\'"]([^\'"]+)[\'"].*>/i' ,  $post -> post_content ,  $matches ) ;
 
//获取文章中第一张图片的路径并输出
$first_img  =  $matches  [ 1 ]  [ 0 ] ;
 
//如果文章无图片,获取自定义图片
 
if ( empty ( $first_img ) ) {  //Defines a default image
$first_img  =  "/images/default.jpg" ;
 
//请自行设置一张default.jpg图片
}
 
return  $first_img ;
}

②在需要显示图片的地方输出图片:

1
<?php  echo catch_that_image ( )  ?>

方法2.如果我们手动设置了特色图像,而且文章中又有图片,那该如何显示呢?我们自此可以使用逻辑判断,给他们一个优先条件。此方法网上代码重复太多,已经不知道原创是谁了...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function catch_that_image (  $id  )  {
// global $post, $posts;
$first_img  =  '' ;
 
// 如果设置了缩略图
$post_thumbnail_id  = get_post_thumbnail_id (  $id  ) ;
if  (  $post_thumbnail_id  )  {
     $output  = wp_get_attachment_image_src (  $post_thumbnail_id ,  'large'  ) ;
     $first_img  =  $output [ 0 ] ;
}
else  {  // 没有缩略图,查找文章中的第一幅图片
     ob_start ( ) ;
     ob_end_clean ( ) ;
     $output  =  preg_match_all ( '/<img.+src=[\'"]([^\'"]+)[\'"].*>/i' ,  $post -> post_content ,  $matches ) ;
     $first_img  =  $matches  [ 1 ]  [ 0 ] ;
 
     if ( empty ( $first_img ) ) {  // 既没有缩略图,文中也没有图,设置一幅默认的图片
         $first_img  =  "/images/default.jpg" ;
     }
}
 
return  $first_img ;
}

这篇关于如何获取文章中第一张图片并显示图片的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/580276

相关文章

JAVA读取MongoDB中的二进制图片并显示在页面上

1:Jsp页面: <td><img src="${ctx}/mongoImg/show"></td> 2:xml配置: <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001

据阿谱尔APO Research调研显示,2023年全球髓内钉市场销售额约为4.7亿美元

根据阿谱尔 (APO Research)的统计及预测,2023年全球髓内钉市场销售额约为4.7亿美元,预计在2024-2030年预测期内将以超过3.82%的CAGR(年复合增长率)增长。 髓内钉市场是指涉及髓内钉制造、分销和销售的行业。髓内钉是一种用于整形外科手术的医疗器械,用于稳定长骨骨折,特别是股骨、胫骨和肱骨。髓内钉通常由不銹钢或钛等材料制成,并插入骨的髓管中,以在愈合过程中提供结构支

vue+elementUI下拉框联动显示

<el-row><el-col :span="12"><el-form-item label="主账号:" prop="partyAccountId" :rules="[ { required: true, message: '主账号不能为空'}]"><el-select v-model="detailForm.partyAccountId" filterable placeholder="

在服务器上浏览图片

@StarSky 2018-10-26 15:09 字数 15971 阅读 28 https://www.zybuluo.com/StarSky/note/1294871 来源 2018-09-27 线上服务器安装 imgcat Tool   2018-09-27 线上服务器安装 imgcat 0. 准备文件:iterm2_shell_integration.bash1. 在有权限

【青龙面板辅助】JD商品自动给好评获取京豆脚本

1.打开链接 开下面的链接进入待评价商品页面 https://club.jd.com/myJdcomments/myJdcomments.action?sort=0 2.登陆后执行脚本 登陆后,按F12键,选择console,复制粘贴以下代码,先运行脚本1,再运行脚本2 脚本1代码 可以自行修改评价内容。 var content = '材质很好,质量也不错,到货也很快物流满分,包装快递满

温湿度采集及OLED显示

目录 软件I2C和硬件I2C每隔2秒钟采集一次温湿度数据,显示到OLED上,同时通过串口发送到上位机的“串口助手”软件 软件I2C和硬件I2C "I2C"代表Inter-Integrated Circuit,是一种用于在数字电路之间进行通信的串行通信协议。软件I2C和硬件I2C是两种实现这种协议的方式。 软件I2C是通过软件来模拟I2C通信协议的实现方式。在这种情况下,微控制

el-upload 上传图片及回显照片和预览图片,文件流和http线上链接格式操作

<div v-for="(info, index) in zsjzqwhxqList.helicopterTourInfoList" :key="info.id" >编辑上传图片// oss返回线上地址http链接格式:<el-form-itemlabel="巡视结果照片":label-width="formLabelWidth"><el-upload:action="'http:

个人博客文章目录索引(持续更新中...)

文章目录 一、Java基础二、Java相关三、MySql基础四、Mybatis基础及源码五、MybatisPlus基础六、Spring基础及源码七、Tomcat源码八、SpringMVC基础及源码   随着文章数量多起来,每次着急翻找半天,而是新申请的域名下来了,决定整理下最近几年的文章目录索引。(红色标记为常检索文章) 一、Java基础 1、Java基础(一):语言概述2、J

Spring 内部类获取不到@Value配置值问题排查(附Spring代理方式)

目录 一、实例问题 1、现象 2、原因 3、解决 二、Spring的代理模式 1、静态代理(Static Proxy) 1)原理 2)优缺点 3)代码实现 2、JDK动态代理(JDK Dynamic Proxy) 1)原理 2)优缺点 3)代码实现 3、cglib 代理(Code Generation Library Proxy) 1)原理 2)优缺点 3)代码实

获取Windows系统版本号(转)

https://blog.csdn.net/sunflover454/article/details/51525179