×

Notice

The forum is in read only mode.
Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1

TOPIC: Suggestion (with example) - TITLE on emoticons

Suggestion (with example) - TITLE on emoticons 15 years 5 months ago #4463

  • JonusC
  • JonusC's Avatar Topic Author
  • Offline
  • Platinum Boarder
  • Platinum Boarder
  • Posts: 785
  • Thank you received: 48
Heya there!

Well I went to the effort of making and installing my own emoticon set, but then I noticed that the "name" of the emoticon (what you type to get it) doesn't come up in the tooltip on mouse over.

On (some versions of?) IE, it does this from whatever is in the 'alt' value, but that isn't W3C spec. Firefox and Opera take it from the 'title' value to get a tooltip for an image. Why do I think this is important? Well, user friendliness really I think is the only reason. I know I like to have image tooltips on my sites!

Just incase, here's a little screenshot example of what this change allows:

(Notice the o_O tooltip which is the text required to make that emoticon)

So, I made this small change to the code in comment.class.php located at /public_html/components/com_comment/joscomment/ - maye I suggest to you Daniel to perhaps include an option to turn this on/off in the plugin backend for the next release? I can do it myself if you like, but it's not very hard to code at all and the newest code you have is probably very different to the current public release :lol:

Well if anyone is interested, here's the code changes (in the file /public_html/components/com_comment/joscomment/comment.class.php )


(01) Line 2340, changed from...
$html = str_replace($ubb, "<img src='" . $this->_emoticons_path . '/' . $icon . "' border='0' alt='' />", $html);
...to...
$html = str_replace($ubb, "<img src='" . $this->_emoticons_path . '/' . $icon . "' border='0' alt='' title='$ubb' />", $html);
...which adds the mouseover text to the emoticons in the comments content.

(02) Line 2788, changed from...
$html .= "<img src='$this->_emoticons_path/$icon' border='0' alt='$ubb' />";
...to...
$html .= "<img src='$this->_emoticons_path/$icon' border='0' alt='$ubb' title='$ubb' />";
...which adds the mouseover text to the emoticons in edit/new comment form.

Cheers :)

P.S. Daniel, a question for you - is there a reason why alt text needs to be empty for these emoticons? I was going to put it in there, but there's a comment saying it breaks something... :blink:

Suggestion (with example) - TITLE on emoticons 15 years 5 months ago #4464

  • JonusC
  • JonusC's Avatar Topic Author
  • Offline
  • Platinum Boarder
  • Platinum Boarder
  • Posts: 785
  • Thank you received: 48
Sorry for the double post, but another option in the backend could be handy - "Vertically Center Emoticons". It's especially useful if you're using 24x24 big emoticons (like I am). Adding the following attribute to the same IMG tags mentioned in code lines above will do the trick:
style='vertical-align:-50%;'

...if you would like me to code up these two options for the component backend, let me know Daniel =) Is there a SVN trunk or something for !JoComment 4?

Suggestion (with example) - TITLE on emoticons 15 years 5 months ago #4465

  • Daniel Dimitrov
  • Daniel Dimitrov's Avatar
  • Online
  • Administrator
  • Administrator
  • Posts: 9618
  • Karma: 155
  • Thank you received: 1081
Hey JonusC!
Thank you for the suggestion! I added your changes to the code!
About the last one:
style='vertical-align:-50%;'
I don't really understand what it does. Could you give me an example, or perhaps even sharing your emoticons :)

Thank you for making joomlacomment even better!

P.S. dev.compojoom.com

Suggestion (with example) - TITLE on emoticons 15 years 5 months ago #4466

  • JonusC
  • JonusC's Avatar Topic Author
  • Offline
  • Platinum Boarder
  • Platinum Boarder
  • Posts: 785
  • Thank you received: 48
Thank you for the great extension, Daniel! :cheer:

Well, what the vertical align at -50% does is it shifts the image 1/2 of it's height downwards. Usually, the bottom of an image is aligned with the bottom of the text line.

Here's a screenshot of normal behavior on top, and the one below it is with the style='vertical-align:-50%;' addition on line 2340. I zoomed in a little on the picture.



See how the emoticon is spaced differently on the bottom picture? On the top one, the bottom of the PNG is aligned with the bottom of the text; but on the second picture it's more centered. That's what the vertical-align:-50%; does.

I know, it's a minor thing, but it all helps to have a nice looking website in the end :P

