Numbered lists not working with images

[Ilmari Kumpula]

Hello!

I'm making a TiddlyWiki for my IT-company. The platform is great and i've written a tons of guides for people to utilize in their work. I use alot of hashtags with my pictures, since they really help to clarify the actions. However, if the picture is too small, then TiddlyWiki turns it into a mess, where words and pictures are not aligned right, but in mess. The pictures are in random sizes and vary greatly.

I have tried two pieces of codes (nevermind the language used, it's finnish). First way of entering the code makes the numbered list work correctly, but result in a mess of text and images. Second way alignes the pictures correctly, when i enter the picture code in a different row, but it makes my lists be just "1. 1. 1. 1...."

First way:
#Valitse printers ja hae tulostin. Valitse "Open"[img[kuvamateriaali\tulostin\kuva1.png]]

Second way:
#Valitse printers ja hae tulostin. Valitse "Open"
[img[kuvamateriaali\tulostin\kuva1.png]]

I've tried googling for solution, but i have only found 2009 solutions, which don't seem to work anymore.

Thanks,
Ilmari

[Jed Carty]

This is caused by how the numbered lists work in wikitext. Any lines between each # starts a new list. The simplest solution is to wrap each entry in a div element like this:

#<div>Valitse printers ja hae tulostin. Valitse "Open"
[img[kuvamateriaali\tulostin\kuva1.png]]
</div>
#<div>Valitse printers ja hae tulostin. Valitse "Open"
[img[kuvamateriaali\tulostin\kuva1.png]]
</div>


You can put almost anything inside the div without breaking the list numbering.

[Ilmari Kumpula]

I got the numbering to work, but especially the smaller pictures are displayed after the text now. I would need them all be aligned to the left, so the guides would look consistent with all pictures, irrelevant of the size, would be aligned right. I've added a picture to clarify this. Is there any way to force alignment of pictures to the left?

[Eric Shulman]

On Wednesday, March 16, 2016 at 11:19:52 PM UTC-7, Ilmari Kumpula wrote:

I got the numbering to work, but especially the smaller pictures are displayed after the text now. I would need them all be aligned to the left, so the guides would look consistent with all pictures, irrelevant of the size, would be aligned right. I've added a picture to clarify this. Is there any way to force alignment of pictures to the left?

You can use <br> to add a hard line-break just before each embedded image.  This will ensure that the images all start on a new line.  Assuming your numbered list is being left-aligned (the usual default), the images will be left-aligned (and also indented to match the margin of the text line above).

enjoy,

-e

Eric Shulman

TiddlyTools / ELS Design Studios

InsideTiddlyWiki: The Missing Manuals