Images with text wrap

[Boofo]

Images with text wrap
Version 1.0.1
(By Boofo)

What does this do?
This will allow you to wrap test around images on either the left side or the right side. You can also define the background color you want for the image.

Installation:
Custom BB Codes to make: 2
Files to Upload: 2

Installation Instructions:
Step 1: Upload the 2 images to the images/misc folder.

Step 2: Go to Admin CP -> Custom BB Codes -> Add New BB Code
Enter the following information for each BB Code.

Done!
Enjoy!

NOTE: If you do not click install, you do not need support.

[Zaiaku]

Perfect thing for news post!

[Boofo]

I use it in the calendar a lot. ;)

[SwollenCranium]

Awesome ... thanks !!

[Lionel]

I do it with uploaded images :D

[Boofo]

And your point is...? ;)

[Lionel]

And your point is...? ;)

Relax. That was not a point, but a statement...:erm:

[Boofo]

How do you do it with uploaded images? ;)

[SwollenCranium]

And your point is...? ;)

Hi,

This works when I use an image from an outside source such as photobucket.

But when I use an image from my own user album it will not display the image.

Is that an expected behavior ?

[Boofo]

I use this for all my local images on the site. I can't see why it wouldn't work for any linked image.

[SwollenCranium]

I use this for all my local images on the site. I can't see why it wouldn't work for any linked image.


I thought so as well .. yet I can't bring in an album pic.

[Boofo]

I just re-tested this and it only works for actual images files. I'm not sure how you would set it up to work with any non-image links.

[Lyte]

Howdy,

I followed the installation directions for "Add New BB Code" but I didn't see these parts anywhere...

Remove Tag If Empty: Yes
Disable BB Code Within This BB Code: No
Disable Smilies Within This BB Code: No
Disable Word Wrapping Within This BB Code: No

So... not sure what to do with this info. :confused:

Also, I must have done something wrong cuz this (http://www.pc101.com/forum/newreply.php?do=newreply&noquote=1&p=17269) doesn't look right.

Thanks. :)

Lyte

[Lionel]

How do you do it with uploaded images? ;)

Well, I don't want to hijack your thread... but I do it with uploaded images, top, bottom, left, right, alternate, anywhere you want them to appear, on page 2, page 3 etc (if you use my multipages hack) ... where you put them. However, for uploaded images on calendar events it goes only on top. If you want more info, register at my site and ask me all questions you want.

[Boofo]

Howdy,

I followed the installation directions for "Add New BB Code" but I didn't see these parts anywhere...

Remove Tag If Empty: Yes
Disable BB Code Within This BB Code: No
Disable Smilies Within This BB Code: No
Disable Word Wrapping Within This BB Code: No

So... not sure what to do with this info. :confused:

Also, I must have done something wrong cuz this (http://www.pc101.com/forum/newreply.php?do=newreply&noquote=1&p=17269) doesn't look right.

Thanks. :)

Lyte

Nothing, that code is in 3.7.0. Your link gives a no permissions error.

[StuntFactoryX]

boofo, you have been on a roll latly, releasing some nice hacks. : )

any idea of this will work in vbadvanced?

[Boofo]

I have no idea, sir. Try it and let me know, please. It works on the calendar great so I would think it should if vbadvanced allows bbcode.

[Barakat]

i have the same code since sooo long ... dont know from where i got it ...

any way tnx

[Boofo]

There's not too many other ways to do this.

[Lyte]

Nothing, that code is in 3.7.0.

Ah! Thanks.

Your link gives a no permissions error.

My bad! I found my boo boo too. Thanks. :)

Lyte

[Lyte]

Hmm, I still seem to be having an issue.

What exactly am I to type when I click the icon and the lil box pops up which says...

"Please enter the option for your [IMGR] tag:"

I figured it was asking for something like this...

http://www.pc101.com/forum/photoplog/images/1/medium/1_flora-komodo-dragon.jpg

No?

[Boofo]

Hmm, I still seem to be having an issue.

What exactly am I to type when I click the icon and the lil box pops up which says...

"Please enter the option for your [IMGR] tag:"

I figured it was asking for something like this...

http://www.pc101.com/forum/photoplog/images/1/medium/1_flora-komodo-dragon.jpg

No?

That is for the background color of the image. Some images have shadows and things like that that look better under their own color. Just set it to white for most images.

Don't forget the install button. ;)

I like your avatar. Did you do that yourself?

[Forum Lover]

