[分享]縮圖外掛 Resize Posted Images for phpbb3

phpBB Installation & Usage Support
phpBB 3 安裝於各類型作業平台之問題討論;外掛問題,請到相關版面依發問格式發表!
(發表文章請按照公告格式發表,違者砍文)

版主: 版主管理群

版面規則
本區是討論關於 phpBB 3.0.X 架設安裝上的問題,只要有安裝任何外掛,請到外掛討論相關版面按照公告格式發表。
(發表文章請按照公告格式發表,違者砍文)
主題已鎖定
頭像
SCR
竹貓忠實會員
竹貓忠實會員
文章: 330
註冊時間: 2006-03-11 23:21
來自: 網路的小角落

[分享]縮圖外掛 Resize Posted Images for phpbb3

文章 SCR »

參考外掛:Resize Posted Images Based on Max Widt 2.4.5

因為 phpbb 3.0 已將 "附加檔案" 的功能給內建了,所以未來使用這功能的討論區將會更多,但針對附加在文章裡面的圖片如果尺寸過大時,依然還是會把整個版面給撐大.
原本 Resize Posted Images Based on Max Widt 2.4.5 這個縮圖外掛是裝在 2.0.* 版本的,剛剛我把他給改了一下安裝的方法,也成功的裝進 phpbb 3.0 內.在此分享給大家.

原始檔頭

代碼: 選擇全部

############################################################## 
## MOD Title: Resize Posted Images Based on Max Width 
## MOD Author: spooky2280 < webmaster@christianfecteau.com > (Christian Fecteau) http://portfolio.christianfecteau.com/ 
## MOD Description: This MOD resizes images within posts to make it so they don't break your layout. Images resized are made 
## clickable and openable in a popup in full-size. You can specify a different max width for each of your themes. 
## Images that do not exceed the max width are left as is. See the MOD in action: http://christianfecteau.com/rmw 
## 
## MOD Version: 2.4.5 
## 
## Installation Level: Easy 
## Installation Time: 5 Minutes (1 minute with EasyMod) 
底下是我的修改方法

代碼: 選擇全部

修改文件:6
styles/prosilver/template/attachment.html
styles/prosilver/template/overall_footer.html
styles/prosilver/template/overall_header.html
styles/prosilver/template/simple_footer.html
styles/prosilver/template/simple_header.html
language/語系/common.php

新增文件:1
rmw_jslib.js

開始

代碼: 選擇全部

---- [ 複製 ] -----
templates/rmw_jslib.js  到  styles/prosilver/template/rmw_jslib.js


----- [ 開啟 ] -----
styles/prosilver/template/attachment.html


----- [ 尋找 ] -----
			<dt class="attach-image"><img src="{_file.U_INLINE_LINK}" alt="{_file.DOWNLOAD_NAME}" onclick="viewableArea(this);" /></dt>


----- [ 置換 ] -----
			<dt class="attach-image"><img resizemod="on" onload="rmw_img_loaded(this)" src="{_file.U_INLINE_LINK}" alt="{_file.DOWNLOAD_NAME}" onclick="viewableArea(this);" /></dt>


----- [ 開啟 ] -----
styles/prosilver/template/bbcode.html

----- [ 尋找 ] -----
			<!-- BEGIN img --><img src="{URL}" alt="{L_IMAGE}" /><!-- END img -->


----- [ 置換 ] -----
			<!-- BEGIN img --><img resizemod="on" onload="rmw_img_loaded(this)" src="{URL}" alt="{L_IMAGE}" /><!-- END img -->


----- [ 開啟 ] -----
styles/prosilver/template/overall_footer.html


----- [ 尋找 ] -----
</body>


----- [ 之前新增 ] -----
<div style="display:none" id="resizemod"></div>


----- [ 開啟 ] -----
styles/prosilver/template/overall_header.html


----- [ 尋找 ] -----
<title>{SITENAME} &bull; <!-- IF S_IN_MCP -->{L_MCP} &bull; <!-- ELSEIF S_IN_UCP -->{L_UCP} &bull; <!-- ENDIF -->{PAGE_TITLE}</title>


----- [ 之後新增 ] -----
<!-- start mod : Resize Posted Images Based on Max Width --> 
<script type="text/javascript"> 
//<![CDATA[ 
<!-- 

