Other [Phát hiện nhỏ] Chia sẻ cách chèn upload ảnh cực hay, tùy chọn resize, load cực nhẹ dành cho xenForo

Chào anh em!
Ai hay upload ảnh lên forum chắc đều biết về Postimage.org, là 1 trang hoạt động 10 năm nay và chuyên về hình ảnh dành riêng cho các nền tảng forum, khong bị giảm chất lượng hình ảnh như Picasa, tốc độ maximum đường truyền, tùy chọn việc resize hay không, sau khi upload xong thì tự chèn code vào post luôn, hình ảnh được lưu trữ mãi mãi. Có thể xem giới thiệu tại đây:

Giới thiệu: http://postimage.org/about.php

Hỗ trợ gần chục loại mã nguồn forums: http://postimage.org/mod.php

Ok, các bước tiến hành:
Trường hợp 1: Đã cài addons (cài xong enable, import các BBcode trong file ở thư mục Extra, và chỉnh để nó xuất hiện các nút bấm BBcode): https://codeload.github.com/cclaerhout/xen_MarkItUp_Integrator/zip/master

Vào ACP- Template - Chọn Style mà muốn áp dụng - Chọn template Editor (hoặc template header cũng được, ở đây mình chọn template Editor để chỉ khi nào người ta đăng nhập để comment thì nó mới load)

Chèn dòng này vào ngay trước chỗ </xen:hook> (lưu ý là ngay trước </xen:hook>, tức là ngay trước khi kết thúc lệnh <xen:hook> )

PHP:

<script type="text/javascript" src="http://mod.postimage.org/vbulletin-vietnam-hotlink-family.js" charset="utf-8"></script>

Mình thử tải cái file .js trên, chỉ có hơn 3KB thôi, quá nhẹ so với các cách upload khác.
Ok, xong rồi đó, anh em thử tạo topic mới hoặc comment xem Cái này có cái hay là rất gọn, không làm rối mắt và vỡ bố cục forums, nhưng lại đầy đủ tinh năng

Hoặc muốn có .js nhỏ hơn 30%, thì dùng code này (không khuyến khích, vì cái này dùng cho website chứ không phải xenForo, tuy nhiên, mình dùng thấy vẫn ổn, chưa phát hiện ra lỗi gì cả):

PHP:

<script type="text/javascript" src="http://mod.postimage.org/website-vietnam-hotlink-family.js" charset="utf-8"></script>

Trường hợp 2 phải chờ người rành về JavaScrip vào giúp, chứ mấy cái mình ghi ở dưới chỉ là mấy cái mình nghĩ thôi : Chỉnh sửa file .js này tương thích với cái Editor Redactor của xenForo (trong đoạn code của file .js, mình thấy chữ CKeditor), mình nghĩ là nó liên quan đến phần này:

Mình nói thế, vì ở trường hợp 1, mình cài cái editor khác thay thế editor mặc định của xenForo, thì làm được luôn, và hoàn toàn chạy ngon lành. còn ở đây, nếu không thay thế editor khác thì không thấy nó xuất hiện.

PHP:

function postimage_isCkeditor(e){return (e.className).indexOf('ckeditor')>-1;}if(opener){var postimage_text=postimage_query_string("postimage_text");if(postimage_text){var postimage_id=postimage_query_string("postimage_id");var postimage_area=opener.document.getElementsByTagName('textarea');for(var postimage_i=0;postimage_i<postimage_area.length;postimage_i++){if(postimage_i==postimage_id){break;}}var postimage_inserted=false;if(typeof opener.vB_Editor==='object'){for(var A in opener.vB_Editor){if(opener.vB_Editor[A].wysiwyg_mode && opener.vB_Editor[A].initialized){opener.vB_Editor[A].write_editor_contents((opener.vB_Editor[A].get_editor_contents()+postimage_text),true);postimage_inserted=true;}}}if(typeof postimage_area[postimage_i]!=='undefined'){if(postimage_inserted===false && typeof opener.CKEDITOR==='object' && typeof opener.CKEDITOR.instances[postimage_area[postimage_i].id]==='object'){opener.CKEDITOR.instances[postimage_area[postimage_i].id].insertText(postimage_text);}else{postimage_area[postimage_i].value=postimage_area[postimage_i].value+postimage_text;}}opener.focus();window.close();}}

còn đây là toàn bộ file .js:

PHP:

// MOD Title: Simple Image Upload
// MOD Author: Sium < admin@postimage.org > (N/A) http://postimage.org/
// MOD Version: 1.5.0