This is the most stupid and lame hack that I have ever seen here in vb.org....














BTW, I am a big liar. :p
going to click INSTALL soon.

[KURTZ]

great job Bobby ... you rock!

[valdet]

I assume this works on vb 3.6.x. Can someone confirm before I install it live?

Great hacks Boofo.

[ogameclub]

Code error with button, and not working.
Manual code is working.

[Boofo]

Code error with button, and not working.
Manual code is working.

That is because you are not using the tags as designed.

This:

(http://www.ogameclub.com/images/misc/vbulletin3_logo_white.gif%22])


Should be this:

http://www.ogameclub.com/images/misc/vbulletin3_logo_white.gif"]

with the "white" being whatever background color you want the image to have.

[Boofo]

I assume this works on vb 3.6.x. Can someone confirm before I install it live?

Great hacks Boofo.

Yes, it does. ;)

[Barakat]

you can do it in another way



to make the image on the left just in the replacement put this :-

<div style="float: right">https://vborg.vbsupport.ru/</div>

the RemoveTag If Empty put it on yes and the others noooooo


no to make the image on the right just put this code in the replacement box


<div style="float: right">https://vborg.vbsupport.ru/</div>

the Remove Tag If Empty put it on yes and the others noooooo

i believe it will work on alllll the vb versions........

:p

[Boofo]

That does the same thing as this code does except it doesn't allow you to set the background color and it adds a line break with the div tags. And my works on all vb versions also. I'll stay with my code, thanks. ;)

[ccplim]

Nice one! This will surely help to beautify my articles section.

I tested it on my test board which is on vb 3.6.8 PL2 and it works like a charm except for the text wrapping which I believed is currently only available in vb 3.7.x.

Two more things that I have noticed is that if the text content is too short to cover the entire height of the image, our signature gets aligned to the left/right too. Does this happen with vb 3.7.x? It will be great if the signature can remain at the bottom.

Also, if the text content is too short to cover the entire height of the image, the next image following the text will also be aligned to the left/right (see sample below)

https://vborg.vbsupport.ru/external/2008/03/32.jpg

Is there a way that we can make it such that it become like this (see below)?

https://vborg.vbsupport.ru/external/2008/03/33.jpg

[Boofo]

You need to do a link break at the end for the sig to stay at the bottom, I think. I think a line break would fix the above issue too, although I haven't played with that yet. On posts I use the tag, I disable my sig for a more professional look.

You said something about this being in 3.7? The text wrapping part should work on any version.

[ccplim]

You need to do a link break at the end for the sig to stay at the bottom, I think. I think a line break would fix the above issue too, although I haven't played with that yet. On posts I use the tag, I disable my sig for a more professional look.

You said something about this being in 3.7? The text wrapping part should work on any version.

How do I go about doing a link/line break? (sorry..... really have limited knowledge on all this)

I am referring to the following "code" that you have which I believed only exist in 3.7.x which is the main reason why I am not seeing this at the moment. I am fine with that at the moment but will sure give it a go when I upgrade to vb 3.7.

Disable Word Wrapping Within This BB Code: No

The text wrapping is indeed working :up: The only thing now is to figure out how to achieve the result in my second image (Which I cheated a little at the moment but that is not a good solution especially for a long article).

[Boofo]

By line breaks I mean hit the enter key.

I just read the description for the word wrapping line. That only works WITHIN the tags.

Don't forget the install button. ;)

[ccplim]

By line breaks I mean hit the enter key.

I just read the description for the word wrapping line. That only works WITHIN the tags.

Don't forget the install button. ;)

I see.... haha...

But then, if let say I only have a few lines of text beside the image, I will need to perform many line breaks, which will cause quite some confusion especially for a long posting.

For example...... with the following 'codes' below, I got the results that you see in the first image that I posted above.

First bird picture on the top left
Block of text left of first picture

Second bird picture on the right bottomText

