PlaneShift

Support => Forum and Website Discussions => Topic started by: Rigwyn on February 03, 2012, 09:08:23 am

Title: Wrapping text around images
Post by: Rigwyn on February 03, 2012, 09:08:23 am

I've seen other sites that use SMF which allow you to wrap text around images. They usually have a few options for *how* it should wrap. Is there any chance that either support could be added for this or else that embedded HTML be allowed for the <img> tag alone?

I know this is just a cosmetic issue...

Thanks
Rigwyn

Title: Re: Wrapping text around images
Post by: LigH on February 03, 2012, 01:01:24 pm

If you use the "align" attribute in the "img" tag with values like "left" or "right", the text is allowed to flow around the image. In addition, the CSS style attributes "float" and "clear" define this behaviour more detailed. A following "br" tag can also have a "clear" attribute to stop the text flow and continue below the image, div, etc.

Title: Re: Wrapping text around images
Post by: Rigwyn on February 03, 2012, 01:13:43 pm

In the example below, I tried using the HTML IMG tag as you suggested but it does not appear to be supported.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus auctor nisl eu dolor imperdiet porta. Quisque sagittis luctus ipsum, eget consequat odio malesuada quis. Aenean mattis nisl vel mi egestas fermentum. Aenean vel urna justo, sed ullamcorper orci. Nullam tincidunt placerat est, lobortis congue dui sagittis vitae. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi commodo, mi ac auctor pretium, lectus elit dictum urna, in sollicitudin turpis eros sed est. Sed tristique viverra iaculis. Proin vel rhoncus quam.
<img align="right">http://www.2-clicks-swords.com/images/image/Captain-Jack-Sparrow-with-sword.jpg</img>
Sed adipiscing condimentum semper. Sed orci tellus, blandit nec malesuada quis, lobortis dignissim massa. Sed ac dui eget ligula laoreet placerat. Fusce quis arcu mi. Morbi laoreet ultrices lectus eu molestie. Pellentesque et ligula ac leo sollicitudin congue eget eleifend nibh. Quisque lorem erat, iaculis at porttitor nec, consequat ac mauris. Nunc auctor condimentum urna nec fringilla. Nullam interdum mattis velit semper congue. In in magna nec nisl luctus fermentum nec convallis est. Nam lacinia euismod ligula, vitae dignissim lorem tincidunt vitae. Praesent non quam dui.

Likewise adding an align attribute to the BBCODE IMG tag does not seem to work either:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus auctor nisl eu dolor imperdiet porta. Quisque sagittis luctus ipsum, eget consequat odio malesuada quis. Aenean mattis nisl vel mi egestas fermentum. Aenean vel urna justo, sed ullamcorper orci. Nullam tincidunt placerat est, lobortis congue dui sagittis vitae. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi commodo, mi ac auctor pretium, lectus elit dictum urna, in sollicitudin turpis eros sed est. Sed tristique viverra iaculis. Proin vel rhoncus quam.
[img align="right"]http://www.2-clicks-swords.com/images/image/Captain-Jack-Sparrow-with-sword.jpg[/img]
Sed adipiscing condimentum semper. Sed orci tellus, blandit nec malesuada quis, lobortis dignissim massa. Sed ac dui eget ligula laoreet placerat. Fusce quis arcu mi. Morbi laoreet ultrices lectus eu molestie. Pellentesque et ligula ac leo sollicitudin congue eget eleifend nibh. Quisque lorem erat, iaculis at porttitor nec, consequat ac mauris. Nunc auctor condimentum urna nec fringilla. Nullam interdum mattis velit semper congue. In in magna nec nisl luctus fermentum nec convallis est. Nam lacinia euismod ligula, vitae dignissim lorem tincidunt vitae. Praesent non quam dui.

