立即注册 登录
彼岸网 返回首页

天香公主的个人空间 http://www.bian-wang.com/discuz/?10005 [收藏] [复制] [分享] [RSS] txgz999@yahoo.com

日志

在触屏版上给网络图片添加看大图功能

热度 2已有 417 次阅读2018-5-8 09:30 PM

在手机触屏版里的论坛页里所有的上传图片均以小图形式显示:如果插入贴子的话都显示成长宽不超过140px的小图,而没插入的话都显示成长宽不超过83px的小图。而点击一下一个小图后,屏幕上会单独显示原始尺寸的图片,但最大不超出屏幕的范围。而且可以左右划动来看该页上其它上传图片的大图。据网友牛肉炖土豆提议将该论坛页里的网络图片也加入这个大图显示页。http://www.bian-wang.com/discuz/home.php?mod=space&uid=10744&do=blog&id=2039。本文讨论下如何解决这个问题。

先排查下相关网页所使用的脚本代码和模板:
脚本文件 source/module/forum/forum_viewthread.php,它使用定义在 source/function/function_attachment.php 里的函数 parseattach 来将储存的贴子内容里的上传图片bbcode找出来,而 parseattach 对找到的上传图片内容用定义在 template/touch/forum/discuzcode.htm 里的函数 attachinpost 将其转换成HTML代码。同时它使用定义在 source/function/function_discuzcode.php 里的函数 discuzcode 来将储存的贴子内容里的网络图片bbcode找出来,而 discuzcode 对找到的网络图片内容用定义在同一文件里的函数 parseimg 将其转换成HTML代码。
模板文件:template/default/touch/forum/viewthread.htm
脚本文件 source/module/forum/forum_viewthread.php 调用了 source/include/thread/thread_album.php。
模板文件:template/default/touch/forum/viewthread_album.htm

先分析下第一张图:显示一个主题。假设我们在该主题贴或它下面的一个贴子里加入了文字,两张上传图片和一张网络图片,那么该贴的内容存在数据库里的形式类似于: Test [attach]1[/attach] [img=150,100]http://www.xyz.org/a.jpg[/img] [attach]2[/attach] 而在显示时从数据库里将内容取出后经过转换成为了供显示用的HTML代码,类似于: Test<br /> < a href="forum.php?mod=viewthread&amp;tid=3&amp;aid=1&amp;from=album&amp;page=1"><img id="aimg_1" src="forum.php?mod=image&aid=1&size=140x140&key=cc5739f0e921ff15&type=fixnone" /></a> <br /> <img width="150" height="100" src="http://www.xyz.org/a.jpg"/><br /> <br /> < a href="forum.php?mod=viewthread&amp;tid=3&amp;aid=2&amp;from=album&amp;page=1"><img id="aimg_2" src="forum.php?mod=image&aid=2&size=140x140&key=cec9266574d3b51f&type=fixnone" /></a> 帖子里有关上传图片的内容是用bbcode标签attach记载在数据库里的,转换它们的函数是attachinpost,它将bbcode内容转换成一个HTML的img元素外套一个超链。而有关网络图片的内容是用bbcode标签img记载的,转换它们的函数是parseimg,它将bbcode内容转换成一个HTML的img元素但不带外套。