If I want to get the results in the second image that I have posted, my post will actually have to look like this. (which is the 'cheating' method that I am using at the moment :D

First bird picture on the top left
Block of text left of first picture






16 lines of line breaks in between






Second bird picture on the right bottomText

[Boofo]

Exactly. The way you are doing it is how it must be done when wrapping text that is smaller than the pic. Unless you use tables, there is no other way to do it.

[ccplim]

Gosh... looks like I'm gonna have some headache now with articles spanning over a few pages and more than 20000 characters :erm:

[Boofo]

What do you mean? I just alternate the images like the pic in the first post when I get a long article.

[MissKalunji]

perfect for my news section thanks

[ccplim]

What do you mean? I just alternate the images like the pic in the first post when I get a long article.

I usually have many images in my articles and thus need to do alot of adjustments.

Another thing that I just found out. If you resize the browser window and make it smaller, the text will get wrapped at the side and pushed down, leaving a big gap. This might cause a layout error with people using different/lower screen resolution. I need to test this out when I get back to office on Monday before I can confirm.

[Boofo]

The gap you are referring to isn't huge by any means but yes there is a gap there. You can adjust that with the vspace setting in the bbcode. There isn't much you can do for different display sizes. I always wrap the text to the pic I want it wrapped to and it stays there no matter what size the display is.

[ccplim]

Thanks so much for that! I got to do some readup on that vspace thing. All these codes are like aliens to me :o

[Boofo]

Isn't learning fun? ;)

[ArnyVee]

I'm going to want to use this for my 'news' for my site. But, I need some help. Complete newbie here, so be warned and on the lookout for dumb questions. :)

Step 1: Am I uploading them to my own server?

Step 2: Done with the "left" option, how do I test it? Then, I'm assuming that I do an entirely new BBCode for the right, correct?

Remember....be gentle, I'm a newbie. :)

[ArnyVee]

Not sure what I'm doing wrong. Can someone check this post and see why it's not showing correctly?

http://www.waltdisneyboards.com/showthread.php?t=8

I tried that 'hit enter a bunch of times' technique at the end of the post, but it doesn't seem to stay. When I 'save' the edit, it takes the empty spaces out.

Edited to add: So, what I did was hit the enter key a few times, placed a dot (period) and made the period white in color to match the background of the post. :)

Fixed, but sorta cheated. :)

[Boofo]

Ingenious little idea. ;)

[ramires]

i ve a request

i am former user of phpbb 3.0 - now migrate to vb 3.6.8 and .. have a problem

in phpbb 3 i was a feature place uploaded file between text. i reader this thread careful (i think) and i cant find any info about positioning between some lines of text. i store the attachements in base.

what should i do to can magage where some picture should be placed and second in other place?

[Jase2]

Boofo, thanks for this. I write a lot of news, and this comes handy :)

Regards Jason :)

[Boofo]

Boofo, thanks for this. I write a lot of news, and this comes handy :)

Regards Jason :)

You could thank me better by clicking the install button. ;)

[princeedward]

what a nice and great idea bro....great job... how come i'm not seeing the icon to any toolbar?...using vB.3.6.8 PL2 here....

thanks and best regards...

[princeedward]

what a nice and great idea bro....great job... how come i'm not seeing the icon to any toolbar?...using vB.3.6.8 PL2 here....

thanks and best regards...

Bump!!!

can you please show me some hint...if i want to add it manually...
:p

[Boofo]

You add the path to the image you want to use in the bbcode setting you made for this.

[crkgb]

Hi,

Running atestboard here. Trying to figure out how regular users supposed to find out about the background color they are supposed to enter.

Is there a way to go one click bbcode image - insert img url and with either a preset background color, or with none.

Thank you

[therogueforums]

You have no idea how many times I wish vB had this option. VERY nice work! Thank you for this mod!

[Boofo]

@ crkgb - You would have to either set the option tag to a certain color or take it out of the code altogether.

@ therogueforums - Clicking the install button would be nice. ;)

[crkgb]

I apologize for asking something as simple as that but how would I set the option tag for a certain color.

I tryed replacing background:{option} with background:white and it did not work

I mean it works in the bbcode editing area, but when you insert it into the message it still asks for a color

[Boofo]

You also have to uncheck the "Use Option" tag.

[rapidphim]

Can someone tell me if this hack auto resize the image base on the vb thumbnail resize, and apply the lightbox when click on the image?

[lazydesis]

hi nice hack !

can this be done in such a way that it wraps the text only in certain forums?

and also only wraps if the image is smaller than a predetermined size ?

my forum width is 950 and it tries to wrap even if the image is 900px wide ..

looks kind of ugly :( like that

[setishock]

Oh great Boofo. Now look what you done went and did. Now I have to go back and rework all my computer build threads. And this will make that a real pleasure. :):)
Thanks and yes I clicked installed.

Update: 04/22/08 11:28am est.
I set up a demo for it if that's any help to any one. http://animeappeal.com/forums/showthread.php?t=176
It just shows how to use the code. I think I got carried away. And Boofo I gave you credit for creating the add on. Thanks again.