Yeah, I can share the emoticon pack! I spent quite a bit of time on converting it from the original high-res images, removing the shadows and making sure they were clear despite being much smaller than the originals - I had to edit some of them a lot. It's a little bad using such huge smileys - these are 24x24, it puts a large gap between the lines :( but these are such a nice set of icons that making them smaller than 24px makes them impossible to see! Some might hate them, others will love them (I do - they are so cute!) Here it is, there's a readme included:

Yolks_for__JoComment_4.zip

EDIT: Here's a preview of all the included emoticons. A note to anyone else apart from Daniel - Unfortunately, most of them don't have the same names as the inbuilt 'Funny' emoticons (I made the names fresh), so they wont magically change all your existing comments unless you edit the PHP file.



It's based on the "Yolks" series by Badblood, he says it's OK to use his emoticons anywhere you like as long as you credit him... I'll put his name in my 'About the Site' area, he said thats fine. bad-blood.deviantart.com is his page.

Thanks for the link. It's pretty late here in Australia so i'm off to bed for now - i'll take a look tomorrow. FYI, i've been working on creating an entirely new template for the JoComment - mainly to suit the theme of my site, but I'll be sure to share when it's done =)

Suggestion (with example) - TITLE on emoticons 15 years 5 months ago #4468

  • Daniel Dimitrov
  • Daniel Dimitrov's Avatar
  • Online
  • Administrator
  • Administrator
  • Posts: 9618
  • Karma: 155
  • Thank you received: 1081
Man! That are some crazy images! I've added them. I will also add the vertical-align option - I was never thinking on this - it definetely look better!

Thank you for sharing - you are already mentioned in the changelog :)

Suggestion (with example) - TITLE on emoticons 15 years 5 months ago #4476

  • JonusC
  • JonusC's Avatar Topic Author
  • Offline
  • Platinum Boarder
  • Platinum Boarder
  • Posts: 785
  • Thank you received: 48
Haha, yes they are. Especially nice for fans of Anime, they have that style to them :P

Hey thanks a lot for the credit :woohoo: I've been checking out the dev site and wanted to look at the changes since Alpha 3, but I don't know what has been done since. I figure since my site isn't even open yet and wont be for some time, I was going to download the latest revision you have (147 at time of writing) and help out with the testing from there on. I've made some personal changes to the comment.class.php file which has helped in my new template creation, i'll share them here incase you think they're worth changing in the trunk...

These are purely visual/cosmetic changes, mostly minor, so it's no problem at all if you'd rather not change them for personal reasons B) One major thing being, it could make the existing templates not work as nice and look a bit wierd. But hey, it's version 4.0 - We/you should redesign the templates anyway (all based on "modern" which is the only one that actually works well). And yeah, I hope i'm not sounding rude or anything with these suggestions - completely up to you whether you agree, i'm just sharing what i've changed on my site

01) On line 2277...
$website = "<a class='postwebsite' rel='external nofollow' href='$website' title='$website' target='_blank'>&nbsp;</a>";
...the   really isn't needed. It helps for spacing, true, but we should really leave that up to the CSS style for the specific template to just add padding... do you think?

02) On line 2177...
return "<span class='postnotify$notifyactive' title='".( $notifyactive ? ( _JOOMLACOMMENT_NOTIFYTXT1 ) : _JOOMLACOMMENT_NOTIFYTXT0 )."'>&nbsp;</span>";
...same as above. The   forces a space regardless of template, individual template CSS padding would be ideal.

03) Optimize the avatar placement in comments. Line 2271 was...
$html 	= str_replace('{avatar_picture}', $this->profileLink("<img class='avatar' src='$path' alt='avatar' />", $this->_user_id), $html);
...and I changed to...
$html 	= str_replace('{avatar_picture}', $this->profileLink("<img class='avatar' src='$path' alt='avatar' height='64px' style='float:left; padding:3px 10px 3px 3px;'/>", $this->_user_id), $html);
a) height='64px' was because my avatar thumbnail in CB settings is much bigger and it looked bad, this is purely a personal choice. Yeah, it does keep the aspect of the image too (doesn't "squash" it). Perhaps a new option in component backend to override avatar size would be nice? I could code that up and post the changes required if you like =)
b) style='float:left; padding:3px 10px 3px 3px;' ok, that's the important one. With the float:left, it allows the text to "wrap around" the image. Padding is self explainatory. Here's a screnshot of this new behavior:

Nice hey! BUT, here's the catch. Because it's floating, the template won't care about making the comment box fit around it, and the image placement goes all whacky. So I had to modify the 'modern' template's CSS like so - under...
#Comments ul li.post div.postcontent {
...I had to add...
min-height:70px;
...70px HARDCODED because I don't know how to make the CSS check our defined avatar size of 64px :laugh: an inline style I think would be the way, encoded on the fly. Of course, that's only if you want to put in this "Avatar Size" option I mentioned before! Oh - and yeah that is 70px because the avatar was set to 64px height with 3px padding on top and bottom (64+3+3=70).