var rmw_max_width = 700; // you can change this number, this is the max width in pixels for posted images 
var rmw_border_1 = '1px solid'; 
var rmw_border_2 = '1px dotted'; 
var rmw_image_title = '{L_RMW_IMAGE_TITLE}'; 

//--> 
//]]> 
</script> 
<script type="text/javascript" src="{T_TEMPLATE_PATH}/rmw_jslib.js"></script> 
<!-- fin mod : Resize Posted Images Based on Max Width -->


----- [ 開啟 ] -----
styles/prosilver/template/simple_footer.html


----- [ 尋找 ] -----
</body>


----- [ 之前新增 ] -----
<div style="display:none" id="resizemod"></div>


----- [ 開啟 ] ----- 
styles/prosilver/template/simple_header.html


----- [ 尋找 ] -----
<title>{SITENAME} &bull; <!-- IF S_IN_MCP -->{L_MCP} &bull; <!-- ELSEIF S_IN_UCP -->{L_UCP} &bull; <!-- ENDIF -->{PAGE_TITLE}</title>


----- [ 之後新增 ] -----
<!-- start mod : Resize Posted Images Based on Max Width --> 
<script type="text/javascript"> 
//<![CDATA[ 
<!-- 

var rmw_max_width = 700; // this max width is used in the Topic Review iframe when posting 
var rmw_border_1 = '1px solid'; 
var rmw_border_2 = '1px dotted'; 
var rmw_image_title = '{L_RMW_IMAGE_TITLE}'; 

//--> 
//]]> 
</script> 
<script type="text/javascript" src="{T_TEMPLATE_PATH}/rmw_jslib.js"></script> 
<!-- fin mod : Resize Posted Images Based on Max Width --> 


----- [ 開啟 ] -----
language/語系/common.php


----- [ 尋找 ] ----- 
));


----- [ 之前新增 ] -----
'RMW_IMAGE_TITLE' => '點擊檢視原尺寸圖片', //mod : Resize Posted Images Based on Max Width


----- [ 清除暫存檔 ] -----
cache 目錄下所有檔案請清除!


----- [ 儲存並關閉所有檔案 ] -----
ps:如果不喜歡顯示的圖片框有捲軸的話,可以修改
styles/prosilver/template/attachment.html

代碼: 選擇全部

---- [ 尋找 ] -----
<dt class="attach-image">

----- [ 置換 ] -----
<dt>
最後由 SCR 於 2008-08-15 15:32 編輯,總共編輯了 2 次。
知難非行易,知易反行難~~
頭像
心靈捕手
默默耕耘的老師
默默耕耘的老師
文章: 8510
註冊時間: 2004-04-30 01:54
來自: Taiwan

Re: [分享]縮圖外掛 Resize Posted Images for phpbb3

文章 心靈捕手 »

SCR 寫:因為 phpbb 3.0 已將 "附加檔案" 的功能給內建了,所以未來使用這功能的討論區將會更多,但針對附加在文章裡面的圖片如果尺寸過大時,依然還是會把整個版面給撐大.
其實, 可以不用修改檔案的.

如果您系統啟用 GD 模組, 或安裝 Imagemagick 軟體,
只要設定 'ACP / 一般 / 附加檔案設定 / 建立縮圖: 是' 即可.

TEST & DEMO:
http://wang5555.dnsfor.me/test/phpBB3/viewt ... p?f=5&t=16
施比受有福,祝福您好運! ^_^
歡迎光臨★★心靈捕手★★ :: 討論區
https://wang5555.dnsfor.me/phpBB3/
peter37
星球公民
星球公民
文章: 99
註冊時間: 2004-12-31 16:35

Re: [分享]縮圖外掛 Resize Posted Images for phpbb3

文章 peter37 »

請問原始檔這一部分有做修改,請問 phpBB 3.01 是否也要作修改?

#
#-----[ OPEN ]------------------------------------------
#
templates/subSilver/bbcode.tpl
#
#-----[ FIND ]------------------------------------------
#
# around line 56
#
<!-- BEGIN img -->
#
#-----[ IN-LINE FIND ]------------------------------------------
#
<img
#
#-----[ IN-LINE AFTER, ADD ]------------------------------------------
#
# should look like: <img resizemod="on" onload="rmw_img_loaded(this)" src="{URL}" border="0" />
#
resizemod="on" onload="rmw_img_loaded(this)"
#
peter37
星球公民
星球公民
文章: 99
註冊時間: 2004-12-31 16:35