Leaving the align attribute out of the BBCODE IMG tag results in no wrapping as shown below

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus auctor nisl eu dolor imperdiet porta. Quisque sagittis luctus ipsum, eget consequat odio malesuada quis. Aenean mattis nisl vel mi egestas fermentum. Aenean vel urna justo, sed ullamcorper orci. Nullam tincidunt placerat est, lobortis congue dui sagittis vitae. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi commodo, mi ac auctor pretium, lectus elit dictum urna, in sollicitudin turpis eros sed est. Sed tristique viverra iaculis. Proin vel rhoncus quam.
(http://www.2-clicks-swords.com/images/image/Captain-Jack-Sparrow-with-sword.jpg)
Sed adipiscing condimentum semper. Sed orci tellus, blandit nec malesuada quis, lobortis dignissim massa. Sed ac dui eget ligula laoreet placerat. Fusce quis arcu mi. Morbi laoreet ultrices lectus eu molestie. Pellentesque et ligula ac leo sollicitudin congue eget eleifend nibh. Quisque lorem erat, iaculis at porttitor nec, consequat ac mauris. Nunc auctor condimentum urna nec fringilla. Nullam interdum mattis velit semper congue. In in magna nec nisl luctus fermentum nec convallis est. Nam lacinia euismod ligula, vitae dignissim lorem tincidunt vitae. Praesent non quam dui.

Now some sites will offer either a different bbcode tag for images that support wrapping, or separate tags for wrapping text around images. I'm no expert on bbcode or smf... so I can't really offer any insight into how this is done.

Title: Re: Wrapping text around images
Post by: LigH on February 03, 2012, 02:59:12 pm

I am not sure if this forum supports matching bbCode. Even if two boards use the same board software, they don't have to support the same set of bbCodes.

You may try [ left ] or [ right ] tags around your image, still I wouldn't expect success.

Title: Re: Wrapping text around images
Post by: Rigwyn on February 03, 2012, 06:20:32 pm

O_o This is a request for the addition of a feature as originally stated. ( see original post )

Title: Re: Wrapping text around images
Post by: Dannae on February 03, 2012, 06:24:52 pm

Maybe you can accomplish what you need to using tables like this:

Blah blah blah blabber blabber more blabber blah

Blah blah blah blabber blabber
more blabber blah

Blah blah blah blabber blabber more blabber blah Blah blah blah blabber blabber more blabber blah Blah blah blah blabber blabber more blabber blah Blah blah blah blabber blabber more blabber blah Blah blah blah blabber blabber more blabber blah

(http://www.2-clicks-swords.com/images/image/Captain-Jack-Sparrow-with-sword.jpg)Blah blah blah blabber

Code: [Select]

text
[table][tr][td]
[tr][td]
text[br] text
[/td][td]
[img]picture url[/img]text
[/td][td]
text
[/td][/tr][/table]
text

Edit: OOOPS! Looks like you already have used tables on the Black & Blue stories.

Title: Re: Wrapping text around images
Post by: bilbous on February 03, 2012, 06:25:32 pm

Did you have a look at this page (http://wiki.simplemachines.org/smf/Alphabetical_list_of_all_bulletin_board_codes) as linked to the help at the top of the page? It might have helped to have used the html tag

hmm seems to be silently discarded.

Title: Re: Wrapping text around images
Post by: Rigwyn on February 04, 2012, 12:43:38 am

Yes, I've tried tables as Dannae pointed out however the problem is that everyone's screen is a different size which breaks the illusion of wrapping when you resize the screen. The link below is a good example of how this illusion breaks when the size of the browser window changes:

http://www.hydlaaplaza.com/smf/index.php?topic=40558.msg455058#msg455058 (http://www.hydlaaplaza.com/smf/index.php?topic=40558.msg455058#msg455058)

The page that bilbous pointed out is good, however it does not show any tags for wrapping around images. I scoured this page previously.

Now, SMF does support this, I've set up other forums using SMF based myfreeforums.org and as I recall, the ability to use HTML tags was a feature that could be turned on and off via the administration panel. As for special BBcode tags for wrapping, I think that was something that an admin could optionally add -- it might be available via some sort of addon on plugin type feature. Again, this level of customization is something I've never dabbled with.

Title: Re: Wrapping text around images
Post by: bilbous on February 04, 2012, 05:50:40 am

I'm not certain but the html tag may allow inline css or even javascript but it may be disabled. I played with it minimally.

Title: Re: Wrapping text around images
Post by: Rigwyn on February 04, 2012, 10:20:34 am

Yeah, as demonstrated above its disabled. Turning it on might be one very simple solution.