PDA

View Full Version : BB Code Enhancements - BBCode: Resize Image with Text Wrap


midnz
08-17-2010, 10:00 PM
Resize Image with Text Wrap BBCode

I created this BB Code for my own forum and thought I'd share it with the community.
This BB Code allows images to be posted at 200px Wide with text wrapping. Double-clicking the image enlarges it to 600px Wide. Single-clicking reduces the image size back to 200px Wide. The size/resize dimensions can easily be altered to suit your individual requirements. Just change the width= dimensions in the code below.

Demo Here (http://www.vcclan.org/forums/showthread.php?14157-Test-Demo)

Instructions:
Open the BBCode Manager/Add New BBCode

Title: Resize Image

BB Code Tag Name: RI

Replacement: <img src="{param}" width="200" ondblclick='this.src="{param}";this.width=600' onclick='this.src="{param}";this.width=200' align="left" hspace="10">

Example: image web address goes here

Description: Post image at 200px Wide with text wrap. Double-click to enlarge to 600px Wide. Single-click to reduce back to 200px Wide.

Use {option}: No
Button Image (Optional): images/editor/ri.png (upload the attached image via FTP to /images/editor folder) Kindly supplied by VonDoom (https://vborg.vbsupport.ru/member.php?u=297360) Post#6
Remove Tag If Empty: Yes
Disable BB Code Within This BB Code: Yes
Disable Smilies Within This BB Code: Yes
Disable Word Wrapping Within This BB Code: Yes
Disable Automatic Link Parsing Within This BB Code: Yes


Please mark as installed if you use this :)

__________________________________________________ ______________


V. 1.01
Removed height attributes to maintain image proportions (Thanks to djbaxter (https://vborg.vbsupport.ru/member.php?u=158014) :))

Dr.osamA
08-18-2010, 12:21 PM
The following BB Code replacement may not be properly formed. All HTML attributes should be enclosed within double quotes.

* <img src="{param}" width="200" height="150" ondblclick="this.src='{param}';this.height=450;this.width=600" onclick="this.src='{param}';this.height=150;this.width=200" align="left" hspace="10"><!{param}>

installed but ithing i do something rwong

any help plzzz

thanxxxx

djbaxter
08-18-2010, 01:49 PM
I get that same error message for several custom BBCode entries. All of those BBCodes work fine. It's the error message itself that is in error.

Juggernaut
08-18-2010, 03:32 PM
I got same error message with some bbcodes, they work fine however. I use vBulletin 4.0.6

midnz
08-18-2010, 06:35 PM
I got same error message with some bbcodes, they work fine however. I use vBulletin 4.0.6

Thanks for that guys :).

VonDoom
08-18-2010, 08:26 PM
This is going to be my most frequently used BB code. This really give a nice clean and pro feel. Installed and rated. Thanks a ton for this.. My staff is already running around editing our news forums. ;)

I also quick jammed out a button for this, just add it to your Images/Editor folder via FTP and add the Img url to the Button Image (Optional) location when creating your new custom BB code.

midnz
08-18-2010, 08:36 PM
This is going to be my most frequently used BB code. This really give a nice clean and pro feel. Installed and rated. Thanks a ton for this.. My staff is already running around editing our news forums. ;)

I also quick jammed out a button for this, just add it to your Images/Editor folder via FTP and add the Img url to the Button Image (Optional) location when creating your new custom BB code.

Awesome! I'm glad you like it :). Is it okay for me to add your button image to my release post above?

VonDoom
08-18-2010, 09:04 PM
Is it okay for me to add your button image my release post above? Sure thing! :)

I wanted to also add it works perfectly on the Blogs and CMS to. Actually is a great CMS product enhancement.. haha i just cant stop editing every other article on my home page now. I have nominated this little bad ass mambo jambo ;)

midnz
08-18-2010, 10:00 PM
Sure thing! :)

I wanted to also add it works perfectly on the Blogs and CMS to. Actually is a great CMS product enhancement.. haha i just cant stop editing every other article on my home page now. I have nominated this little bad ass mambo jambo ;)

Thank-you very much for the button. I've added it to the first post in this thread and am also using it on my own forum now. Cheers for the great feedback and the nomination. I'm glad I released it now. I almost didn't :eek:.

Hippy
08-18-2010, 11:04 PM
Nice mod there midnz
thanks for your efforts
Seemed interesting so I test it out..

seems if you add the image to a post with a couple lines. ..
it over laps down wards into the sig area..
Not sure if any one noticed it yet
I sure will use it if this could be fixed ..