Re: [分享]縮圖外掛 Resize Posted Images for phpbb3

文章 peter37 »

您好

我是用 phpBB3 3.0.1 subsilver2 如果照這樣做修改,在 IE6 或 IE7 瀏灠器下開啟縮圖時會出現問題,開啟縮圖時,無法直接開啟大圖,而是會顯示下載檔案,或是出現底下的訊息

"Internet Explorer 正在執行 (但是己停用附加元件)"

"為了協助保護您的資訊安全性,Internet Explorer 己封鎖這個網站下載檔案到您的電腦。其他選項請按這裡..."

如果是使用其他非 IE 的瀏覽器,開啟縮圖時,則不會出現問題,不知道有沒有辦法修正? 先謝回覆。
hollowaysxp
竹貓忠實會員
竹貓忠實會員
文章: 535
註冊時間: 2004-06-01 22:39
來自: 仙境傳說回憶最美~台灣桃園
聯繫:

Re: [分享]縮圖外掛 Resize Posted Images for phpbb3

文章 hollowaysxp »

縮圖專用的JS檔在此下載rmw_jslib.js

以下縮圖程式安裝方法來自竹貓星球SCR的做法,與本人hollowaysxp小修改完成的,hollowaysxp我修改了對於BBCode的[img]語法縮圖,原本只能針對論壇附加檔縮圖。
原文請看這:[分享]縮圖外掛 Resize Posted Images for phpbb3
以下請看

代碼: 選擇全部

因為 phpbb 3.0 已將 "附加檔案" 的功能給內建了,所以未來使用這功能的討論區將會更多,但針對附加在文章裡面的圖片如果尺寸過大時,依然還是會把整個版面給撐大. 
原本 Resize Posted Images Based on Max Widt 2.4.5 這個縮圖外掛是裝在 2.0.* 版本的,剛剛我把他給改了一下安裝的方法,也成功的裝進 phpbb 3.0 內.在此分享給大家. 

hollowaysxp:目前修改為支援BBCode的[img]縮圖,附件檔縮圖交給phpBB3.0.1後台縮圖吧!

原始檔頭
代碼: 選擇全部
############################################################## 
## MOD Title: Resize Posted Images Based on Max Width 
## MOD Author: spooky2280 < webmaster@christianfecteau.com > (Christian Fecteau) http://portfolio.christianfecteau.com/ 
## MOD Description: This MOD resizes images within posts to make it so they don't break your layout. Images resized are made 
## clickable and openable in a popup in full-size. You can specify a different max width for each of your themes. 
## Images that do not exceed the max width are left as is. See the MOD in action: http://christianfecteau.com/rmw 
## 
## MOD Version: 2.4.5 
## 
## Installation Level: Easy 
## Installation Time: 5 Minutes (1 minute with EasyMod) 


底下是我的修改方法
代碼: 選擇全部
修改文件:5
styles/prosilver/template/overall_footer.html
styles/prosilver/template/overall_header.html
styles/prosilver/template/simple_footer.html
styles/prosilver/template/simple_header.html
styles/prosilver/template/bbcode.html
language/語系/common.php

新增文件:1
rmw_jslib.js



開始
代碼: 選擇全部
---- [ 複製 ] -----
複製 rmw_jslib.js  到  styles/prosilver/template/rmw_jslib.js

----- [ 開啟 ] -----
styles/prosilver/template/overall_footer.html


----- [ 尋找 ] -----
</body>


----- [ 之前新增 ] -----
<div style="display:none" id="resizemod"></div>


----- [ 開啟 ] -----
styles/prosilver/template/overall_header.html


----- [ 尋找 ] -----
<title>{SITENAME} &bull; <!-- IF S_IN_MCP -->{L_MCP} &bull; <!-- ELSEIF S_IN_UCP -->{L_UCP} &bull; <!-- ENDIF -->{PAGE_TITLE}</title>


----- [ 之後新增 ] -----
<!-- start mod : Resize Posted Images Based on Max Width --> 
<script type="text/javascript"> 
//<![CDATA[ 
<!-- 

var rmw_max_width = 800; // you can change this number, this is the max width in pixels for posted images 
var rmw_border_1 = '1px solid'; 
var rmw_border_1 = '1px dotted';
var rmw_border_2 = '1px solid'; 
var rmw_border_2 = '1px dotted'; 
var rmw_image_title = '{L_RMW_IMAGE_TITLE}'; 

