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.
| Comment | File | Size | Author |
|---|---|---|---|
| #1 | BBCode-Test.png | 41.26 KB | guido666 |
| bbcode.png | 7.54 KB | guido666 |
Comments
Comment #1
guido666 commentedHere 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]
Comment #2
guido666 commentedI notice in the page header that it's not even loading any of the BBCode styles...
Should it be? How do I make it include them?
Comment #3
naudefj commentedYou 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