PDA

View Full Version : Images with text wrap


Boofo
18 Mar 2008, 01:16
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
18 Mar 2008, 01:34
Perfect thing for news post!

Boofo
18 Mar 2008, 01:37
I use it in the calendar a lot. ;)

SwollenCranium
18 Mar 2008, 01:40
Awesome ... thanks !!

Lionel
18 Mar 2008, 01:43
I do it with uploaded images :D

Boofo
18 Mar 2008, 01:54
And your point is...? ;)

Lionel
18 Mar 2008, 02:02
And your point is...? ;)

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

Boofo
18 Mar 2008, 02:28
How do you do it with uploaded images? ;)

SwollenCranium
18 Mar 2008, 02:29
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
18 Mar 2008, 02:31
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
18 Mar 2008, 02:38
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
18 Mar 2008, 02:40
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
18 Mar 2008, 02:42
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
18 Mar 2008, 02:48
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
18 Mar 2008, 03:09
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
18 Mar 2008, 03:51
boofo, you have been on a roll latly, releasing some nice hacks. : )

any idea of this will work in vbadvanced?

Boofo
18 Mar 2008, 03:58
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
18 Mar 2008, 06:07
i have the same code since sooo long ... dont know from where i got it ...

any way tnx

Boofo
18 Mar 2008, 06:11
There's not too many other ways to do this.

Lyte
18 Mar 2008, 09:20
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
18 Mar 2008, 09:42
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...



Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------



No?

Boofo
18 Mar 2008, 10:12
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...



Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------



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
18 Mar 2008, 10:54
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
18 Mar 2008, 11:39
great job Bobby ... you rock!

valdet
18 Mar 2008, 16:50
I assume this works on vb 3.6.x. Can someone confirm before I install it live?

Great hacks Boofo.

ogameclub
18 Mar 2008, 20:41
Code error with button, and not working.
Manual code is working.

Boofo
19 Mar 2008, 00:20
Code error with button, and not working.
Manual code is working.

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

This:



Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------




Should be this:



Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------



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

Boofo
19 Mar 2008, 00:23
I assume this works on vb 3.6.x. Can someone confirm before I install it live?

Great hacks Boofo.

Yes, it does. ;)

Barakat
19 Mar 2008, 02:14
you can do it in another way



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


Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------



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



Code:
---------------
Code is only visible to licensed users, and only when logged into the forums.
---------------



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
19 Mar 2008, 02:31
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
21 Mar 2008, 00:44
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)

http://photos.imageevent.com/ccplim/privite/temp/Sample%201.JPG

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

http://photos.imageevent.com/ccplim/privite/temp/Sample%202.JPG

Boofo
21 Mar 2008, 02:50
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
21 Mar 2008, 04:03
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
21 Mar 2008, 04:08
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
21 Mar 2008, 05:00
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
21 Mar 2008, 05:14
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
21 Mar 2008, 05:24
Gosh... looks like I'm gonna have some headache now with articles spanning over a few pages and more than 20000 characters :erm:

Boofo
21 Mar 2008, 06:38
What do you mean? I just alternate the images like the pic in the first post when I get a long article.

MissKalunji
21 Mar 2008, 07:47
perfect for my news section thanks

ccplim
21 Mar 2008, 08:03
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
21 Mar 2008, 08:15
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
21 Mar 2008, 09:04
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
21 Mar 2008, 09:19
Isn't learning fun? ;)

ArnyVee
22 Mar 2008, 19:25
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
22 Mar 2008, 21:18
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
23 Mar 2008, 00:51
Ingenious little idea. ;)

ramires
25 Mar 2008, 20:26
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
26 Mar 2008, 01:38
Boofo, thanks for this. I write a lot of news, and this comes handy :)

Regards Jason :)

Boofo
26 Mar 2008, 01:56
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
28 Mar 2008, 10:47
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
30 Mar 2008, 11:11
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
30 Mar 2008, 12:04
You add the path to the image you want to use in the bbcode setting you made for this.

crkgb
09 Apr 2008, 07:42
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
09 Apr 2008, 09:39
You have no idea how many times I wish vB had this option. VERY nice work! Thank you for this mod!

Boofo
09 Apr 2008, 09:42
@ 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
09 Apr 2008, 10:00
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
09 Apr 2008, 11:04
You also have to uncheck the "Use Option" tag.

rapidphim
14 Apr 2008, 07:46
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
22 Apr 2008, 06:45
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
22 Apr 2008, 08:37
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
25 Apr 2008, 06:18
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
25 Apr 2008, 07:32
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
25 Apr 2008, 09:00
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
25 Apr 2008, 09:04
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
26 Apr 2008, 12:54
:up: Nice one Important modification... :up:

Boofo
26 Apr 2008, 12:56
:up: Nice one Important modification... :up:

But no important enough for the install button?

setishock
29 Apr 2008, 04:43
What does hspace and vspace control?

Boofo
29 Apr 2008, 05:04
Horizontal spacing and vertical spacing between the pic and the text.

setishock
30 Apr 2008, 08:05
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
05 May 2008, 09:56
awesome mod

macc
18 May 2008, 13:52
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
18 May 2008, 14:32
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
18 May 2008, 15:29
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
18 May 2008, 15:39
Hit enter?

JadedSouls
18 May 2008, 16:31
I've been wanting something like this for quite awhile! Thank you :)

Boofo
18 May 2008, 16:52
You're very welcome, young lady. ;)

macc
18 May 2008, 17:37
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
18 May 2008, 17:43
Yes

furst
18 May 2008, 18:21
Has anyone figured out a way to make it so that it doesn't dip into the signature space?

Boofo
18 May 2008, 18:28
This won't touch the signature space. It only affects the message area.

furst
18 May 2008, 18:42
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
18 May 2008, 18:54
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.