TypechoJoeTheme

老狮的梦

统计
登录
用户名
密码
/
注册
用户名
邮箱
输入密码
确认密码

Typecho调用文章第一张图作为缩略图以及随机缩略图调用

老狮博主
2019-06-13
/
7 评论
/
5,705 阅读
/
628 个字
/
百度已收录
06/13
本文最后更新于2020年01月19日,已超过522天没有更新。如果文章内容或图片资源失效,请留言反馈,我会及时处理,谢谢!

接上文给博客添加一个“玻璃框”,让其显得更加的立体之后继续折腾还没折腾完的项目——缩()微()图。
效果图:

折腾开始

现在百度找了以下教程

function thumb($cid) {
if (empty($imgurl)) {
$rand_num = 10; //随机图片数量,根据图片目录中图片实际数量设置
if ($rand_num == 0) {
$imgurl = "随机图片存放目录/0.jpg";
//如果$rand_num = 0,则显示默认图片,须命名为"0.jpg",注意是绝对地址
}else{
$imgurl = "随机图片存放目录/".rand(1,$rand_num).".jpg";
//随机图片,须按"1.jpg","2.jpg","3.jpg"...的顺序命名,注意是绝对地址
}
}
$db = Typecho_Db::get();
$rs = $db->fetchRow($db->select('table.contents.text')
->from('table.contents')
->where('table.contents.type = ?', 'attachment')
->where('table.contents.parent= ?', $cid)
->order('table.contents.cid', Typecho_Db::SORT_ASC)
->limit(1));
$img = unserialize($rs['text']);
if (empty($img)){
echo $imgurl;
}
else{
echo '你的博客地址'.$img['path'];
}
}

以上代码放入Functions.php 文件中。

然后在想在调用的文件里放入以下代码,这里我放入的是首页位置。

<?php echo thumb($this->cid); ?>

结果显示的并不是图片,而是图片的链接地址

失败!

既然只显示链接没有显示图片,那直接由图片代码把链接包住不就可以了吗,于是把第二段代码改成

<img src="<?php echo thumb($this->cid); ?>">

成功!

但是新问题又出来了:

1.图片高度不统一;
2.图片左右不对称;
3.图片直角不好看,和主题不搭,于是继续改第二段代码

<img style="margin:0;height:300px;width:100%;max-height:50%;" src="<?php echo thumb($this->cid); ?>">

然后在图片的CSS部分加入圆角border-radius:20px;
搞定!

感谢

1.感谢源代码提供者:老蒋部落
2.感谢大佬的耐心指导:JDEAL

遗留问题(完美解决)

由于本博客的图片一部分是本地上传,一部分是新浪图库,所以出现了一个问题。
要么显示了图库的图片就不能显示本地图片,要么显示了本地图片就不能显示图库图片,鱼和熊掌不可兼得呀,遗憾!
胡思乱想,有没有这样的一种代码:如果是A显示A 如果不是A显示B,如果不是B显示C哈哈
异想天开!

2019.6.26更新

由于上述方法只能调用本地图片和随机图片,不能调用外链图片,所有又在百度继续找,于是在QQ爹那里找到了完美的解决的方法,方法如下:

/** 输出文章缩略图 */
function showThumbnail($widget)
{ 
    // 当文章无图片时的默认缩略图
    $rand = rand(1,99); // 随机 1-99 张缩略图
    $random = $widget->widget('Widget_Options')->themeUrl . '/img/sj/' . $rand . '.jpg'; // 随机缩略图路径
   // $random = $widget->widget('Widget_Options')->themeUrl . '/img/mr.jpg'; // 若只想要一张默认缩略图请删除本行开头的"//",需要在img文件夹下放个mr.jpg图片

    $attach = $widget->attachments(1)->attachment;
    $pattern = '/\<img.*?src\=\"(.*?)\"[^>]*>/i'; 



if (preg_match_all($pattern, $widget->content, $thumbUrl)) {
         echo $thumbUrl[1][0];
    } else     if ($attach->isImage) {
      echo $attach->url; 
    } 
else
if ($widget->tags) {
foreach ($widget->tags as $tag) {
if($tag['slug']==daima||$tag['slug']==anzhuo){//if语句判断标签缩略名,如果是则输出下面文件夹内的图片
$a= $widget->widget('Widget_Options')->themeUrl . '/img/tag/' . $tag['slug'] . '.jpg';
echo $a;
}else {
echo $random;//没有匹配的标签图片,则随机输出图片
}
break;
}
} else {
echo $random;
}      
}

模板中需要添加缩略图地址的地方添加

<img src="<?php showThumbnail($this); ?>">
Typecho美化代码
朗读
赞(11)
赞赏
感谢您的支持,我会继续努力哒!
版权属于:

老狮的梦

本文链接:

https://laolion.com/archives/698.html(转载时请注明本文出处及文章链接)

评论 (7)
  1. 老狮 博主
    Android · Google Chrome
    @

    在你主题文件里的css文件里面,你搜索.img{}在大括号里

    2019-08-26 回复
    1. Marchen 闲逛
      Windows 7 · QQ Browser
      @老狮

      试了我没放css,自适应了,但是手机打开的话图片好大,而且图片还是伸缩的,高度太高,有什么办法解决

      2019-08-27 回复
      1. 老狮 博主
        Windows 7 · Google Chrome
        @Marchen

        你修改<img style="margin:0;height:300px;width:100%;max-height:50%;" src="<?php echo thumb($this->cid); ?>">这段代码里的height和max-height的数值

        2019-08-27 回复
        1. Marchen 闲逛
          Windows 7 · QQ Browser
          @老狮

          你会把随机图片路径改成对象存储的路径吗

          2019-08-27 回复
  2. Marchen 闲逛
    Android · QQ Browser

    缩略图是自适应的嘛,不然手机打开还是很大

    2019-08-26 回复
    1. 老狮 博主
      Android · Google Chrome
      @Marchen

      是自适应的

      2019-08-26 回复
      1. Marchen 闲逛
        Windows 7 · QQ Browser
        @老狮

        那我试试,border-radius:20px;放去哪没懂

        2019-08-26 回复

互动读者

  • 神话2闲逛

    评论 7 次 | 文章 0 篇

  • ptcry闲逛

    评论 3 次 | 文章 0 篇

  • 111闲逛

    评论 3 次 | 文章 0 篇

  • 千夜闲逛

    评论 2 次 | 文章 0 篇

标签云

最新回复

  1. 88闲逛
    2021-06-23
  2. 萨达萨达按时闲逛
    2021-06-23
  3. 神话6闲逛
    2021-06-23
  4. 神话2闲逛
    2021-06-21
  5. 神话2闲逛
    2021-06-21