代码实现Typecho文章有图片则显示缩略图,没有图片则不显示

本文共有1387个字,关键词:缩略图typecho

网上大部分typecho缩略图功能一般分为两类。一类是文章有图片的会显示缩略图,没有图片的则显示随机图片。还有一类是有图片会显示缩略图,没有图片显示默认图片。

总而言之就是每一个文章都要有一个缩略图。这样有一个好处就是文章会很统一,很美观。但是如果有很多随机的缩略图或者默认图片,那么明显用户体验会很差。

今天给大家提供另外一种缩略图的方案:有图片则显示缩略图,没有图片则不显示。先上一张图片,如下:

屏幕快照 2019-07-15 11.26.56.png

下面我们看一下功能是怎么实现的,先把下面这段代码贴到functions.php里面去。

//获取文章缩略图
function showThumbnail($widget)
{ 
$attach = $widget->attachments(1)->attachment;
$pattern = '/\<img.*?src\=\"(.*?)\"[^>]*>/i'; 
if (preg_match_all($pattern, $widget->content, $thumbUrl)) {
     echo "<div class='post-thumb'> <img class='thumb' src='".$thumbUrl[1][0]."' /></div>";
} elseif ($attach->isImage) {
  echo "<div class='post-thumb'> <img class='thumb' src='".$attach->url."' /></div>";
} 
}

这段代码的意思是,使用正则表达式扫描全文第一张图片,如果有就输出。如果没有再检查附件,如果有则输出。顺便提一句,网上有一些方案是只检查附件有没有图片,这种方案是明显存在漏洞的,你比如如果是外链图片,就会认为是没有图片。所以优先推荐带正则表达式的方案。

下一步要打开 index.php 或者 archive.php 将 <?php showThumbnail($this); ?> 这段代码贴到 <div class="post-content" itemprop="articleBody"> 前面。

然后在style.css样式表里面添加缩略图样式。

.post-thumb {
float: left;
width: 200px;
max-height: 150px;
overflow: hidden;
margin: 0 20px 10px 0;
border-radius: 5px;
}
@media (max-width: 768px) {
.post-thumb{width:100%!important;}
}

保存,刷新页面,大功告成!

「一键投喂 软糖/蛋糕/布丁/牛奶/冰阔乐!」

雨致

(๑>ڡ<)☆谢谢老板~

使用微信扫描二维码完成支付

版权声明:本文为作者原创,如需转载须联系作者本人同意,未经作者本人同意不得擅自转载。本站微信公众号:7TEC,敬请关注!
招租,微信联系:salesleads
添加新评论
已有 8 条评论
  1. Mr.Chou:

    这样的设置挺好,主题很简洁..不知能否加个根据时间自动切换夜间模式?

    1. 雨致: 回复 @Mr.Chou

      好建议,回头我摸索一下。

  2. memory:

    楼主你好,我设置了之后图片显示比较大,貌似是原图,不是缩率图

    1. 雨致: 回复 @memory

      清空缓存,然后刷新。

      1. memory: 回复 @雨致

        谢谢博主,这个问题解决了,但是出现了一个新的问题,我的缩略图显示在文字上边而不是文字左边

        1. 雨致: 回复 @memory

          我重新修改了一下css样式,你到文章里面重新复制一下。

          1. Memory: 回复 @雨致

            感谢博主,这样每篇博客插一张图片就好看多了(!)[zface_2.png] (!)[zface_12.png]

  3. Jdeal:

    这个可以的,学习了