//--> 
//]]> 
</script> 
<script type="text/javascript" src="{T_TEMPLATE_PATH}/rmw_jslib.js"></script> 
<!-- fin mod : Resize Posted Images Based on Max Width -->


----- [ 開啟 ] -----
styles/prosilver/template/simple_footer.html


----- [ 尋找 ] -----
</body>


----- [ 之前新增 ] -----
<div style="display:none" id="resizemod"></div>


----- [ 開啟 ] ----- 
styles/prosilver/template/simple_header.html


----- [ 尋找 ] -----
<title>{SITENAME} &bull; <!-- IF S_IN_MCP -->{L_MCP} &bull; <!-- ELSEIF S_IN_UCP -->{L_UCP} &bull; <!-- ENDIF -->{PAGE_TITLE}</title>


----- [ 之後新增 ] -----
<!-- start mod : Resize Posted Images Based on Max Width --> 
<script type="text/javascript"> 
//<![CDATA[ 
<!-- 

var rmw_max_width = 800; // this max width is used in the Topic Review iframe when posting 
var rmw_border_1 = '1px solid'; 
var rmw_border_1 = '1px dotted';
var rmw_border_2 = '1px solid'; 
var rmw_border_2 = '1px dotted'; 
var rmw_image_title = '{L_RMW_IMAGE_TITLE}'; 

//--> 
//]]> 
</script> 
<script type="text/javascript" src="{T_TEMPLATE_PATH}/rmw_jslib.js"></script> 
<!-- fin mod : Resize Posted Images Based on Max Width --> 

----- [ 開啟 ] -----
styles/prosilver/template/bbcode.html


----- [ 尋找 ] ----- 
<!-- BEGIN img --><img

----- [ 同行加上 ] -----
#################
##這行是加入對於BBCode對[img]縮圖,加入後變成
## <!-- BEGIN img --><img resizemod="on" onload="rmw_img_loaded(this)" src="{URL}" alt="{L_IMAGE}" /><!-- END img -->
#################
 resizemod="on" onload="rmw_img_loaded(this)"

----- [ 開啟 ] -----
language/語系/common.php


----- [ 尋找 ] ----- 
));


----- [ 之前新增 ] -----
'RMW_IMAGE_TITLE' => '點擊檢視原尺寸圖片', //mod : Resize Posted Images Based on Max Width


----- [ 清除暫存檔 ] -----
cache 目錄下所有檔案請清除!


----- [ 儲存並關閉所有檔案 ] -----





這裡是原SCR又補充的部分~這邊我hollowaysxp可沒做
ps:如果不喜歡顯示的圖片框有捲軸的話,可以修改
styles/prosilver/template/attachment.html

代碼: 選擇全部
---- [ 尋找 ] -----
<dt class="attach-image">

----- [ 置換 ] -----
<dt>
文章內看到的var rmw_max_width = 800;可自行修改,800是把圖的寬縮成800個像素,原本SCR是用700,BNW好像是用660。

完全遵照上述的外掛修改成功的網站範例在此:NITCS論壇::拉亞漢堡早餐-桃園市經國路上長榮店

上面有問到的問題應該是bbcode.tpl沒做的話,那[img]的代碼就不會被縮圖,所以參考看看吧!
最後由 hollowaysxp 於 2008-04-29 10:04 編輯,總共編輯了 3 次。
●架設主機作業系統:FreeBSD 6.2-RELEASE (自行架設)
●我的上網方式:FTTB+VDSL HINET 10M/2M
●我安裝的程式:Apache 2.0.59+ PHP Version 4.4.4 + MySql 4.1.21+phpMyadmin 2.9.1.1
●我的 phpBB3 版本:phpBB3.0.1
●我的 phpBB3 連結網址 http://nitcs.itrello.com/forum/
NITCS歡迎你
NITCS論壇
peter37
星球公民
星球公民
文章: 99
註冊時間: 2004-12-31 16:35

Re: [分享]縮圖外掛 Resize Posted Images for phpbb3

文章 peter37 »

縮圖外掛 Resize Posted Images for phpbb3

這一個從 phpBB2 更改而來的縮圖外掛, 如果您的圖片是利用 Attachment 上傳時,當您瀏覽器為 IE ,點擊縮圖 (原圖直接縮圖) 拉大圖時,圖片將會變成下載, 這是因為 phpBB3 使用 Attachment 上傳會將圖片網址加密 (MD5) 所以 IE 開啟 Attachment 的 [img] bbcode 語法直接縮圖的圖片時, 將會變成下載.