if(typeof postimage_lang==='undefined')
{
  var postimage_lang="vietnam";
  var postimage_add_text="Upload hình ảnh ۩";

function postimage_query_string(postimage_search_name){if(window.location.hash){postimage_query=window.location.hash.substring(1).split("&");for(postimage_i=0;postimage_i<postimage_query.length;postimage_i++){postimage_string_data=postimage_query[postimage_i].split("=");if(postimage_string_data[0]==postimage_search_name){postimage_string_data.shift();return unescape(postimage_string_data.join("="));}}}return void(0);}

function postimage_isVisible(e){return e.offsetWidth>0 || e.offsetHeight>0;}function postimage_isEditor(e){return (e.id).indexOf('vB_Editor')>-1;}

function postimage_isCkeditor(e){return (e.className).indexOf('ckeditor')>-1;}if(opener){var postimage_text=postimage_query_string("postimage_text");if(postimage_text){var postimage_id=postimage_query_string("postimage_id");var postimage_area=opener.document.getElementsByTagName('textarea');for(var postimage_i=0;postimage_i<postimage_area.length;postimage_i++){if(postimage_i==postimage_id){break;}}var postimage_inserted=false;if(typeof opener.vB_Editor==='object'){for(var A in opener.vB_Editor){if(opener.vB_Editor[A].wysiwyg_mode && opener.vB_Editor[A].initialized){opener.vB_Editor[A].write_editor_contents((opener.vB_Editor[A].get_editor_contents()+postimage_text),true);postimage_inserted=true;}}}if(typeof postimage_area[postimage_i]!=='undefined'){if(postimage_inserted===false && typeof opener.CKEDITOR==='object' && typeof opener.CKEDITOR.instances[postimage_area[postimage_i].id]==='object'){opener.CKEDITOR.instances[postimage_area[postimage_i].id].insertText(postimage_text);}else{postimage_area[postimage_i].value=postimage_area[postimage_i].value+postimage_text;}}opener.focus();window.close();}}


function postimage_insert(){var postimage_area=document.getElementsByTagName('textarea');for(var postimage_i=0;postimage_i<postimage_area.length;postimage_i++){if(!postimage_area[postimage_i].name.match(/username_list|search|recipients|backup/i)){if(postimage_isVisible(postimage_area[postimage_i]) || postimage_isEditor(postimage_area[postimage_i])){postimage_div=document.createElement('div');postimage_open=document.createElement('a');postimage_open.innerHTML=postimage_add_text;postimage_open.href="javascript:postimage_upload("+postimage_i+");";postimage_span=document.createElement('span');postimage_span.innerHTML="&#160;&#8226;&#160;";postimage_div.appendChild(document.createElement('br'));postimage_div.appendChild(postimage_span);postimage_div.appendChild(postimage_open);postimage_div.appendChild(document.createElement('br'));postimage_div.appendChild(document.createElement('br'));if(postimage_isCkeditor(postimage_area[postimage_i])){if(postimage_area[postimage_i].parentNode.nextSibling){postimage_area[postimage_i].parentNode.parentNode.insertBefore(postimage_div,postimage_area[postimage_i].parentNode.nextSibling);}else{postimage_area[postimage_i].parentNode.parentNode.appendChild(postimage_div);}}else{postimage_area[postimage_i].parentNode.appendChild(postimage_div);}}}}}

function postimage_upload(areaid){window.open("http://postimage.org/index.php?mode=vbulletin&areaid="+areaid+"&hash=1&lang="+postimage_lang+"&code=hotlink&content=family&forumurl="+escape(document.location.href),"postimage","resizable=yes,width=500,height=400");return void(0);}if(typeof postimage_text==='undefined'){if(window.addEventListener){window.addEventListener('DOMContentLoaded',postimage_insert,false);}else if(window.attachEvent){window.attachEvent('onload',postimage_insert);}}}

------------
Nói thêm, ai muốn tùy chỉnh thêm, như ngôn ngữ, dạng hình ảnh thu nhỏ, hoặc là muốn post ảnh nhạy cảm, thì vào trang này: http://postimage.org/mod.php
Ở phía trên là mình chọn vBullentin, chọn Việt Nam, chọn Hotlink, chọn Family.
Chọn download.

Tiêu đề mình đặt là phát hiện mới, vì mình tìm mãi cái hỗ trợ xenForo mà không thấy, làm đại cái vBullentin xem sao, ai ngờ được luôn ^^

Ở phần trên chọn Việt Nam để nó hiện ra dòng chữ tiếng Việt, chọn Hotlink có nghĩa là sau khi upload xong, nó tự chèn link vào trong post, chọn Thumbnail là để chèn hình thu nhỏ, chọn Family là để nói lên việc chúng ta upload ảnh bình thường, không phải ảnh sex gì cả, nên sẽ đươc lưu trữ mãi mãi trên server. còn nếu muốn upload ảnh nhạy cảm thì chọn Adult; còn muốn lưu ảnh hỗn hợp thì chọn Mixed.

-----------
Cái này có cái hay là chúng ta không phải chịu trách nhiệm về kho ảnh, vì nó không upload vào tài khoản của chúng ta, nên khi thành viên post ảnh vi phạm thì cũng không bị xóa cả tài khoản của chúng ta.