下面是修改内容:
1) 首先要对处理论坛页显示的主要的脚本文件 source/module/forum/forum_viewthread.php 做多处改动:
1a) 先修改支持大图显示的条件:将下面这句 } elseif($_GET['from'] == 'album' && ($_G['setting']['guestviewthumb']['flag'] && !$_G['uid'] && IN_MOBILE != 2 || !$_G['group']['allowgetimage'])) { 改成 } elseif($_GET['from'] == 'album' && IN_MOBILE != 2 && ($_G['setting']['guestviewthumb']['flag'] && !$_G['uid'] || !$_G['group']['allowgetimage'])) { 注意可用IN_MOBILE是否是2来判断是否在使用触屏版,这个条件下面将多次使用。
1b) 为了将上传图片和网络图片在大图显示页上按它们在论坛页上出现的先后次序显示,我们必须找到当前页里的所有上传图片和网络图片及其排序。在下面这句 $_G['allblocked'] = true; 前加入 if (IN_MOBILE == 2) { foreach($postlist as $pid=>$post) { $imgattvaluelist = array(); preg_match_all("/\[attach\](\d+)\[\/attach\]|\[img\]\s*([^\[\<\r\n]+?)\s*\[\/img\]|\[img=\d{1,4}[x|\,]\d{1,4}\]\s*([^\[\<\r\n]+?)\s*\[\/img\]/is", $post['message'], $results); foreach($results[0] as $k => $result) { for ($i=1; $i<=3; $i++) { if (!empty($results[$i][$k])) { if ($_G['group']['allowgetimage'] || $i>1) $imgattvaluelist[] = $results[$i][$k]; } } } $postlist[$pid]['imgattvaluelist'] = $imgattvaluelist; } } 注意我们在调用discuzcode前运行这段代码,因为从帖子的bbcode内容里找到上传图片的附件ID和网络图片的地址比在html里找容易。
1c) 给网络图片套上超链:在下面这句 if($_G['forum_attachpids'] && !defined('IN_ARCHIVER')) { 前加入 if (IN_MOBILE == 2) { foreach($postlist as $pid => $post) { $postlist[$pid]['message'] = preg_replace_callback("/\<img([\w\W]+?)\/\>/is", array(new image_add_hyperlink_callback($post['imgattvaluelist']), 'callback'), $post['message']); } } 1d) 再在这个文件的末端添加一个上面这句里用到的callback类: class image_add_hyperlink_callback { private $imagelist; function __construct($imagelist) { $this->imagelist = $imagelist; } public function callback($matches) { global $_G; preg_match('/src=["\']([^"\']+)/i',$matches[1], $result); if (!empty($result)) { $key = array_search($result[1], $this->imagelist); if ($key !== false) { return '< a href="forum.php?mod=viewthread&tid='.$_G['tid'].'&aid='.urlencode($result[1]).'&from=album&page='.$_G[page].'" class="orange">' .$matches[0] .'</a>'; } } return $matches[0]; } } 这里值得注意的是我们不能给帖子里的所有图片都加超链,因为有些图片是Discuz添加的,如显示附件的icon。所以我们要检查在帖子里找到的每个图片是否属于前面我们找到的附件及网络图片列。
1e) 还要加上没有插入的上传图片:在下面这句前 if(empty($postlist)) { 加入 if (IN_MOBILE == 2 && $_G['group']['allowgetimage']) { foreach($postlist as $pid=>$post) { foreach($post['imagelist'] as $image) { $postlist[$pid]['imgattvaluelist'][] = $image; } } } 2) 前面得到的是附件ID和网络图片地址列,还需要将不是图片的附件从该列里去掉。修改脚本文件 source/include/thread/thread_album.php ,在下面这句 if(empty($imglist)) { 前加入 if (IN_MOBILE == 2) { $imgattvaluelist = array(); foreach($postlist as $pid=>$post) { $imgattvaluelist = array_merge($imgattvaluelist, $post['imgattvaluelist']); } $imgattvaluelist = array_unique($imgattvaluelist); $timglist = $imglist; $imglist = array(); foreach ($imgattvaluelist as $value) { if (ctype_digit($value)) { $key = array_search($value, $timglist['aid']); if ($key !== false) { $imglist['aid'][] = $value; $imglist['url'][] = $timglist['url'][$key]; } } else { $imglist['aid'][] = null; $imglist['url'][] = $value; } } } 3) 最后要修改对应于触屏版的大图显示页的模板文件 template/default/touch/forum/viewthread_album.htm。
3a) 将下面这句 <!--{if $_GET['aid'] == $aid}--> 改为 <!--{if $_GET['aid'] == $aid || rawurldecode($_GET['aid']) == $imglist['url'][$k]}--> 3b) 将下面这句 <!--{loop $imglist[url] $key $imgurl}--> 改为 <!--{loop $imglist['aid'] $key $aid}--> 3c) 再将下面这句 <!--{eval $imgurl = getforumimg($imglist[aid][$key], 0, 2000, 550, 'fixnone');}--> 改为 <!--{eval $imgurl = empty($aid)?$imglist['url'][$key]:getforumimg($aid, 0, 2000, 550, 'fixnone');}-->
相关修改文件下载(适用于Discuz 3.4版): http://www.bian-wang.com/discuz/data/userupload/10005/touch_preview_remote_images.zip