midnz
08-19-2010, 01:24 AM
Nice mod there midnz
thanks for your efforts
Seemed interesting so I test it out..

seems if you add the image to a post with a couple lines. ..
it over laps down wards into the sig area..
Not sure if any one noticed it yet
I sure will use it if this could be fixed ..

Thanks for noticing that issue. I'll have a look at fixing the problem tonight when I get back from my travels.

EDIT: I've spent a few hours trying different remedies with limited results so far. It seems that images and tables with align=left or align=right don't appear to work in posts any more without interfering with signatures whereas using align=center, align=top & align=bottom do work without interfering with signatures. I'll have to ask over at vB.com to look further in to the problem. Problem solved.

midnz
08-19-2010, 11:57 PM
Nice mod there midnz
thanks for your efforts
Seemed interesting so I test it out..

seems if you add the image to a post with a couple lines. ..
it over laps down wards into the sig area..
Not sure if any one noticed it yet
I sure will use it if this could be fixed ..

If you view the demo link posted in the first post of this thread you'll see that the second post of my demo thread shows that this BBCode works with minimal text added and without interfering with the posted signature.

The problem of signature interference appears to arise when you use image or table align="left or right" after editing your postbit.css with the instructions placed in this mod (https://vborg.vbsupport.ru/showthread.php?t=230859).

I've replaced

Admin CP -> Style & Templates -> Style Manager -> CSS Templates -> Postbit.css

.postbitlegacy .after_content {
clear:right !important;
}
with
.postbitlegacy .after_content {
position: relative;
width: 100%;
clear:both;
}

...and your reported signature interference error has vanished.

BirdOPrey5
08-20-2010, 02:57 PM
FYI, the warning message isn't 'bogus' at least not in this case... for various security reasons it's better to always enclose the {param} tags in double quotes rather then single quotes... while I highly doubt anyone will have a problem the following codes will not display the error and is technically a bit safer. (I swapped the single and double quotes):

<img src="{param}" width="200" height="150" ondblclick='this.src="{param}";this.height=450;this.width=600' onclick='this.src="{param}";this.height=150;this.width=200' align="left" hspace="10">

Also I'm not sure what the purpose of "<!{param}>" is- I don't know what it does and it seems to work fine for me without it. :confused:

djbaxter
08-20-2010, 03:37 PM
I meant to come back and comment on this, too. In fact, the errors I was receiving with a couple of other BBCodes were valid errors - some I could fix and some I couldn't.

As Bird of Prey says, don't ignore such errors - they do mean something and may create a vulnerability if ignored.

midnz
08-20-2010, 07:18 PM
FYI, the warning message isn't 'bogus' at least not in this case... for various security reasons it's better to always enclose the {param} tags in double quotes rather then single quotes... while I highly doubt anyone will have a problem the following codes will not display the error and is technically a bit safer. (I swapped the single and double quotes):

Also I'm not sure what the purpose of "<!{param}>" is- I don't know what it does and it seems to work fine for me without it. :confused:

Thanks very much for the advice and assistance. I've edited in the double quotes where they should have been. The "<!{param}>" was unnecessary and should've been removed after I'd finished testing. That's done now, cheers :).

I meant to come back and comment on this, too. In fact, the errors I was receiving with a couple of other BBCodes were valid errors - some I could fix and some I couldn't.

As Bird of Prey says, don't ignore such errors - they do mean something and may create a vulnerability if ignored.
Thanks for that advice. All fixed :).

djbaxter
08-20-2010, 07:41 PM
Another issue: You've defined fixed values for height and width, both for the "thumbnail" and for the "enlarged" images.

If the image doesn't conform to the proportions of those sizes, you end up with a distorted image - in fact, both the thumbnail and the enlarged images are distorted in the test example - see attachment.

Also, this is still forcing the signature to wrap around the image along with the text, which isn't ideal.

midnz
08-20-2010, 09:43 PM
Another issue: You've defined fixed values for height and width, both for the "thumbnail" and for the "enlarged" images.

If the image doesn't conform to the proportions of those sizes, you end up with a distorted image - in fact, both the thumbnail and the enlarged images are distorted in the test example - see attachment.


As explained in my first post here "The size/resize dimensions can easily be altered to suit your individual requirements. Just change the width= and height= dimensions in the code below."
I've used this BBCode to display large local images of fixed proportions. Ideally there might be {option}s included for proportions however that is beyond the abilities of this learner driver I'm sorry. I'd be happy for anyone with the skills to improve the dimension constraints.

