| Author | Message | ||
Location: --- Occupation: Age: 100 posts |
 17-03-2008 23:26 GMT #122145 |
||
|
here is a demo:
http://www.jodev.com/demo/SmartResizer.htm // this demo was tested on seditio 121 and 122 beta and works perfectly ********************************** its a long story but it worth it. first of all here is the required files: Download acording to your wishes of finding a way to implement the regular image style for the admin only at the news or any other category i was able to modify the textboxer to provide this option. the idea in genereal is to enforce one style for users in the forums while providing two options for the admin: 1.resized. 2.non-resized. so i hope you can follow these steps: first we will modify the main language file: 1- open : system/lang/en/main.lang find Code: $L['bbcodes_ex_image'] = "Insert an image"; replace with: Code: $L['bbcodes_ex_image'] = "Insert an image-resized"; $L['bbcodes_ex_aimage'] = "Insert an image-normal sized"; note that we add a new tag here called aimage (Admin Image). close and save. 2.open: system/function.php find: Code: $bbcodes = array( '\\[img=([^\\\'\;\?[]*)\.(jpg|jpeg|gif|png)\\]([^\\[]*)\.(jpg|jpeg|gif|png)\\[/img\\]' => '<a href="\\1.\\2"><img src="\\3.\\4" alt="" /></a>', replace with: Code: $bbcodes = array( '\\[img\\]([^\\\'\;\?([]*)\.(jpg|jpeg|gif|png)\\[/img\\]' => '<p class="thumbContainer"><img onclick="new Moognify(this);" src="\\1.\\2" alt="click image to close" /><br />click image for smart resizer or-<a href="\\1.\\2" target="_blank" >Click Here for full size</a></p>', '\\[aimg=([^\\\'\;\?[]*)\.(jpg|jpeg|gif|png)\\]([^\\[]*)\.(jpg|jpeg|gif|png)\\[/aimg\\]' => '<a href="\\1.\\2"><img src="\\3.\\4" alt="" /></a>', here you can find that we modified the image tag { I M G } and defined the new {image} tag ((stands for Admin Image}} and it is completly unstyled except if you choose to do that by CSS file. save and close file. 3.open: plugin/textboxer2/inc/textboxer2.inc find: Code: 5, 'image', add after: Code: //'aimage', important: do not forget the two slashes.. this means that this tag is invisible by default. find: Code: $res['image'] = array('[img]', '[/img]', 15); add after: Code: $res['aimage'] = array('[aimg]', '[/aimg]', 57); note: the number 57 is set in my textboxer coz i had already added many other bbcodes so the regular number would be 50. save and close....... stay in the inc folder: open textboxer2.lang find: Code: $tbL['tb2_img'] = "Enter the URL of your image"; modefy it and add new term {image} Code: $tbL['tb2_img'] = "Enter the URL of your image-resized"; $tbL['tb2_aimg'] = "Enter the URL of your image"; now we are going to define how this new tag will appear and where exactly it will appear! we need it to appear in the creation of the pages and editing them while keep it invisible in the forums. ok here we start: 4. stay in the textboxer plugin and go to: plugin/textboxer2/tb2.page.add find: Code: 5, 'image', after add: Code: 'aimage', note: without slashes coz we need it visible for the admin. save and close. 5.stay in the textboxer plug. open : plugin/textboxer2/tb2.page.edit find: Code: 5, 'image', after add: Code: 'aimage', save and close ------------------------------------------------------------- ok, now we prepared the textboxer to accept the new tag {aimg} and the function recognize this term correctly what we need now is to modify the skins files and adding the java scripts. however if you are interesting in finding an icon for the new image tag here is one:  if you are using a standard textboxer you can add this bbcode theme to your textboxer including the aimg icon:  you can do this by going to plugin/textboxer2/themes and replace the bbcodes image with the new one. ----------------------------- now to the script of Smart Resizer: 6. make new folder in your skin file and name it scripts. * should be like: skins/ice/scripts copy files (Moognify.js, mootools.js) to the scripts folder 7.open skins/yourskinName/header.tpl add these scripts to the top (down to title tags): Code: <script type="text/javascript" src="skins/{PHP.skin}/scripts/mootools.js"></script> <script type="text/javascript" src="skins/{PHP.skin}/scripts/Moognify.js"></script> save and close. 4. finally open your css (usually ice.css) file and add these tags (copy and paste): Code: /* ============== Smart Image Resizer ============== */ .thumbContainer { background-color: #3e3e3e; padding: 5px; margin-bottom: 20px; font-size: 11px; text-align: center; color: #aaaaaa; max-width: 200px;// set the size of your desired thumbnail here } .thumbContainer a { color: #ffffff; text-decoration: none; } .thumbContainer img { margin-bottom: 3px; cursor: pointer; max-width: 200px; } * html .thumbContainer { border: 0; width: expression(((this.width>200)?this.width=200:null)?"normal":"normal");// make sure to mach max-width above } .moognifyBorder { font-family: Tahoma, lucida grande, lucida sans, lucida sans unicode, arial, sans serif; background-color: #000000;// set up your background color here color: #ffffff;//set up your text color here font-size: 11px; text-align: center; margin-bottom: 10px; } now save and close all files. ************known bugs********** this script will affect every image on your site uses [ i m g ] tags (forums) regardless its size. so wether your image size exceeded the max-width or less than the max-width it will always be contained in the styled contaier and clickable. however, using the tags [aimg][/aimg] is also functionable in forums but hidden. so how the hell your users will know about  ****************************** notes: 1.this script is smart enugh to inforce image to be centered on the screen it also calculates the appropriate width and height which should be used according to user screen. 2. this script uses Mootools scripts so you are not allowed to modify any of these scripts without a permission. 3. i managed to provide two options, either to use the smart resizer script or to view the original image size. both options are lcated down the thumbnail. 4. this script was tested and passed almost every browser including Mozilla, FF, IE6,7 Opera etc... 5. this script uses the resizeimage script submitted earlier(main subject can be found here): http://neocrome.net/forums.php?m=posts&q=23097 6. all rights reserved for their owners including me .here some snapshots:: in pages-news-articles/ the aimg [Admin Image] appears  in forums only (resized images)/aimg does not appear  enjoy it. adoola. This post was edited by adoola (22-03-2008 17:47 GMT, 893 days ago) |
|||
http://www.lombergar.com Location: Slovenia Ljubljana, Slovenia, EU Occupation: Artist Age: 27 1009 posts |
17-03-2008 23:46 GMT #122146 |
||
|
Very cool stuff, thank you.
|
|||
Location: --- Occupation: Age: 100 posts |
18-03-2008 00:05 GMT #122148 |
||
|
19-03-2008 19:09 GMT #122175 |
||
|
love this hack.. one question!
is there any way to disable this for the main page where we are showing news? i want it just to resize the images in forums.. i guess a workaround would be something like this: 1. create a new bb code called imgn( image news) and make it available only to admins. This will be the regular, not resize img tag, so it will show normal images.. this is great cause showing a bunch of thumbnails on front page doesn`t look really nice. 2. edit the bbcode img like described in first step of this "hack tutorial". Make this available to everyone, so it will be great because people are only using this bbcode in forums. can this be done? thx |
|||
Location: --- Occupation: Age: 100 posts |
19-03-2008 19:44 GMT #122180 |
||
Quote well yes it is simple i can modify this hack ti provide two bbcodes one for the admin uses normal image without any resizing at all and can be used in news or wherever in the site the other is this hack as it is but time is the only limitation now
|
|||
|
19-03-2008 20:06 GMT #122184 |
||
|
time is limitation everywhere.. just take as much as you need to code a perfect script.. i`m the one who`s gonna use it definitely!
|
|||
Location: --- Occupation: Age: 100 posts |
19-03-2008 20:39 GMT #122190 |
||
|
i may finish it today
and publish it again tommorow thanx for the suggestion This post was edited by adoola (19-03-2008 21:06 GMT, 896 days ago) |
|||
Location: Netherlands Occupation: Age: 102 posts |
22-03-2008 01:13 GMT #122267 |
||
Quote I really am interested in this image resizer and was wondering if you have the final version done already? As for images you want to be clickable (url redirect or however you call that) I was thinking of creating a new function for those (like [IMGC]. Just the same as [IMG] but only not using these script and so you can still use clickable pics. That should work ritght? |
|||
Location: --- Occupation: Age: 100 posts |
22-03-2008 02:26 GMT #122268 |
||
|
ok my friends
the new script with a new tag is ready to be used resized in forums resized and unresized in pages thanx for the suggestions |
|||
|
22-03-2008 11:52 GMT #122272 |
||
|
thank you adoola! now we`re talking about a serious image resizer script!
|
|||
Location: --- Occupation: Age: 100 posts |
22-03-2008 19:27 GMT #122289 |
||
|
most welcome guys
good luck |
|||
|
11-11-2008 10:52 GMT #127555 |
||
|
Link Not Found !
|
|||
|
11-12-2008 13:40 GMT #128128 |
||
|
Hey,
Can anyone post the javascript files again?
|
|||
|
11-12-2008 22:11 GMT #128132 |
||
|
i have these files, ill upload them 2morow
|
|||
|
12-12-2008 17:05 GMT #128135 |
||
|
Okay thanks!
|
|||
|
12-12-2008 19:54 GMT #128137 |
||
|
12-12-2008 21:05 GMT #128139 |
||
|
Yeah thanx dude!
Do you have a way to get them out of the signature's? |
|||
|
12-12-2008 22:11 GMT #128140 |
||
|
im not good @ php etc but i think this "plugin" work @ whole site, i'd just add smth like: [img2] cuz this resizer is for [img] tag.
This post was edited by xhx (12-12-2008 22:39 GMT, 628 days ago) |
|||
|
12-12-2008 22:38 GMT #128142 |
||
|
Thanx anyways
|
|||
Location: United States Occupation: Age: 230 posts |
17-12-2008 19:33 GMT #128234 |
||
|
i have a problem with it.. once i install it img get resized like it supposed to, however i can only open img in new window the magnify portion of the script does not. plus in IE it shows me some java errors "object does not support this property or method"
|