注:本文中的代码里的<符号后和a相连时加了一个不应该有的空格,以避免Discuz在保存日志时自动改变日志内容。

发表评论 评论 (36 个评论)

回复 牛肉炖土豆 2018-5-14 11:50 PM
天香公主: 我又查了下修改的代码,发现1c)和3c)都有问题,前者应该就是你没法点击那个图的原因。现在应该改正,你再试试看。

也许你会觉得你那张长图的预览图太小。我试 ...
果然,我只把1c换掉就可以了
感谢,这俩天真的辛苦了!
回复 天香公主 2018-5-14 11:18 PM
牛肉炖土豆: 了解了,我再研究研究,辛苦辛苦了,哈
我又查了下修改的代码,发现1c)和3c)都有问题,前者应该就是你没法点击那个图的原因。现在应该改正,你再试试看。

也许你会觉得你那张长图的预览图太小。我试了试Discuz原来的代码,效果相同,所以这不是我的改动带来的问题:在viewthread_album.htm里的javascript代码设置了预览图最大不超出屏幕的范围。
回复 carry0987 2018-5-14 06:55 PM
天香公主: 就是把多张图片串起来了,有时在微信里会看到这种长图片
喔喔,原來如此,還以為是拍了什麼東西呢...
回复 天香公主 2018-5-14 04:24 PM
carry0987: 居然超過1萬px...厲害了
就是把多张图片串起来了,有时在微信里会看到这种长图片
回复 carry0987 2018-5-14 10:41 AM
天香公主: 你的例子里的图片的尺寸出乎了Discuz的想象    Discuz里关于img的bbcode里假定图片长高都不超过4位数,而你的图片高达一万多px。我估计把我1b)里的正则表 ...
居然超過1萬px...厲害了
回复 牛肉炖土豆 2018-5-14 12:13 AM
天香公主: 你的例子里的图片的尺寸出乎了Discuz的想象    Discuz里关于img的bbcode里假定图片长高都不超过4位数,而你的图片高达一万多px。我估计把我1b)里的正则表 ...
了解了,我再研究研究,辛苦辛苦了,哈
回复 天香公主 2018-5-14 12:10 AM
牛肉炖土豆: 可以测试任意页面,除了私信里的基本都是网络图片,我在即时更新缓存
你的例子里的图片的尺寸出乎了Discuz的想象   Discuz里关于img的bbcode里假定图片长高都不超过4位数,而你的图片高达一万多px。我估计把我1b)里的正则表达式里的两个4改成5就解决了你遇到的问题。

我文中就不改了,因为这句正则表达式是从function_discuzcode.php 里抄来的,要改的话两句得一起改才配套。
回复 牛肉炖土豆 2018-5-13 11:02 PM
天香公主: 对,我也刚发现文中少了这段,现在加在3b)里了。更新缓存试试,还不行的话,把有问题的那个网页告诉我
可以测试任意页面,除了私信里的基本都是网络图片,我在即时更新缓存
回复 天香公主 2018-5-13 10:58 PM
牛肉炖土豆: 第3步,模版文件里有一处与默认的不同,
默认:<!--{loop $imglist[url] $key $imgurl}-->
您的下载文件:<!--{loop $imglist[aid] $key $aid}-->

全部覆盖,改 ...
对,我也刚发现文中少了这段,现在加在3b)里了。更新缓存试试,还不行的话,把有问题的那个网页告诉我
回复 牛肉炖土豆 2018-5-13 10:53 PM
第3步,模版文件里有一处与默认的不同,
默认:<!--{loop $imglist[url] $key $imgurl}-->
您的下载文件:<!--{loop $imglist[aid] $key $aid}-->

全部覆盖,改成您也不行
回复 牛肉炖土豆 2018-5-13 10:43 PM
天香公主: 我这测试没发现有这问题,你给个网页我看看。

如果你是按我文中的代码改的,会不会是漏改了什么?能否先用下载文件覆盖你的网站文件试试? ...
好的,我用下载的覆盖试试,网站还是私信的那个帖子
回复 天香公主 2018-5-13 10:34 PM
牛肉炖土豆: 我修改过了,这次又有了新问题,
1.网络图片独自存在时又点不开了
我这测试没发现有这问题,你给个网页我看看。