*Phew*, I have a habit of making big posts. Sorry! Anyway, are there any significant changes in the latest revision? If you want some feature additions, i'd like to try it out and help with the bug fixing :) As I said, my site isn't even open/public yet and I will have a LOT of testing infront of me (i've made hacks to CB itself :laugh: ) But I just don't know how to install from trunk. Download entire com_comment/ folder and upload via FTP? Or is there more to it?

Cheers :)

EDIT: OK, I see the comment for Rev. 94 is "release4", is this the same alpha 3 that i'm using right now? Well i'm going to read up on all the changes since then :)

Suggestion (with example) - TITLE on emoticons 15 years 5 months ago #4503

  • Daniel Dimitrov
  • Daniel Dimitrov's Avatar
  • Online
  • Administrator
  • Administrator
  • Posts: 9618
  • Karma: 155
  • Thank you received: 1081
use svn.compojoom.com/jocomment/ to checkout the svn. (with tortoiseSVN, or another program)

I don't know what I was thinking with release4. But looking at the date I think that that is actually alpha3

I should also update the database coming with the trunk, since now the advertisement is placed in a separate table.

I'm not a big fan of making more and more options in the backend right now. I find the design of the backend a little bit bloated and want to change everything with 4.1, but it all requires time.

P.S. Don't be afraid to make suggestions! Constructive critics is always welcome :)

Suggestion (with example) - TITLE on emoticons 15 years 5 months ago #4519

  • JonusC
  • JonusC's Avatar Topic Author
  • Offline
  • Platinum Boarder
  • Platinum Boarder
  • Posts: 785
  • Thank you received: 48
OK thanks, using a program to check and download the SVN is a good idea.

I know what you mean about the backend, there's a lot of clutter. UI layout is one of the hardest parts of programming in my opinion :S i'm sure you'll get there!

Well i'll migrate over to the newest build within the day; from now on my questions will be in regards to latest builds you've put in the trunk.

After I saw some of your latest changes (from the 'Comments Total' thread I started) this might not be the case anymore - but I might be asking about making the plugin a little more 'template centered'. By that I mean, in the template I am creating (nearly there) I had to make a lot of changes in the comment.class.php. But i'll ask one at a time, and only if it's really worth saying :P

Thanks again Daniel

Suggestion (with example) - TITLE on emoticons 15 years 5 months ago #4569

  • JonusC
  • JonusC's Avatar Topic Author
  • Offline
  • Platinum Boarder
  • Platinum Boarder
  • Posts: 785
  • Thank you received: 48
OK, I managed to grab the SVN from the Repo, and got to work on making a BAT script to "build" my local SVN checkout to an installable structure for myself. I think there are some errors in your install script though, I guess it's just because you havn't updated the install script yet is all so don't worry :P Anyway I got file missing errors in comment.xml - perhaps the directory structure on the trunk site would need to be fixed up. Either that, or I need to learn how to check-out and build properly :laugh: Here's the specifics...

1) The folder components/com_comment/assets/advertisement/ isn't in the comment.xml, it appears you renamed it to components/com_comment/assets/joomvertising/ in the code but the folder name isn't updated? Renaming my local repo fixed missing file - standard_banner.txt on ZIP install anyway. Furthermore, in that same folder there is a head.txt - this file doesn't appear in the comment.xml folder. Old file? EDIT: The assets/advertisement/ folder isn't even in the trunk, was this intentional? I had to grab it from \tags\release4\alpha3\components\com_comment\assets\advertisement and rename it to joomvertising

2) classes/akismet/Akismet.class.php should be at assets/classes/akismet/Akismet.class.php it appears...

3) comment.xml references joscomment/language/chinese_simplified.php but the filename is actually simplified_chinese.php - which one is correct? I just renamed the file on my local machine so it would install, but should comment.xml be edited instead..?

4) A few files don't exist in the latest trunk (persian language for example) so I had to use branches\joomlacomment4.1\ as a base, then update with latest trunk build - intentional?

...I hope those two things I pointed out made sense :silly: Making those changes allowed me to ZIP it up and it installed fresh OK :)


EDIT: OK, after reading back over my points - all those things are way too complicated for me to even understand :lol: if you understand NT BAT files, perhaps my "build script" will explain better -
@echo off
echo This will remove SVN_Built and SVN_Built_Installable folders
echo if they exist!
pause
 
