Loading...
 
Features / Usability

Features / Usability


Nesting Images in Ordered Lists

posts: 13 Canada

The Tiki site that I have built is primarily used to host instructional documents and I have run into an issue when trying to embed pictures into my wiki pages.

I am able to embed pictures into my pages and I am able to have the instructional text in an ordered list but I want the number scheme to continue past the pictures and this is where the problem comes in. Either the pictures will be given a number or the number will reset to 1 after the picture. I have been able to brute force my way past this using the "Source" editor by extending the <ol> tags to include all of the instructional text and removing the <li> tags from the images.

This works but if I switch back to the WYSIWYG editor it removes any text located above the image in the list and changes the remaining text below the image to an unordered list.

This is a big problem as most of the pages in my site will be attempting to create a layout like this.

Is there a fix for this or a best practice that I am not aware of?

posts: 3665 United States

Use a + to keep the image inline with the number, without resetting the list. For example, this:

Copy to clipboard
#First item #Second Item + {img src="https://tiki.org/img/noavatar.png"} #Third item


Will produce this:

  1. First item
  2. Second Item
    Image
  3. Third item



Please see the docs for details on creating lists.

HTH,

- Rick | My Tiki Blog | My Tiki UserPage

Why be a dummy? Get smarty! TikiForSmarties.com
Tiki for Smarties, your source for the best (and only) Tiki books, guides, and tutorials.
posts: 13 Canada
This works well for pages using Wiki Syntax but I have been using HTML encoding for all of my pages. Is there a fix for this as well?

posts: 4656 Japan

Tiki uses CKEditor 4 for its WYISIWYG editor, so maybe you can find an answer in the CKEditor docs, at http://docs.cksource.com/Main_Page. This may be an issue that other people using this editor have.

Personally, I haven't tried to do anything beyond simple layout with the WYSIWYG editor, as it seems fairly limited to me regarding layout and formatting capabilities, etc. But then I'm no CKEditor power user, so maybe checking with those people will help.

If it's problematic to edit raw HTML using that editor, I imagine that would be an argument to use the wiki editor instead, where either wiki syntax or raw HTML can be used with no problem. Then maybe the WYSIWYG plugin could be used for portions of the page, if that's advantageous, but have the wiki syntax editor as the default in order to handle the lists with images, etc.

-- Gary


posts: 3665 United States

If you're using the WYSIWYG editor, simply use a soft return (shift+Enter) before adding your image.
ImageList


Here's a sample I created on the Tiki demo site: https://demo.tiki.org/17x/tiki-index.php?page=imageList

I was able to switch back-and-forth between Wiki and WYSIWYG syntax, with no issues — no need to edit any of the actual HTML.

HTH,

- Rick | My Tiki Blog | My Tiki UserPage

Why be a dummy? Get smarty! TikiForSmarties.com
Tiki for Smarties, your source for the best (and only) Tiki books, guides, and tutorials.

posts: 13 Canada

Thank you! I just discovered the soft enter solution while searching through the CKEdit support forums.
Works perfectly!


Upcoming Events

1)  18 Apr 2024 14:00 GMT-0000
Tiki Roundtable Meeting
2)  16 May 2024 14:00 GMT-0000
Tiki Roundtable Meeting
3)  20 Jun 2024 14:00 GMT-0000
Tiki Roundtable Meeting
4)  18 Jul 2024 14:00 GMT-0000
Tiki Roundtable Meeting
5)  15 Aug 2024 14:00 GMT-0000
Tiki Roundtable Meeting
6)  19 Sep 2024 14:00 GMT-0000
Tiki Roundtable Meeting
7) 
Tiki birthday
8)  17 Oct 2024 14:00 GMT-0000
Tiki Roundtable Meeting
9)  21 Nov 2024 14:00 GMT-0000
Tiki Roundtable Meeting
10)  19 Dec 2024 14:00 GMT-0000
Tiki Roundtable Meeting