hollowaysxp 您的 [img] 縮圖用 ie 可以拉大圖, 那是因為您的圖片是外連, 圖片網址沒有經過 MD5 加密, 所以 ie 可以直接點擊縮圖拉大圖, 而不會變成下載. :-D
hollowaysxp
竹貓忠實會員
竹貓忠實會員
文章: 535
註冊時間: 2004-06-01 22:39
來自: 仙境傳說回憶最美~台灣桃園
聯繫:

Re: [分享]縮圖外掛 Resize Posted Images for phpbb3

文章 hollowaysxp »

這個我剛剛試過了,所以我把原SCR大的附加檔縮圖地方取消掉,附加檔這部分心靈捕手大說可用後台的縮圖程式去縮。 :mrgreen:
●架設主機作業系統:FreeBSD 6.2-RELEASE (自行架設)
●我的上網方式:FTTB+VDSL HINET 10M/2M
●我安裝的程式:Apache 2.0.59+ PHP Version 4.4.4 + MySql 4.1.21+phpMyadmin 2.9.1.1
●我的 phpBB3 版本:phpBB3.0.1
●我的 phpBB3 連結網址 http://nitcs.itrello.com/forum/
NITCS歡迎你
NITCS論壇
頭像
ckenin
星球普通子民
星球普通子民
文章: 21
註冊時間: 2007-02-06 05:16

Re: [分享]縮圖外掛 Resize Posted Images for phpbb3

文章 ckenin »

心靈捕手 寫:
SCR 寫:因為 phpbb 3.0 已將 "附加檔案" 的功能給內建了,所以未來使用這功能的討論區將會更多,但針對附加在文章裡面的圖片如果尺寸過大時,依然還是會把整個版面給撐大.
其實, 可以不用修改檔案的.

如果您系統啟用 GD 模組, 或安裝 Imagemagick 軟體,
只要設定 'ACP / 一般 / 附加檔案設定 / 建立縮圖: 是' 即可.

TEST & DEMO:
http://wang5555.dnsfor.me/test/phpBB3/viewt ... p?f=5&t=16
我是使用N.Design風格 照心靈大方式在後台開啟縮圖 但沒任何效果
清除快取 跟重新整理風格都做過
但是轉換到prosilver風格且開啟縮圖 就會有視窗條出現 (應該是縮圖成功吧)
若關閉縮圖 視窗條消失 版面就會被撐大

所以反覆交叉實驗 認為這方法只適用初始風格prosilver 才會成功
若選用個人風格 需要"文中縮圖"功能 建議參考心靈大Easy Resize Posted Images 外掛
●架設主機作業系統:why3s主機
●您的上網方式:hinet ADSL
●您的 phpBB2 版本:phpBB-2.0.22 (utf-8)
●您的 domain(網域名稱) :http://paopao.why3s.cc/
●您的 phpBB2 連結網址: 歡迎來留言^^
過山雲
竹貓忠實會員
竹貓忠實會員
文章: 390
註冊時間: 2002-09-05 20:11
來自: 東都.承天府.萬年縣治.拱辰門北
聯繫:

Re: [分享]縮圖外掛 Resize Posted Images for phpbb3

文章 過山雲 »

這個我也覺得很好的功能

不過是有通過官方認證的外掛嗎?
圖檔
拉拉蹦
星球普通子民
星球普通子民
文章: 25
註冊時間: 2002-04-05 03:36

Re: [分享]縮圖外掛 Resize Posted Images for phpbb3

文章 拉拉蹦 »

想請問一下,此外掛跟 http://phpbb-tw.net/phpbb/viewtopic.php?t=41910 所提到的 MW3 是否一樣?

如果圖片是連結到 flickr 之類的網站,是否可以自動順應版面寬度而縮小呢?謝謝!
●架設主機作業系統:Windows XP
●快速架站程式:appserv-win32-2.4.4a
●免費空間連結:
●您的上網方式:ADSL
●您安裝的程式:Apache + php + MySql + phpMyAdmin
●您的 phpBB3 版本:phpBB 3.0.4
●您的 domain(網域名稱) :http://localhost
●您的 phpBB3 連結網址: http://localhost
主題已鎖定

回到「[3.0.x] 安裝與使用」