【小技巧】一个简单实现图片列表的小技巧 文档教程

迷途 5月前 687

以下教程是直接在系统默认模板上进行实现的,新手在操作前请事先备份,或者在本地测试。

根据之前发布的获取文章中第一个图片教程

http://bbs.xiuno.com/thread-20973.htm

找到view/htm/thread_list.inc.htm页面

<?php if($threadlist) { foreach($threadlist as &$_thread) { ?>
	<li class="media thread tap <?php echo $_thread['top_class'];?> " data-href="<?php echo url("thread-$_thread[tid]");?>" data-tid="<?php echo $_thread['tid'];?>">
	<?php if($have_allowtop) { ?>
	    <?php if($_thread['allowtop']) { ?>
		    <input type="checkbox" name="modtid" class="mt-3 mr-2" value="<?php echo $_thread['tid']; ?>" />
	    <?php } ?					
	<?php } ?>
	<a href="<?php echo url("user-$_thread[uid]");?>" tabindex="-1" class="ml-1 mt-1 mr-3">
		<img class="avatar-3" src="<?php echo $_thread['user_avatar_url'];?>"><!--看这里,这里是会员头像-->
	</a>
	<!--{hook thread_list_inc_avatar_after.htm}-->

此处截图是列表当中会员头像的位置,我们可以在此处举例说明

根据获取文章中第一个图片的方法。

<?php
$pattern="/<[img|IMG].*?src=[\'|\"](.*?(?:[\.gif|\.jpg|\.png]))[\'|\"].*?[\/]?>/";  
$content = $_thread['message'];  //文章内容  
preg_match_all($pattern,$content,$matchContent);  
if(isset($matchContent[1][0])){  
    $temp = $matchContent[1][0];  
}
?>

调用:

<a href="<?php echo url("user-$_thread[uid]");?>" tabindex="-1" class="ml-1 mt-1 mr-3">
	<img class="avatar-3" src="<?php echo $temp;?>">
</a>

此时可能会发现报错,原因是因为

$content = $_thread['message'];

文章内容部分,列表中获取不到这个字段。

那么我们简单写一个获取文章内容的一个小方法。

function ax_message($tid){
     $r = db_find_one('post', array('tid'=>$tid));
     return $r;
}

根据上面函数方法可以获取文章内容。那么我们将下列函数进行一下修改。

<?php
$pattern="/<[img|IMG].*?src=[\'|\"](.*?(?:[\.gif|\.jpg|\.png]))[\'|\"].*?[\/]?>/";  
$content = ax_message($_thread['tid']);  //文章内容  
preg_match_all($pattern,$content,$matchContent);  
if(isset($matchContent[1][0])){  
    $temp = $matchContent[1][0];  
}
?>

然后在适当地方调用即可。


上述只是提供一个学习思路,在不考虑效率情况下进行,纯手工写的,不喜勿喷哈。

当然思路和方法有很多,上述只是其中一个小方法。


Xiuno模板插件大全:http://www.432k.cn

最新回复 (3)
  • aaa 5月前
    引用 2
    请管理删除
    最后于 5月前 被 aaa编辑 ,原因:
  • 落雪飞花 5月前
    引用 3
    看起来很不错的样子.看不懂
  • 谢振炫 3月前
    引用 4
    [img]https://ws1.sinaimg.cn/large/006NhCa0gy1fpgygqls3bg30f70r1qv6.gif[/img]
    QQ动态背景.有兴趣的可以拿来玩玩




    .down-lanyou fieldset{background:#fff;font-size:18px;margin:20px 0;padding:10px 15px;width:90%;border-radius:2px;border:1px solid #999}.down-lanyou fieldset a{font-size:15px;}.down-lanyou legend{font-weight:400;margin:0 0 0 25px;width: 116px;padding:1px 15px;border-radius:2px;border:1px solid #ddd}.down-lanyou span{display:block;font-size: 16px;    margin-top: 10px;}.down-lanyou-inf{margin-top: 10px;line-height:210%}.down-lanyou .down .be-eye{margin:0 8px 0 0}.down-lanyou{width:100%;}.down {margin:10px 0px 0px 0;color: white;line-height: 130%;}.down-lanyou .down a {background-color: #8BC34A; border: none;color: white;padding: 6px 20px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px; margin: 4px 2px; cursor: pointer;border-radius: 2px;    margin-top: 20px;}<div class="down-lanyou">                        附件信息  密码: [b]xpx5[/b]  提示: [b]如下载链接失效,请联系站长更新![/b]  声明: [b]本站所有资源都经过安全检测,请放心下载![/b]                 <div class="down">                        [url=https://pan.baidu.com/s/1ptawqA4C2K-c1X0OmAJggw]网盘下載[/url] [url=https://pan.lanzou.com/i0obn2f]极速下載[/url]                 程序池塘         程序池塘    程序池塘
返回
发新帖