Browse images on TW using AutoComplete + filter

Tips & Tricks
,
#1

I wanted an easy way of picking icons for tids. Enter the AutoComplete plugin and some filters.
firefox_5zfv3akwhH

How I did it

  1. Install AutoComplete
  2. Click Create a new trigger in AutoComplete’s control panel tab:image
  3. Fill in as below:
    image
    image479×937 23 KB

    The key thing is the filter: [is[tiddler]] :filter[get[text]prefix[<svg]] [is[image]] -[prefix[Draft of]] :filter[search:title<query>] which selects any tiddlers which either have the type image or whose text starts with <svg, and removes tiddlers whose title doesn’t include any search text entered.
  • I set the trigger (the key sequence I wanted to type to trigger completion) to _im
  • I checked Auto trigger on inputs as I wanted the sequence to trigger even on field boxes.
  • I set the template to $option$$caret$ (removing the [[ ]] which aren’t needed for the icon field. If you want to insert images in the body text, you’ll probably need something like {{$option$}}$caret$)

Thanks to @Maurycy for the AutoComplete plugin!

4 Likes
#2

I really need to add that Export Trigger button. Lovely use case!

#3

Is there any way that images could be displayed as part of the suggestions? Have tried inserting [img [xxxx]] and {{xxxx}} in Display Filter but no joy.