Inline [img] images get text wrapped
| Project: | Bbcode |
| Version: | 6.x-1.1 |
| Component: | Markup |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed |
I am wanting to add some images into an ordered list of instructions. Like...
1. Do this step 1
2. Do this step 2
+---------+
| IMAGE +
+---------+
3. Do this step 3
But when I use the [img] BBCode tags, I get very poor results. Like...
1. Do this step 1
2. Do this step 2 +---------+
| IMAGE +
+---------+3. Do this step 3
How can I fix this?
My code looks like...
[list=1][*]Dowload the file below. Usually you can just click on the link and the browser will prompt you where to save it.
[*]Run the file, usually by double-clicking on it from the location you saved it to. Some browsers give you the option to run the file after downloading.
[*]Leave this running, and set it aside.
[*]Open Windows Explorer (as in My Computer, not Internet Explorer).
[img]/sites/default/files/WindowsExplorer.png[/img]
[*]Navigate to your directory. By default, on a computer with Windows XP, this folder is [b]C:\Program Files\[/b]
[img align=left]/sites/default/files/FolderInExplorer.png[/img]
[*][b][color=#800000]IMPORTANT: If you have installed this before, you must remove old versions.[/color]I have tried many things, like adding a "BR" after and before the image, changing themes, putting it in "P" tags, and everything else I can think of.
The outputted HTML for the list item with the image looks like...
<li>Open Windows Explorer (as in My Computer, not Internet Explorer).
<img src="/sites/default/files/WindowsExplorer.png" alt="" class="bb-image" /><br />
</li>This seems ok to me.
For reference, phpBB with a similar inline image from BBCode looks like...
<li>Open Windows Explorer (as in My Computer, not Internet Explorer).<br />
<div class="inline-attachment">
<dl class="file">
<dt class="attach-image">
<img src="./download/file.php?id=60" alt="WindowsExplorer.png" onclick="viewableArea(this);" />
</dt>
<dd>WindowsExplorer.png (4.48 KiB) Viewed 2908 times</dd>
</dl>
</div>
</li>Most notable differences are CSS tags.
I notice BBCode includes a bbcode-test.css, but doesn't have any instructions on how / where to create your own, or if it's even using that one. I can't find any calls to bbcode-test.css in the code either.
Please help.
| Attachment | Size |
|---|---|
| bbcode.png | 7.54 KB |
#1
Here is the output of a page created using the bbcode-test.txt.
Look at the formatting, in the attached screenshot!
This view in this screenshot was created with the following code:
[h3]Images[/h3]
Normal image:
[img]http://drupal.org/themes/bluebeach/logos/drupal.org.png[/img]
Align image right:
[img align=right]http://drupal.org/themes/bluebeach/logos/drupal.org.png[/img]
Image with ALT description:
[img=The Dripal Logo]http://drupal.org/themes/bluebeach/logos/drupal.org.png[/img]
Re-sized image:
[img=100x50]http://drupal.org/themes/bluebeach/logos/drupal.org.png[/img]
[h3]URL's[/h3]
www.test-url.com
ftp.test-url.com
http://test-url.com/~user/,part,of,url
ftp://test-url.com:8080/
[url]http://test-url.com/[/url]
[url=http://test-url.com/?q=a+b&z=c]Test URL[/url]
#2
I notice in the page header that it's not even loading any of the BBCode styles...
<head>
<title>To install (WINDOWS XP ONLY)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="prev" href="/?q=node/5" />
<link rel="up" href="/?q=node/4" />
<link rel="next" href="/?q=node/7" />
<link rel="shortcut icon" href="/misc/favicon.ico" type="image/x-icon" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/aggregator/aggregator.css?g" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/book/book.css?g" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/node/node.css?g" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/poll/poll.css?g" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/system/defaults.css?g" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/system/system.css?g" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/system/system-menus.css?g" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/user/user.css?g" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/marinelli/style.css?g" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/marinelli/giordani/giordani.css?g" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="/sites/all/themes/marinelli/giordani/iestyles/ie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="/sites/all/themes/marinelli/giordani/iestyles/ie7.css" />
<![endif]-->
</head>
Should it be? How do I make it include them?
#3
You need to copy bbcode-test.css or your own custom CSS code to your site's global CSS file.
See http://drupal.org/cvs?commit=155781
#4
Automatically closed -- issue fixed for two weeks with no activity.