vb.org Archive - BB Code Enhancements - BBCode: Resize Image with Text Wrap

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 4.x Add-ons (https://vborg.vbsupport.ru/forumdisplay.php?f=245)

- - BB Code Enhancements - BBCode: Resize Image with Text Wrap (https://vborg.vbsupport.ru/showthread.php?t=248863)

BBCode: Resize Image with Text Wrap

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

Instructions:
Open the BBCode Manager/Add New BBCode

Title: Resize Image

BB Code Tag Name: RI

Replacement:

Code:

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

Example: [RI]image web address goes here[/RI]

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 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 :))

Quote:

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;thi s.width=600" onclick="this.src='{param}';this.height=150;this.w idth=200" align="left" hspace="10"><!{param}>

installed but ithing i do something rwong

any help plzzz

thanxxxx

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.

I got same error message with some bbcodes, they work fine however. I use vBulletin 4.0.6

Quote:

Originally Posted by Destron (Post 2085827)

I got same error message with some bbcodes, they work fine however. I use vBulletin 4.0.6

Thanks for that guys :).

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.

Quote:

Originally Posted by VonDoom (Post 2085976)

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

Quote:

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 ;)

Quote:

Originally Posted by VonDoom (Post 2085994)

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:.

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 ..

Quote:

Originally Posted by Hippy (Post 2086031)

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. [S]I'll have to ask over at vB.com to look further in to the problem.[/S] Problem solved.

Quote:

Originally Posted by Hippy (Post 2086031)

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.

I've replaced

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

PHP Code:


		
			
.postbitlegacy .after_content {

clear:right !important;

}

with

PHP Code:


		
			
.postbitlegacy .after_content {

    position: relative;

    width: 100%;

    clear:both;

}

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

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):

Code:

<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:

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.

Quote:

Originally Posted by BirdOPrey5 (Post 2086890)

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 :).

Quote:

Originally Posted by djbaxter (Post 2086899)

Thanks for that advice. All fixed :).

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.

Quote:

Originally Posted by djbaxter (Post 2087020)

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.

Quote:

Originally Posted by djbaxter (Post 2087020)

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 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 (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.

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.

Quote:

Originally Posted by BirdOPrey5 (Post 2087102)

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 :).

Quote:

Originally Posted by BirdOPrey5 (Post 2087102)

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 :)

Quote:

Originally Posted by midnz (Post 2087087)

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.

Regarding the imaghe distortion, this seems to work:

Code:

<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.

For me the above code displays the large picture when the page first loads- it should show the small image until it gets clicked.

Well with height removed now you could add an option, probably best to define the large width so you can use:

Code:

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

[RI="800"]http://yourwebsite/image.gif[/RI]

Double clicking enlarges the image to 800px wide.

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

Code:

<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.

Quote:

Originally Posted by djbaxter (Post 2087126)

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:

Code:

/*post bit*/

add under:

Code:

.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.

Quote:

Originally Posted by djbaxter (Post 2087141)

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

Code:

<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.

Quote:

Originally Posted by BirdOPrey5 (Post 2087140)

Well with height removed now you could add an option, probably best to define the large width so you can use:

Code:

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

[RI="800"]http://yourwebsite/image.gif[/RI]

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.

Quote:

Originally Posted by djbaxter (Post 2087126)

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

Quote:

Originally Posted by midnz (Post 2087165)

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.

Quote:

Originally Posted by djbaxter (Post 2087184)

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?

Code:

.postbit .after_content { 

    position: relative; 

    width: 100%; 

    clear:both; 

}

I can't see how that would make a difference, since it's code I'm not using.

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.

Quote:

Originally Posted by djbaxter (Post 2087184)

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.

PHP Code:


		
			
<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/3...stbitedits.jpg

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

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.

Yeah.

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

Great little trick this, how do you use the button image?

Quote:

Originally Posted by marcopolo (Post 2148111)

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

Thanks works good for me ..

Testing........ nice in vB 3.8.4!

Great but...is possible add a text in, like: "click to rezise this picture"???

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01894 seconds Memory Usage 2,153KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (10)bbcode_code_printable (3)bbcode_php_printable (22)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (40)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: