ZblogPHP自动调用文章第一张图为缩略图及随机缩略图
ssr
撰写于 2022年 02月 26 日

一般情况,老蒋在帮助客户网站制作的时候关于产品缩略图的调用会使用ZblogPHP平台中"自定义字段插件"直接人工选择一个产品的图片作为展示前台的产品缩略图,这样的好处就是可以选择自己需要的或者自定义的产品、文章图片展示,唯一比较麻烦的是编辑和更新文章的时候都要手工输入图片的URL才可以。
我们其实也可以采用自动缩略图的方法,比如在内容中有图片的时候自动选择第一张图作为缩略图,我们可以在发布产品、文章的时候有意的把需要作为缩略图的图片放到第一张。且在没有图片的内容时候,我们可以随机调用准备好的几个图片作为随机展示,这样的案例在很多博客模板中都有见到。这里老蒋也把这个常用的代码记录下来,以后在制作主题模板时候可能会经常用到。
第一、可能需要用到的效果

这个演示是老蒋在制作一个博客主题时候侧栏以及内容列表时候用到的缩略图效果,这个我们应该很常见的。
第二、自动缩略图效果实现步骤
1、通用代码


{php}
$temp=mt_rand(1,5);<br> $pattern="/<[img|IMG].?src=\'|\")[\'|\"].?[/]?>/";
$content = $article->Content;
preg_match_all($pattern,$content,$matchContent);<br> if(isset($matchContent1))
$temp=$matchContent1;
else
$temp=$zbp->host."zb_users/theme/$theme/style/images/random/$temp.png?imageMogr2/format/webp";
{/php}

如果没有图片,我们就从在当前主题的/style/images/random/文件夹中调用5个准备好的png图片,名称分别是1.png,2.png,3.png,4.png,5.png。且如果需要多个我们可以修改上面的参数。
PS:以上代码放到调用文章列表循环内。
2、调用位置



在调用图片的位置放上上面的调用,我们也可以给上面图片加上样式,比如设定固定的宽度和高度,以及用border-radius加上圆角,以及边框等效果。
总结,有这样的代码我们并不需要用到插件,就可以制作出丰富的图文ZblogPHP主题。

ZblogPHP自动调用文章第一张图为缩略图及随机缩略图

一般情况,老蒋在帮助客户网站制作的时候关于产品缩略图的调用会使用ZblogPHP平台中"自定义字段插件"直接人工选择一个产品的图片作为展示前台的产品缩略图,这样的好处就是可以选择自己需要的或者自定义的产品、文章图片展示,唯一比较麻烦的是编辑和更新文章的时候都要手工输入图片的URL才可以。
我们其实也可以采用自动缩略图的方法,比如在内容中有图片的时候自动选择第一张图作为缩略图,我们可以在发布产品、文章的时候有意的把需要作为缩略图的图片放到第一张。且在没有图片的内容时候,我们可以随机调用准备好的几个图片作为随机展示,这样的案例在很多博客模板中都有见到。这里老蒋也把这个常用的代码记录下来,以后在制作主题模板时候可能会经常用到。
第一、可能需要用到的效果

这个演示是老蒋在制作一个博客主题时候侧栏以及内容列表时候用到的缩略图效果,这个我们应该很常见的。
第二、自动缩略图效果实现步骤
1、通用代码


{php}
$temp=mt_rand(1,5);<br> $pattern="/<[img|IMG].?src=\'|\")[\'|\"].?[/]?>/";
$content = $article->Content;
preg_match_all($pattern,$content,$matchContent);<br> if(isset($matchContent1))
$temp=$matchContent1;
else
$temp=$zbp->host."zb_users/theme/$theme/style/images/random/$temp.png?imageMogr2/format/webp";
{/php}

如果没有图片,我们就从在当前主题的/style/images/random/文件夹中调用5个准备好的png图片,名称分别是1.png,2.png,3.png,4.png,5.png。且如果需要多个我们可以修改上面的参数。
PS:以上代码放到调用文章列表循环内。
2、调用位置



在调用图片的位置放上上面的调用,我们也可以给上面图片加上样式,比如设定固定的宽度和高度,以及用border-radius加上圆角,以及边框等效果。
总结,有这样的代码我们并不需要用到插件,就可以制作出丰富的图文ZblogPHP主题。

赞 (0)

猜您想看

评论区(暂无评论)

这里空空如也,快来评论吧~

我要评论