Also, this is still forcing the signature to wrap around the image along with the text, which isn't ideal.

If you've made edits to your postbit.css as explained in this thread (https://vborg.vbsupport.ru/showthread.php?t=230859) then you will have signature interference with image or table align="left or right". It's covered in post#12 above. If you check out my demo (http://www.vcclan.org/forums/showthread.php?14157-Test-Demo) (second post in that thread) you'll see that this BBCode doesn't force the signature to wrap around the image and text unless you've made those postbit.css edits.
Also, the Preview Post will show the signature wrapping around the image and text, however when posted, it should display properly.

BirdOPrey5
08-20-2010, 10:29 PM
I don't know if it would work in this case but did you ever try using max-height and max-width tags instead? This isn't exactly my specialty but I know they exist.

You could add an {option} but either the small or large image would still be out of proportion, you can't have two options.

midnz
08-20-2010, 10:35 PM
I don't know if it would work in this case but did you ever try using max-height and max-width tags instead? This isn't exactly my specialty but I know they exist.
I was hopeful that using percentages might work but that was a failed test. I'll do some research/testing to see if/how your suggestion might work. Thanks for that :).

You could add an {option} but either the small or large image would still be out of proportion, you can't have two options.
Awesome! You've saved me a few hours of researching that idea :). Cheers :)

djbaxter
08-20-2010, 11:11 PM
If you've made edits to your postbit.css as explained in this thread (https://vborg.vbsupport.ru/showthread.php?t=230859) then you will have signature interference with image or table align="left or right". It's covered in post#12 above. If you check out my demo (http://www.vcclan.org/forums/showthread.php?14157-Test-Demo) (second post in that thread) you'll see that this BBCode doesn't force the signature to wrap around the image and text unless you've made those postbit.css edits.

I have NOT made those edits and it is still wrapping the sig. See the attachment in my post above.

I use postbit, not postbit_legacy, as you can see from the screen capture in the attachment.

djbaxter
08-20-2010, 11:42 PM
Regarding the imaghe distortion, this seems to work:

<img src="{param}" max-width="200" ondblclick='this.src="{param}";this.width=600' onclick='this.src="{param}";this.width=200' align="left" hspace="10">



I've just kept the width parameters and deleted the height paramaters. This shrinks the width and the height shrinks proportionately.

Now there's just the problem of the signature wrapping.

BirdOPrey5
08-20-2010, 11:47 PM
For me the above code displays the large picture when the page first loads- it should show the small image until it gets clicked.

BirdOPrey5
08-20-2010, 11:52 PM
Well with height removed now you could add an option, probably best to define the large width so you can use:

<img src="{param}" width="200" ondblclick='this.src="{param}";this.width={option}' onclick='this.src="{param}";this.width=200' align="left" hspace="10">

http://yourwebsite/image.gif

Double clicking enlarges the image to 800px wide.

djbaxter
08-20-2010, 11:55 PM
Change max-width to just width and it displays the small image by default I think:

<img src="{param}" width="200" ondblclick='this.src="{param}";this.width=600' onclick='this.src="{param}";this.width=200' align="left" hspace="10">

Then no option necessary.

midnz
08-21-2010, 01:40 AM
I have NOT made those edits and it is still wrapping the sig. See the attachment in my post above.

I use postbit, not postbit_legacy, as you can see from the screen capture in the attachment.

I also use postbit_legacy and it works for me without signature wrapping. I wonder what I did :confused:.
When I was looking for reasons/solutions to fix the sig wrapping I tested adding/removing that Postbit.css edit mentioned in post#12 and replacing it with the following code and that fixed the issue for me. Prior to that I found that any example of image align="left" or align="right" caused signature wrapping. Would you mind trying the Postbit.css edit below to see if that fixes it for you please?
NOTE: That edit did affect the postbit_legacy display for me.

Postbit.css
find:
/*post bit*/ add under:
.postbitlegacy .after_content {
position: relative;
width: 100%;
clear:both;
}My apologies for assuming you must've made edits that contributed to the sig wrapping. I assumed that because your attached image shows there is very little space between your post content and your signature. Or is that attachment an image of Preview Post?
If that edit doesn't work I'll be happy to provide you with copies of any templates that might help find clues to resolve it for you.

Change max-width top just width and it displays the small image by default I think:

<img src="{param}" width="200" ondblclick='this.src="{param}";this.width=600' onclick='this.src="{param}";this.width=200' align="left" hspace="10">Then no option necessary.

I thought I had already tried removing the height attributes to maintain image proportions. Clearly I hadn't :eek:. Awesome work! Thank you so much for bothering to help. I really do appreciate it :).
I'm hoping the sig wrapping might be easily solved for you now.

midnz
08-21-2010, 01:55 AM
Well with height removed now you could add an option, probably best to define the large width so you can use:

<img src="{param}" width="200" ondblclick='this.src="{param}";this.width={option}' onclick='this.src="{param}";this.width=200' align="left" hspace="10">http://yourwebsite/image.gif

Double clicking enlarges the image to 800px wide.

Although it's not necessary now your idea is a very good one for allowing that extra option of max display size per image. That will no doubt be useful to me later :D.

djbaxter
08-21-2010, 02:33 AM
I use postbit, not postbit_legacy, as you can see from the screen capture in the attachment.

I also use postbit_legacy and it works for me without signature wrapping.

No. I said I do NOT use postbit_legacy. I use postbit.

midnz
08-21-2010, 02:39 AM
No. I said I do NOT use postbit_legacy. I use postbit.
Duh, sorry about that. It's sunken in now :D.

Do you think that altering the code edit from postbitlegacy that I used, to postbit, might help?

.postbit .after_content {
position: relative;
width: 100%;
clear:both;
}

djbaxter
08-21-2010, 03:15 AM
I can't see how that would make a difference, since it's code I'm not using.

midnz
08-21-2010, 06:29 AM
It won't make any difference. I've checked myself.

The best that can be achieved at present is to remove the align="left" from the code and forget about text wrapping until a solution can be found for those using the newer horizontal postbit layout.

I came from vB3.6 where align="left" worked to vB4.0.5/6 where it doesn't work any more with the newer horizontal postbit display because of the signature interference issue.

If I were still using 3.6 I'd find the signature code in the template and place <p></p> right before it to move signatures down. vB4 is somewhat more complex for me and I'm still coming to grips how it all works. The solution appears to me to be changing how the signature is displayed using the newer horizontal postbit layout.

midnz
08-21-2010, 09:14 AM
No. I said I do NOT use postbit_legacy. I use postbit.

I edited a default postbit template by separating it in to a single columned table of two rows with the signature code being at the top of the second row. It's a crude fix but it works.
Everything above {vb:raw template_hook.postbit_signature_start} went in the top row of the table. {vb:raw template_hook.postbit_signature_start} and everything below it went in the bottom row of the table.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><li class="postbit postbitim postcontainer" id="post_{vb:raw post.postid}">
<div class="postdetails_noavatar">
<div class="posthead">
<vb:if condition="$show['inlinemod']"><label for="post_imod_checkbox_{vb:raw post.postid}"></vb:if>
<span class="postdate {vb:raw post.statusicon}">
<vb:if condition="$show['announcement']">
<span class="date">{vb:rawphrase x_until_y, {vb:raw post.startdate}, {vb:raw post.enddate}}</span>
<vb:else />
<span class="date">{vb:raw post.postdate}<vb:if condition="!$show['detailedtime']">&nbsp;<span class="time">{vb:raw post.posttime}</span></vb:if></span>
</vb:if>
</span>
<span class="nodecontrols">
<vb:if condition="$post['postid'] AND $post['threadid'] AND !$show['moderated']">
<a name="post{vb:raw post.postid}" href="{vb:link thread, {vb:raw thread}, {vb:raw pageinfo_post}}#post{vb:raw post.postid}" class="<vb:if condition="$show['inlinemod']">ie</vb:if>postcounter">#{vb:raw post.postcount}</a><a id="postcount{vb:raw post.postid}" name="{vb:raw post.postcount}"></a>
</vb:if>
<vb:if condition="$show['moderated']">{vb:rawphrase moderated_post}</vb:if>
<vb:if condition="$show['inlinemod']">
<input class="postimod" type="checkbox" id="post_imod_checkbox_{vb:raw post.postid}" name="plist[{vb:raw post.postid}]" value="{vb:raw post.checkbox_value}" />
</vb:if>
</span>
<vb:if condition="$show['inlinemod']"></label></vb:if>
</div>