如果你是按我文中的代码改的,会不会是漏改了什么?能否先用下载文件覆盖你的网站文件试试?
回复 牛肉炖土豆 2018-5-13 10:24 PM
天香公主: 我想我是理解你说的问题了:如果没插入的上传图片显示在论坛页上的话,它也应该显示在预览列表里。我改过了,你再试试。另外对没登陆状态也有问题,也改了。 ...
我修改过了,点未插入的可以了,这次又有了新问题,
1.网络图片独自存在时又点不开了
回复 天香公主 2018-5-13 07:00 PM
牛肉炖土豆: 改完最新代码后,现在网络图片独自存在的时候,可以操作了

还有发现一个问题,好像不是远程附件的问题

我发现,从上传附件按钮,上传图片后,如果插入到贴内, ...
我想我是理解你说的问题了:如果没插入的上传图片显示在论坛页上的话,它也应该显示在预览列表里。我改过了,你再试试。另外对没登陆状态也有问题,也改了。
回复 牛肉炖土豆 2018-5-13 12:38 PM
天香公主: >> 当贴内图片全部都是外链图片的时候,点击图片后,提示没有上传的图片,而且还影响电脑版的图片
的确是我考虑不周,已经改了文中代码和下载代码。现在我加了 ...
改完最新代码后,现在网络图片独自存在的时候,可以操作了

还有发现一个问题,好像不是远程附件的问题

我发现,从上传附件按钮,上传图片后,如果插入到贴内,是没问题的,如果没插入,图片也会显示(后台全局-上传设置-论坛附件-帖子中显示图片附件:),这时候就不起作用了
回复 天香公主 2018-5-13 09:23 AM
牛肉炖土豆: 我发现了可一个BUG,就是,当贴内图片全部都是外链图片的时候,点击图片后,提示没有上传的图片,而且还影响电脑版的图片,

如果贴内,上传的图片和网络图片同 ...
>> 当贴内图片全部都是外链图片的时候,点击图片后,提示没有上传的图片,而且还影响电脑版的图片
的确是我考虑不周,已经改了文中代码和下载代码。现在我加了一个是否是触屏版的判断,还改了一段代码的位置。你再试试

>> 并且开启远程附件时也不正常
在你更新了代码后,试试看远程附件是否还有问题。如果有的话,给我个带远程附件的论坛页试试
回复 carry0987 2018-5-13 12:25 AM
牛肉炖土豆: 我发现了可一个BUG,就是,当贴内图片全部都是外链图片的时候,点击图片后,提示没有上传的图片,而且还影响电脑版的图片,

如果贴内,上传的图片和网络图片同 ...
為啥Discuz要把這些圖片都分開處理呢....
回复 牛肉炖土豆 2018-5-12 11:45 PM
天香公主: 哈,能用就好。论坛的代码我不大敢改,因为很多代码都不知是干嘛的。这次这个改动是相对独立的,应该不会对电脑版和其它版本产生副作用。 ...
我发现了可一个BUG,就是,当贴内图片全部都是外链图片的时候,点击图片后,提示没有上传的图片,而且还影响电脑版的图片,

如果贴内,上传的图片和网络图片同时存在,并且开启远程附件时也不正常

演示地址发消息与您
回复 天香公主 2018-5-12 10:22 AM
牛肉炖土豆:    完美,我在PHP5.2和PHP7.0上测试,两个效果相同,赞!
天香老师辛苦了,又解决了一个难题!感谢。
哈,能用就好。论坛的代码我不大敢改,因为很多代码都不知是干嘛的。这次这个改动是相对独立的,应该不会对电脑版和其它版本产生副作用。
回复 牛肉炖土豆 2018-5-12 10:11 AM
天香公主: 日志里的代码和下载代码都更新过了,再试试
   完美,我在PHP5.2和PHP7.0上测试,两个效果相同,赞!
天香老师辛苦了,又解决了一个难题!感谢。
12下一页

facelist doodle 涂鸦板

您需要登录后才可以评论 登录 | 立即注册

小黑屋|Archiver|彼岸网  

Powered by Discuz! X3.1 © 2001-2014 Comsenz Inc.
GMT-4, 2018-7-21 06:57 PM , Processed in 0.057744 second(s), 9 queries. ,ApcOn

返回顶部