[setishock]

Sorry for double posting but this is kinda important. I'm using this code with some 600x600 collages to make a thread. Pics and text work fine at higher resolutions but at lower resolutions the images float over the text blocking it. Is there anything short of reducing the size of the pics I'm using (already reduced them from 800x800 to 600x600) that would make this thread come out right? I'd really like to avoid reducing them too much as the images that make up the collage would be hard to make out.
http://animeappeal.com/forums/showthread.php?t=181

[Boofo]

I just checked your link and when I lowered the window size, I didn't see text floating over the images. It just moves the text below or above the images. Or am I missing what you are asking, which is entirely possible. ;)

[setishock]

I created those on my desk system. 20" widescreen running @ 1680x1050. My laptop is 15.4" running @ 1280x800. That's top res for those systems respectively.
I though I had taken in to consideration the resolution differences by reducing the size of the collages to 600x600 from 800x800. It works if you park pictures offset. When the forum floats down to fit the laptop screen it shows as it was intended.
But if the pics are one on the left >text in between< pic on the right, when the forum floats down to fit the laptop screen, the pictures get push together and the text that was in between is now behind the pictures. If you look at the thread about your bbcode and the one above it about making collages with the same sized screen and res as my laptop, you'll see what I'm trying to say. Also if you look just under the top and bottom pics in my laptop's configuration, you'll see a word just about buried under the top set and a loose word under the bottom set. Those were part of the text between the sets.
I'd rather it stay like it was put together and the scroll bar pop up than to have it crushed together like it's doing.

[Boofo]

OK, I see what you are saying now. I don't see a way to do that, to be honest with you. I will play with it and see if I can come up with anything but the way it works, I'm not sure we can set it to scroll if the screen size is too small. You are the first one that has done it with the text in between pics.

[NAZIA]

:up: Nice one Important modification... :up:

[Boofo]

:up: Nice one Important modification... :up:

But no important enough for the install button?

[setishock]

What does hspace and vspace control?

[Boofo]

Horizontal spacing and vertical spacing between the pic and the text.

[setishock]

You'd be amazed at what you can do if you change those values. I duped the left justitfy command and renamed it then set the values to increase the padding. When you increase the hspace value it pushes the image off of the left side of the forum border and pushes the text over also.
If you want to center a pic and have text under it you:
First find the total width of the screen. Divide that in half.
Do the same for the picture you'll be using.
Subtract the half of the picture from the half of the screen and you get the padding in pixels you need to put in hspace.
Then bang in those carrage returns till your edit and quote buttons are back down at the bottom of the page adding the imfamous period at the end.
Or
Drop down a line or two under the picture and put in your text.
The padding acts like a wall on the right hand side of the whole image. If you over run the right forum page border it will get pushed out.

I added another button to be able to have seperate values for another image. I wound up with this:
(5/4/08> Site crashed. All lost including backups. I will endevoer to get the how to's back up ASAP.)
I came back to correct the formula. It was in error. It is the screen res after all. But it does apply no matter what res you use. Center is center.

[Goomzee]

awesome mod

[macc]

hello!

have installed this hack but have some problems... this hach move signature picture up and edit, quote and thanks buttons also up!

will attach picture ,,, some help?

regards

macc

[Boofo]

That is how it is supposed to work. If you don't have any text to add in there you will need to do breaks to get the stuff that isn't text to move down. Look at the image in the first post.

[macc]

thanks for reply ..but can you explain what you mean " to do breaks" and how to get signature picture and buttons down like is usually on all post?

regards

macc

could help to install another hack ... "force signature on bottom" ?

[Boofo]

Hit enter?

[JadedSouls]

I've been wanting something like this for quite awhile! Thank you :)

[Boofo]

You're very welcome, young lady. ;)

[macc]

hello!

you mean that i must write much words around picture to get signature picture and buttons on normal place or make space between text and picture?

thanks for help!

regards

macc

[Boofo]

Yes

[furst]

Has anyone figured out a way to make it so that it doesn't dip into the signature space?

[Boofo]

This won't touch the signature space. It only affects the message area.

[furst]

This won't touch the signature space. It only affects the message area.
I just tried it and it's still going into my signature space.

http://img387.imageshack.us/img387/6962/108418143830teeeeeeeeeekv5.png

[Boofo]

No, that is not going into the signature space. Like I told the guy above, either add more text around the picture or add breaks (spaces) where the text should be. Please read the thread as this has been addressed numerous times throughout the thread.