<div class="userinfo<vb:if condition="!$show['avatar']">_noavatar</vb:if>">
<div class="contact">
<vb:if condition="$show['avatar']">
<a class="postuseravatarlink" href="{vb:link member, {vb:raw post}}" title="{vb:rawphrase {vb:raw post['onlinestatusphrase']}, {vb:raw post.username}}">
<vb:if condition="$post.avatarurl">
<img src="{vb:raw post.avatarurl}" alt="{vb:rawphrase xs_avatar, {vb:raw post.username}}" />
<vb:else />
<img src="{vb:stylevar imgdir_misc}/unknown.gif" />
</vb:if>
</a>
</vb:if>
<div class="username_container">
<vb:if condition="$post['userid']">
{vb:raw memberaction_dropdown}
{vb:raw post.onlinestatus}
<vb:else />
<span class="username guest">{vb:raw post.username}</span>
</vb:if>
<span class="usertitle">
{vb:raw post.usertitle}
</span>
<vb:if condition="$post['rank']">
<span class="rank">{vb:raw post.rank}</span>
</vb:if>

{vb:raw template_hook.postbit_userinfo_left}
<vb:if condition="$show['reputation']">
<span class="postbit_reputation" id="repdisplay_{vb:raw post.postid}_{vb:raw post.userid}">{vb:raw post.reputationdisplay}</span>
</vb:if>
<vb:if condition="$post['userid']">
<div class="imlinks">
{vb:raw post.icqicon} {vb:raw post.aimicon} {vb:raw post.msnicon} {vb:raw post.yahooicon} {vb:raw post.skypeicon}
</div>
</vb:if>
</div>
</div>
<vb:if condition="$post['userid']">
<div class="userinfo_extra">
<dl class="userstats">
<vb:if condition="$post['joindate']"><dt>{vb:rawphrase join_date}</dt> <dd>{vb:raw post.joindate}</dd></vb:if>
<vb:if condition="$post['field2']"><dt>{vb:rawphrase location_perm}</dt> <dd>{vb:raw post.field2}</dd></vb:if>
<vb:if condition="$post['age']"><dt>{vb:rawphrase age}</dt> <dd>{vb:raw post.age}</dd></vb:if>
<dt>{vb:rawphrase posts}</dt> <dd>{vb:raw post.posts}</dd>
{vb:raw template_hook.postbit_userinfo_right_after_posts}
</dl>
<vb:if condition="$show['infraction'] OR $show['reppower']">
<dl class="user_rep">

<vb:if condition="$show['infraction']">
<dt>{vb:rawphrase infractions}</dt>
<dd>{vb:raw post.warnings}/{vb:raw post.infractions} ({vb:raw post.ipoints})</dd>
</vb:if>
<vb:if condition="$show['reputation']">
<vb:if condition="$show['reppower']">
<dt>{vb:rawphrase reppower}</dt>
<dd id="reppower_{vb:raw post.postid}_{vb:raw post.userid}">{vb:raw post.reppower}</dd>
</vb:if>
</vb:if>
</dl>
</vb:if>
{vb:raw template_hook.postbit_userinfo_right}
</div>
</vb:if>
</div>
</div>

<div class="postbody">
{vb:raw template_hook.postbit_messagearea_start}
<div class="postrow">
<vb:if condition="$post['title'] OR $show['messageicon']">
<h2 class="posttitle icon">
<vb:if condition="$show['messageicon']"><img src="{vb:raw post.iconpath}" alt="{vb:raw post.icontitle}" /> </vb:if>{vb:raw post.title}
</h2>
</vb:if>
<vb:if condition="$post['isfirstshown']">
{vb:raw ad_location.ad_showthread_firstpost_start}
{vb:raw ad_location.thread_first_post_content}
</vb:if>
<vb:if condition="$post['islastshown']">
{vb:raw ad_location.thread_last_post_content}
</vb:if>
<div class="content<vb:if condition="$show['first_ad'] OR $show['last_ad']"> hasad</vb:if>">
<div id="post_message_{vb:raw post.postid}">
<blockquote class="postcontent restore">
{vb:raw post.message}
</blockquote>
</div>

<vb:if condition="$show['attachments']">
<div class="attachments">

<vb:if condition="$show['thumbnailattachment']">
<fieldset class="postcontent">
<legend><img src="{vb:stylevar imgdir_misc}/paperclip.png" class="inlineimg" alt="{vb:rawphrase attached_thumbnails}" /> {vb:rawphrase attached_thumbnails}</legend>
{vb:raw post.thumbnailattachments}
</fieldset>
</vb:if>

