chat image uploader...

[spaceace]

if anyone wants to have the image uploader that i have in chat, do the following...

edit the file phUploader.php and change the following lines to match your site...

Code: Select all

//The name of your website
$websitename="";      

// Full browser accessable URL to where files are accessed. With trailing slash.
$full_url="";

// Path to store files on your server If this fails use $fullpath below. With trailing slash.
$folder="";

an example would be exactly what i use for here as follows...

Code: Select all

//The name of your website
$websitename="Live Members Only chat image uploader";      

// Full browser accessable URL to where files are accessed. With trailing slash.
$full_url="http://www.livemembersonly.com/images/imageuploads/";

// Path to store files on your server If this fails use $fullpath below. With trailing slash.
$folder="./images/imageuploads/";

the css will need to be modified if you want things to look different for your site...

Code: Select all

<style type="text/css">
	body{
		background: #000000;
		font-family: Verdana, Arial, sans-serif;
		font-size: 12pt;
		text-align:center;
		color: #CCCCCC;
	}

	.message {
		font-family: Verdana, Arial, sans-serif;
		font-size: 11pt;
		color: #000000;
		background-color:#669999;
	}

	a:link, a:visited {
		text-decoration:none;
		color: #F40000;
	}

	a:hover {
		text-decoration:none;
		color: #ffffff;
	}

	.table {
		border-collapse:collapse;
		border:1px solid #000000;
		width:450px;
	}

	.table_header {
		border:1px solid #000000;
		background: #434343;
		font-family: Verdana, Arial, sans-serif;
		font-size: 11pt;
		font-weight:bold;
		color: #ffffff;
		text-align:center;
		padding:2px;
	}

	.upload_info {
		border:1px solid #000000;
		background: #CCCCCC;
		font-family: Verdana, Arial, sans-serif;
		font-size: 8pt;
		color: #000000;
		padding:4px;
	}

	.table_body {
		border:1px solid #000000;
		background: #CCCCCC;
		font-family: Verdana, Arial, sans-serif;
		font-size: 10pt;
		color: #000000;
		padding:2px;
	}

	.table_footer {
		border:1px solid #000000;
		background: #434343;
		text-align:center;
		padding:2px;
	}

	input,select,textarea {
		font-family: Verdana, Arial, sans-serif;
		font-size: 10pt;
		color: #000000;
		background: #ffffff;
		border:1px solid #000000;
	}

	.copyright {
		border:0px;
		font-family: Verdana, Arial, sans-serif;
		font-size: 9pt;
		color: #CCCCCC;
		text-align:right;
	}

	.copyright > a{
		text-decoration:none;
		color:#CCCCCC;
	}

	form {
		padding:0px;
		margin:0px;
	}
</style>

after you have made the proper changes for your site, upload that file to your forum root.

next, you have to create the proper bbcode to work with it as it does here...

HS bbcode...

BBCode usage

Code: Select all

[hsimg]{URL}[/hsimg]

HTML replacement

Code: Select all

<div class="highslide-gallery">
<a href="{URL}" class="highslide" onclick="return hs.expand(this, { wrapperClassName: 'controls-in-heading', slideshowGroup: 'highslide' })"><img src="{URL}" alt="1" title="Click to enlarge" style="max-width:50px; max-height:30px;" /></a><div class="highslide-heading"></div>
</div>

Help line

Code: Select all

Highslide Img: [hsimg]link to image[/hsimg]

check Display on posting page and then submit.

youtubeHS bbcode...

BBCode usage

Code: Select all

[youtubehs]{IDENTIFIER}[/youtubehs]

HTML replacement

Code: Select all

<a href="http://www.youtube.com/embed/{IDENTIFIER}?rel=0&wmode=transparent" onclick="return hs.htmlExpand(this, {align: 'center', objectType: 'iframe', width: 480, height: 385, allowSizeReduction: false, wrapperClassName: 'draggable-header no-footer', preserveContent: false, objectLoadTime: 'after'})" class="highslide"><img style="width: 50px; height: 25px; border:1px solid black;" alt="YouTube Video" src="http://i.ytimg.com/vi/{IDENTIFIER}/default.jpg" /></a>

Help line

Code: Select all

YouTube Highslide: [youtubehs]YouTube Video ID[/youtubehs]

check Display on posting page and then submit.

next, add highslide to the chat extension as follows...

unzip highslide.zip and copy that folder to ext/spaceace/ajaxchat/

next is to add the button to chat...

open, ext/spaceace/ajaxchat/styles/your style/template/chat_body_input_full.html
find

Code: Select all

<input type="button" class="button" onclick="popup('{FILENAME}/archive', 1000, 565); return false;" value="{{ lang('CHAT_ARCHIVE') }}" title="{{ lang('CHAT_ARCHIVE_EXPLAIN') }}" />

add before

Code: Select all

<input type="button" class="button" onclick="popup('./phUploader.php', 550, 400); return false;" value="Image" title="Upload your images directly to this chat">

save and upload changes and purge the board cache.

this should work as posted but if it doesn't, please let me know and i will do what i can to help

[spaceace]

i completely forgot that the highslide js and css need to be loaded in order for it to work

unzip and add the following file to ext/spaceace/styles/all/template/event/

overall_footer_after.zip

purge the board cache and it should work

[spaceace]

update for this to work on phpBB 3.2.0...

the bbcodes have to be changed. very small change but they won't work unless they are updated to the following...

hsimg bbcode
BBCode usage

Code: Select all

[hsimg]{URL}[/hsimg]

HTML replacement

Code: Select all

<div class="highslide-gallery">
<a href="{URL}" class="highslide" onclick="return hs.expand(this, {{ wrapperClassName: 'controls-in-heading', slideshowGroup: 'highslide' }})"><img src="{URL}" alt="1" title="Click to enlarge" style="max-width:50px; max-height:30px;" /></a><div class="highslide-heading"></div>
</div>

Help line

Code: Select all

Highslide Img: [hsimg]link to image[/hsimg]

check "Display on posting page"

youtubehs
BBCode usage

Code: Select all

[youtubehs]{IDENTIFIER}[/youtubehs]

HTML replacement

Code: Select all

<a href="https://www.youtube.com/embed/{IDENTIFIER}?rel=0&wmode=transparent" onclick="return hs.htmlExpand(this, {{align: 'center', objectType: 'iframe', width: 480, height: 385, allowSizeReduction: false, wrapperClassName: 'draggable-header no-footer', preserveContent: false, objectLoadTime: 'after'}})" class="highslide"><img style="width: 50px; border:1px solid white;" alt="YouTube Video" src="https://i.ytimg.com/vi/{IDENTIFIER}/default.jpg" /></a>

Help line

Code: Select all

YouTube Highslide: [youtubehs]YouTube Video ID[/youtubehs]

check "Display on posting page"

at first glance they don't really look any different. it's the double {{ and }} that had to be added as the new bbcode parser removes the single curly braces from the onclick function