Nếu ai rành về js, thì có thể tải file .js phía trên về, chỉnh để tất cả ảnh của thành viên upload lên, thì đều vào tài khoản của chúng ta, cái này thì mình không biết làm, nên chờ anh em hướng dẫn tiếp
---------
Thanks anh em!

 

Đã thử chư cho cái demo mà như lưu hết hình rồi một ngày đẹp trời nó xoá hết thì sao

 

bác ơi em làm theo sao không được vậy bác có thể nói rỏ cách chèn code cho em đuợc không em cảm ơn

 

Vào ACP- Template - Chọn Style mà muốn áp dụng - Chọn template Editor, chèn dòng này vào ngay trước chỗ </xen:hook>

<script type="text/javascript" src="http://mod.postimage.org/website-vietnam-hotlink-family.js" charset="utf-8"></script>

 

hébergement gratuit


Sao xóa được, postimage.org lưu trữ mãi mãi mà
và họ upload lên rồi, thì trừ khi họ đăng nhập trước đó, còn không thì không thể xóa được.

mà 1 người đã muốn xóa, thì họ xóa luôn cái post họ comment cho nhanh, chứ chẳng ai rãnh mà đi xóa mấy cái hình, công sức họ comment, họ upload thì chẳng ai làm vậy cả.

 

</xen:hook>
<script type="text/javascript" src="http://mod.postimage.org/website-vietnam-hotlink-family.js" charset="utf-8"></script>


như này đúng không bác chủ thớt

 

Mình có thể lấy của vBB để áp dụng cho Xenforo àh chủ thớt? Có link forum bác để test trực tiếp ko? Sẵn cho cái account demo luôn để test nhé

 

up tinh thần đang quan tâm

 

thử làm xen mà sao nó ko chạy nhỉ.... làm y chang bạn hướng dẫn... add code đó vào tem edit... rồi show button lên thế mà ko hiện gì cả

 

Ok làm được nhưng phải phụ thuộc vào cái add ons editor kia, ko cài cái editor kia là nó ko hiện. Chèn code js trên vào các hook khác vẫn ko display

 

ý mình không phải là người viết xoá trang up ảnh xoá

 

Vấn đề nằm ở chỗ editor đó, phải chỉnh cái file .js sao cho phù hợp và tương thích với cái editor của xenForo là xong. Từ sáng đến giờ nghiên cứu JavaScrips mà vẫn chưa đâu vào đâu cả

Mình nghĩ nó nằm ở hàm này, nó liên quan đến biến var postimage_add_text, tức là chèn chữ vào editor, có mấy dòng code thôi mà mình không rành về JS nên không biêt sao để làm được nữa :

PHP:

function postimage_insert(){var postimage_area=document.getElementsByTagName('textarea');for(var postimage_i=0;postimage_i<postimage_area.length;postimage_i++){if(!postimage_area[postimage_i].name.match(/username_list|search|recipients|backup/i)){if(postimage_isVisible(postimage_area[postimage_i]) || postimage_isEditor(postimage_area[postimage_i])){postimage_div=document.createElement('div');postimage_open=document.createElement('a');postimage_open.innerHTML=postimage_add_text;postimage_open.href="javascript:postimage_upload("+postimage_i+");";postimage_span=document.createElement('span');postimage_span.innerHTML="&#160;&#8226;&#160;";postimage_div.appendChild(document.createElement('br'));postimage_div.appendChild(postimage_span);postimage_div.appendChild(postimage_open);postimage_div.appendChild(document.createElement('br'));postimage_div.appendChild(document.createElement('br'));if(postimage_isCkeditor(postimage_area[postimage_i])){if(postimage_area[postimage_i].parentNode.nextSibling){postimage_area[postimage_i].parentNode.parentNode.insertBefore(postimage_div,postimage_area[postimage_i].parentNode.nextSibling);}else{postimage_area[postimage_i].parentNode.parentNode.appendChild(postimage_div);}}else{postimage_area[postimage_i].parentNode.appendChild(postimage_div);}}}}}

Chờ 1 người giỏi JS vào giúp ^^

Cái postimage.org này rất hay, nó không bị giảm chất lượng hình ảnh như khi upload lên picasa, và không bị xóa cả tài khoản khi có thành viên cố tình upload ảnh nhạy cảm.

 

Hiện tại thì phải dùng biên pháp tình thế tạm thời, là phải cài thêm addons mới được

Có hình ảnh demo phía trên đó bạn ạ, mình mới đang vọc trên localhost thôi ^^

Đã cài thêm addons thì mới được bạn ạ

 

Trang postimage.org nói là lưu trữ ảnh mãi mãi mà, nên không sợ trang up ảnh postimage.org xóa đâu
P/s: XenPorta iforum.vn đâu bác ơi, cổ dài như sợi dây rồi

 

Chỉ xài được khi tạo mới chủ đề, còn sửa chủ đề thì upload ảnh ko dc

 

addon gì vậy bạn

 

em làm theo trường hợp 1 nhưng sao nó không hiện nhỉ?

 

cái code up này giống chiplove