<vb:if condition="$show['imageattachment']">
<fieldset class="postcontent">
<legend><img src="{vb:stylevar imgdir_misc}/paperclip.png" class="inlineimg" /> {vb:rawphrase attached_images}</legend>
{vb:raw post.imageattachments}
</fieldset>
</vb:if>

<vb:if condition="$show['imageattachmentlink']">
<fieldset class="postcontent">
<legend><img src="{vb:stylevar imgdir_misc}/paperclip.png" class="inlineimg" /> {vb:rawphrase attached_images}</legend>
<ul>
{vb:raw post.imageattachmentlinks}
</ul>
</fieldset>
</vb:if>

<vb:if condition="$show['otherattachment']">
<fieldset class="postcontent">
<legend><img src="{vb:stylevar imgdir_misc}/paperclip.png" class="inlineimg" /> {vb:rawphrase attached_files}</legend>
<ul>
{vb:raw post.otherattachments}
</ul>
</fieldset>
</vb:if>

<vb:if condition="$show['moderatedattachment']">
<fieldset class="postcontent">
<legend><img src="{vb:stylevar imgdir_misc}/paperclip.png" class="inlineimg" /> {vb:rawphrase attachments_pending_approval}</legend>
<ul>
{vb:raw post.moderatedattachments}
</ul>
</fieldset>
</vb:if>

</div>
<!-- / attachments -->
</vb:if>


</div>
<vb:if condition="$show['postedited']">
<!-- edit note -->
<blockquote class="postcontent lastedited">
<!-- <img src="{vb:stylevar imgdir_button}/edit_40b.png" alt="" /> -->
<vb:if condition="$show['postedithistory']">
{vb:rawphrase last_edited_link_by_x_on_y_at_z_postid, {vb:raw post.edit_username}, {vb:raw post.edit_date},
{vb:raw post.edit_time}, {vb:raw post.historyurl}}
<vb:else />
{vb:rawphrase last_edited_by_x_on_y_at_z, {vb:raw post.edit_username}, {vb:raw post.edit_date}, {vb:raw post.edit_time}}
</vb:if>
<vb:if condition="$post['edit_reason']">
<span class="reason">{vb:rawphrase reason}:</span> {vb:raw post.edit_reason}
</vb:if>
</blockquote>
<!-- / edit note -->
</vb:if></td>
</tr>
<tr>
<td>
{vb:raw template_hook.postbit_signature_start}
{vb:raw ad_location.ad_showthread_firstpost_sig}
<vb:if condition="$post['signature']">
<blockquote class="signature restore"><div class="signaturecontainer">{vb:raw post.signature}</div></blockquote>
</vb:if>

{vb:raw template_hook.postbit_signature_end}
</div>
</div>
<div class="postfoot">
<div class="textcontrols floatcontainer">
<span class="postcontrols">
<img style="display:none" id="progress_{vb:raw post.postid}" src="{vb:stylevar imgdir_misc}/progress.gif" alt="{vb:rawphrase loading_editor_please_wait}" />
<vb:if condition="$post['editlink']">
<a class="editpost" href="{vb:raw post.editlink}" name="vB::QuickEdit::{vb:raw post.postid}"><img src="{vb:raw vboptions.cleargifurl}" id="editimg_{vb:raw post.postid}" alt="{vb:rawphrase edit_delete_message}" /> {vb:rawphrase edit_post}</a>
<span class="seperator">&nbsp;</span>
</vb:if>

<vb:if condition="$show['quickreply'] AND !$show['threadedmode']">
<a id="qr_{vb:raw post.postid}" class='quickreply' href="{vb:raw post.replylink}" rel="nofollow"><img id="replyimg_{vb:raw post.postid}" src="{vb:raw vboptions.cleargifurl}" alt="{vb:rawphrase quick_reply_to_this_message}" /> {vb:rawphrase reply}</a>
<span class="seperator">&nbsp;</span>
</vb:if>
<vb:if condition="$post['replylink']">
<a id="qrwq_{vb:raw post.postid}" class="newreply" href="{vb:raw post.replylink}" rel="nofollow" ><img id="quoteimg_{vb:raw post.postid}" src="{vb:raw vboptions.cleargifurl}" alt="{vb:rawphrase reply_with_quote}" /> <vb:if condition="$post['forwardlink']">{vb:rawphrase reply_to_private_message}<vb:else />{vb:rawphrase reply_with_quote}</vb:if></a>
<vb:if condition="$show['multiquote_post']"><span class="seperator">&nbsp;</span></vb:if>
</vb:if>
<vb:if condition="$show['multiquote_post']">
<a class='multiquote' href="{vb:raw post.replylink}" rel="nofollow" onclick="return false;" id="mq_{vb:raw post.postid}"><img id="mq_image_{vb:raw post.postid}" src="{vb:raw vboptions.cleargifurl}" alt="{vb:rawphrase multi_quote_this_message}" />&nbsp;</a>
</vb:if>
</span>