::Delete old build
IF EXIST SVN_Built RD /S /Q SVN_Built
IF EXIST SVN_Built_Installable RD /S /Q SVN_Built_Installable
 
::Prepair folders for FTP-uploadable version [update]
MKDIR SVN_Built\administrator\components\com_comment
MKDIR SVN_Built\components\com_comment
 
::Grab 4.1 branch files as base [trunk copy doesn't have all required files]
XCOPY SVN\branches\joomlacomment4.1\administrator\components\com_comment\*.* SVN_Built\administrator\components\com_comment\ /E /Y
XCOPY SVN\branches\joomlacomment4.1\components\com_comment\*.* SVN_Built\components\com_comment\ /E /Y
 
::Copy newest SVN build to build folder
XCOPY SVN\trunk\administrator\components\com_comment\*.* SVN_Built\administrator\components\com_comment\ /E /Y
XCOPY SVN\trunk\components\com_comment\*.* SVN_Built\components\com_comment\ /E /Y
 
    ::Fixup broken file/folder names so ZIP install works [relecting comment.xml]
    MKDIR SVN_Built\components\com_comment\assets\classes\akismet
    COPY SVN_Built\components\com_comment\classes\akismet\Akismet.class.php SVN_Built\components\com_comment\assets\classes\akismet\
    RD /S /Q SVN_Built\components\com_comment\classes
    DEL SVN_Built\components\com_comment\joscomment\language\simplified_chinese.php
        ::chinese_simplified.php already existed from 4.1 branch
    DEL SVN_Built\components\com_comment\joscomment\language\traditional_chinese.php
        ::chinese_traditional.php already existed from 4.1 branch
    REN SVN_Built\components\com_comment\assets\advertisement joomvertising
 
::Grab special files from other locations
COPY SVN\trunk\plugins\system\josccleancache.php SVN_Built\administrator\components\com_comment\plugin\
COPY SVN\trunk\plugins\system\josccleancache.xml SVN_Built\administrator\components\com_comment\plugin\
COPY SVN\trunk\plugins\content\joscomment.php SVN_Built\administrator\components\com_comment\plugin\
COPY SVN\trunk\plugins\content\joscomment.xml SVN_Built\administrator\components\com_comment\plugin\
 
::Create ZIP-able folder [fresh install]
MKDIR SVN_Built_Installable
XCOPY SVN_Built\administrator\components\com_comment\*.* SVN_Built_Installable\ /E /Y
XCOPY SVN_Built\components\com_comment\*.* SVN_Built_Installable\ /E /Y
echo.
echo Done.
pause

Wow... sorry about the massive post :blink: I bet you already know about all these things too :laugh:

LAST EDIT (I promise!): OK, I can see it's just a matter of the install script not being updated. This is fair enough because you havn't released it yet anyway :P I got it sorted alright :)

Suggestion (with example) - TITLE on emoticons 15 years 5 months ago #4583

  • Daniel Dimitrov
  • Daniel Dimitrov's Avatar
  • Online
  • Administrator
  • Administrator
  • Posts: 9618
  • Karma: 155
  • Thank you received: 1081
well, a lot of files have changed positions.
The advertising section is now stored in a separate table in the database, that is why all traces of it have disappeared.

Also it is now called joomvertising see joomvertising.com :)

How does the svn works?
You must check out the trunk. Then install the database and then make the necessary changes to configuration-dummy.php and rename it in configuration.php - then you will have a working joomla installation with joomlacomment.
If we install an extension, then we commit this extension to the trunk, if we update joomla, then we commit to the trunk and this way we always have an updated development environment.

I start to prepare the installation package when all changes to joomlacomment are done.

Suggestion (with example) - TITLE on emoticons 15 years 5 months ago #4584

  • JonusC
  • JonusC's Avatar Topic Author
  • Offline
  • Platinum Boarder
  • Platinum Boarder
  • Posts: 785
  • Thank you received: 48
Aha, that makes sense - you can test the trunk directly on a live install that way, of course! Very clever :P

Well I got it installed OK. I'm building a template now, the new avatar DIV layer changes and such doesn't really work as expected =\ when the text is more than 1 line, it'll throw it below the avatar... so I think i'm just going to make this template in a simple two column, single row table ;)

If you like this design, I would be happy to have you include it in the 4.0 Beta if you like the design.

I will definately check out the Ad network soon! Well I should stop from bumping this thread, i'll start a new one when something comes up :)
  • Page:
  • 1
Time to create page: 0.186 seconds