chat image uploader...

User avatar
spaceace
Site Owner
Posts: 919
Joined: Wed Dec 16, 2009 8:30 pm
Location: Ontario, Canada
Flag: Canada

chat image uploader...

Post by spaceace » Sun Sep 04, 2016 12:30 pm

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 ;)
You do not have the required permissions to view the files attached to this post.

if you like my work and would like to contribute to my development of styles, please donate by using the donate button in the header.

Image

Image

User avatar
spaceace
Site Owner
Posts: 919
Joined: Wed Dec 16, 2009 8:30 pm
Location: Ontario, Canada
Flag: Canada

Re: chat image uploader...

Post by spaceace » Tue Sep 06, 2016 5:47 am

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

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 ;)
You do not have the required permissions to view the files attached to this post.
if you like my work and would like to contribute to my development of styles, please donate by using the donate button in the header.

Image

Image

User avatar
spaceace
Site Owner
Posts: 919
Joined: Wed Dec 16, 2009 8:30 pm
Location: Ontario, Canada
Flag: Canada

Re: chat image uploader...

Post by spaceace » Wed Jan 18, 2017 10:41 am

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 :roll:
if you like my work and would like to contribute to my development of styles, please donate by using the donate button in the header.

Image

Image

Who is online

Users browsing this forum: CommonCrawl [Bot] and 0 guests