<span class="postlinking">
<vb:if condition="!$post['forwardlink'] && THIS_SCRIPT != 'usernote' && THIS_SCRIPT != 'announcement'">
<vb:if condition="$promote_sectionid AND $promote_sectionid != -1">
<a href="{vb:raw promote_url}" class="promotecms">{vb:rawphrase promote_to_article}</a>
<span class="seperator">&nbsp;</span>
</vb:if>
</vb:if>
{vb:raw template_hook.postbit_controls}

{vb:raw post.iplogged}
<vb:if condition="$post['forwardlink']">
<a class="forwardpost" href="{vb:raw post.forwardlink}" rel="nofollow" ><img src="{vb:raw vboptions.cleargifurl}" alt="{vb:rawphrase forward_message}" /> {vb:rawphrase forward}</a>
<vb:if condition="$show['reputationlink'] OR $show['infractionlink'] OR $show['moderated'] OR $show['spam'] OR $show['deletedpost'] OR $show['redcard'] OR $show['yellowcard']"><span class="seperator">&nbsp;</span></vb:if>
</vb:if>

<vb:if condition="$show['reputationlink']">
<span class="reputationpopupmenu popupmenu popupcustom" title="{vb:raw post.postid}"><a class="popupctrl reputation" href="reputation.php?{vb:raw session.sessionurl}do=addreputation&amp;p={vb:raw post.postid}" title="{vb:rawphrase add_reputation}" rel="nofollow" id="reputation_{vb:raw post.postid}"><!--<img src="{vb:stylevar imgdir_button}/reputation-40b.png" alt="{vb:rawphrase add_reputation}" />-->&nbsp;</a></span>
</vb:if>

<vb:if condition="$show['infractionlink']">
&nbsp;<a class="infraction" href="infraction.php?{vb:raw session.sessionurl}do=report&amp;p={vb:raw post.postid}" rel="nofollow" title="{vb:rawphrase add_infraction_for_x, {vb:raw post.username}}"><!-- <img src="{vb:stylevar imgdir_button}/add-infraction_sm.png" alt="{vb:rawphrase add_infraction_for_x, {vb:raw post.username}}" /> --> &nbsp;</a> &nbsp;
</vb:if>
<vb:if condition="$show['reportlink']">
&nbsp;<a class="report" href="{vb:raw post.reportlink}" rel="nofollow" title="{vb:rawphrase report_bad_post}"><!-- <img src="{vb:stylevar imgdir_button}/report-40b.png" alt="{vb:rawphrase report_bad_post}" /> -->&nbsp;</a> &nbsp;
</vb:if>

<vb:if condition="$show['moderated']">
<img class="moderated" src="{vb:stylevar imgdir_misc}/moderated_sm.png" alt="{vb:rawphrase moderated_post}" />
</vb:if>
<vb:if condition="$show['spam']">
<img class="spam" src="{vb:stylevar imgdir_misc}/spam_detected.png" alt="{vb:rawphrase spam_post}" />
</vb:if>
<vb:if condition="$show['deletedpost']">
<vb:if condition="$show['managepost']">
<a class="deleted" href="postings.php?{vb:raw session.sessionurl}do=managepost&amp;p={vb:raw post.postid}" title="{vb:rawphrase manage}"><!-- <img src="{vb:stylevar imgdir_misc}/deleted_sm.png" alt="{vb:rawphrase manage}" /> --> &nbsp;</a>
<vb:else />
<img class="deleted_nolink" class="inlineimage" src="{vb:stylevar imgdir_misc}/deleted_sm.png" alt="{vb:rawphrase deleted_post}" />
</vb:if>
</vb:if>
<vb:if condition="$show['redcard']">
<a class="redcard" href="infraction.php?{vb:raw session.sessionurl}do=view&amp;p={vb:raw post.postid}" rel="nofollow" title="{vb:rawphrase received_infraction}"><!-- <img src="{vb:stylevar imgdir_button}/red-card_sm.png" alt="{vb:rawphrase received_infraction}" /> --> &nbsp;</a>
<vb:elseif condition="$show['yellowcard']" />
<a class="yellowcard" href="infraction.php?{vb:raw session.sessionurl}do=view&amp;p={vb:raw post.postid}" rel="nofollow" title="{vb:rawphrase received_warning}"><!--<img src="{vb:stylevar imgdir_button}/yellow-card_sm.png" alt="{vb:rawphrase received_warning}" /> --> &nbsp;</a>
</vb:if>
</span>
</div>
</div>
<hr />
</li>
{vb:raw template_hook.postbit_end}</td>
</tr>
</table>Before and after image resize using horizontal style postbit after postbit template edit:

