很多笔记或博客网站,例如 语雀、Blogger 等 都可以自动获取文章中的第一张图片作为文章头图或缩略图。一些笔记类的文章,可能很多人都不会专门制作或挑选缩略图,对于这一类的文章,最省事的方法就是使用文章中的第一张图片作为缩略图。下面简单写一下 Typecho 主题获取文章中的第一张图片作为缩略图的方法。

编写函数

复杂一些的 PHP 代码可以封装为函数放到 functions.php 中,下面编写一个匹配 HTML 的 imgsrc 的函数:

function getPostImg($archive) {
    $img = array();
    //  匹配 img 的 src 的正则表达式
    preg_match_all("/<img.*?src=\"(.*?)\".*?\/?>/i", $archive->content, $img);
    //  判断是否匹配到图片
    if (count($img) > 0 && count($img[0]) > 0) {
        //  返回图片
        return $img[1][0];
    } else {
        //  如果没有匹配到就返回 none
        return 'none';
    }
}

上面的 getPostImg 函数接收一个文章对象,这个文章对象就是 index.php 循环输出文章时的 $this,也是 post.phppage.php 输出文章时的 $this。对象的 content 属性就是转换为 HTML 后的文章内容,无论你的文章是 Markdown 还是 HTML 格式,使用 content 属性获取的文章内容都是 HTML。

上面如果匹配到图片就返回图片的 URL,如果没有匹配到图片就返回 none。如果你的主题必须要设置文章头图的话,在没有匹配到图片的情况下可以返回一个默认的图片地址。

调用函数

下面调用 getPostImg 函数来获取文章头图:

<img src="<?php echo getPostImg($this); ?>" alt="<?php $this->title(); ?>">

上面图片 alt 中的内容是文章标题。

固定图片比例

如果你的博客文章缩略图或头图的宽高比是固定的话,就不太适合用 img 标签,在图片尺寸比例不固定的情况下用 img 可能会导致图片变形。这里建议使用 div 来显示图片,可以设置 divbackground-image 为图片地址。通过 background-image 背景图片 来显示图片可以很方便的设置自动缩放和居中。

下面使用 div 显示图片:

<div style="background-image: url(<?php echo getPostImg($this); ?>)" class="thumbnail"></div>

CSS 样式:

.thumbnail {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: #e0e0e0;
}
.thumbnail:after {
  content: '';
  padding-bottom: 50%;
  display: block;
}

上面是一个固定宽高比的响应式缩略图。div 的宽度是 100% 和父容器一样,高度是宽度的 50%,也就是 2 比 1,无论 div 的宽度怎么变,高度都是宽度的 50%。

如果要调整宽高比可以更改 :after 内的 padding-bottom,下面是一些常见的宽高比:

  • 2 比 1:50%
  • 4 比 3:75%
  • 16 比 9:56.25%

下面是一些用到的 CSS 说明:

  • background-size: cover:背景图片大小自动缩放。
  • background-position: center:背景图片纵向和横向都居中。

如果响应式网站的元素需要固定宽高比也可以参考上面的写法。

相关文章:

本文为原创文章,版权归 Mr. Ma's Blog 所有,转载请联系博主获得授权。

本文地址: https://www.misterma.com/archives/882/

如对本文有问题或疑问都可以在评论区留言,我看到后会尽量解答。