http://img153.imageshack.us/img153/3988/postbitedits.jpg

http://img69.imageshack.us/img69/1475/postbitedits2.jpg

BirdOPrey5
08-21-2010, 10:45 AM
an even cruder fix might be to put the signature in an invisible table - <table border="0" width="100%"><tr><td> SIG HERE <./td></tr></table>

But that would introduce a table to vb4's table-less design.

djbaxter
08-21-2010, 11:30 AM
Yeah.

Nice idea but I don't think it's going to work for me, I'm afraid. Thanks.

Blooded
09-10-2010, 02:43 AM
Working perfect :)

8thos
10-31-2010, 01:29 PM
Works great!

marcopolo
01-12-2011, 04:55 PM
Great little trick this, how do you use the button image?

midnz
01-12-2011, 05:59 PM
Great little trick this, how do you use the button image?
Mark as installed please :)

Upload the "ri.png" image to your images/editor/ directory

Edit your BBCode (bbcode manager) to include that image:
http://img407.imageshack.us/img407/2535/bbcodeimage.jpg

shadowquest1
01-13-2011, 04:25 PM
Thanks works good for me ..

ricardoNJ
04-11-2012, 10:29 PM
Testing........ nice in vB 3.8.4!

ricardoNJ
05-19-2012, 03:48 PM
Great but...is possible add a text in, like: "click to rezise this picture"???

ricardoNJ
05-19-2012, 03:57 PM
alt=" blablabla"
;)

midnz
05-19-2012, 04:56 PM
Great but...is possible add a text in, like: "click to rezise this picture"???

alt=" blablabla"
;)
You're probably best to use: title="blablabla"

title provides the image hover message whereas alt is meant to display a message if the image doesn't display.
alt might work like title is some, but not all browsers.

ricardoNJ
05-19-2012, 06:46 PM
You're probably best to use: title="blablabla"

title provides the image hover message whereas alt is meant to display a message if the image doesn't display.
alt might work like title is some, but not all browsers.

Ok, then could you please add a modification about my question, up there?

midnz
05-20-2012, 06:30 AM
Ok, then could you please add a modification about my question, up there?
Sure, try this:

<img src="{param}" title="double mouse click to enlarge image/ single mouse click to reduce back to original size" width="200" ondblclick='this.src="{param}";this.width=600' onclick='this.src="{param}";this.width=200' align="left" hspace="10">

Change the title text to suit what you want.

ar15dcm
10-21-2012, 09:04 AM
What if you have a mix of large and small images, is there a way if the image is smaller to not change its size?

midnz
10-21-2012, 04:15 PM
What if you have a mix of large and small images, is there a way if the image is smaller to not change its size?
Create a new BB Code but change all 3 instances of width=XXX to the same value.

Example:

<img src="{param}" width="100" ondblclick='this.src="{param}";this.width=100' onclick='this.src="{param}";this.width=100' align="left" hspace="10">OR

You can download Borgs' [BB Code] Pack For vB 4.0.2+ (https://vborg.vbsupport.ru/showthread.php?t=236950&highlight=BB+Code) and use the "Float Left" BB Code from that package

ar15dcm
10-27-2012, 08:30 PM
I guess what I was asking is more javascript related. If I did that, then by big images would be small.

But, another question... Is there any way to add a style like a radius corner on the images using this in the code;


style="border-radius:8px;"

When tried it, it worked on the corners but I lost the padding on the preview article.

Thanks,

midnz
10-30-2012, 06:16 PM
I guess what I was asking is more javascript related. If I did that, then by big images would be small.

But, another question... Is there any way to add a style like a radius corner on the images using this in the code;


style="border-radius:8px;"

When tried it, it worked on the corners but I lost the padding on the preview article.

Thanks,
Rather than just ignore you I thought I'd reply and let you know that I don't currently have any spare time to investigate a way to accomplish what you want to do ... I'm sorry.