How to create a custom image widget

#1 
\widget $image(tid,source,label)
<$parameters tid="" source={{!!_canonical_uri}} label={{!!label}}>
<$genesis
  $type="$image"
  $remappable="no"
  >
<$slot $name="ts-raw">
</$slot>
</$genesis>
<$tiddler tiddler=<<tid>> >
  <table>
    <tr>
      <td>
        <img src=<<source>> />
      </td>
      <td>
        <$transclude field=<<label>> />
      </td>
    </tr>
  </table>
  </$tiddler>
</$parameters>
\end

this custom widget should use a html table with image displayed in one column using _canonical_uri field and the label field of the image tiddler is transcluded in the second column. I am not getting the desired result with this code. Can someone give some suggestions?

#2

maybe this is what you want:

\widget $image(source)
<$parameters $params="all">
<table><tr><td>
    <$genesis   $type="$image"  $remappable="no" 	$names="[<all>jsonindexes[]]" 
                $values="[<all>jsonindexes[]] :map[<all>jsonget<currentTiddler>]"/>
</td><td>
    <$text text=`${[<source>get[label]]}$`/>
</td></tr></table>
</$parameters>
\end
1 Like
Bulk conversion of embedded image tiddlers into _canonical_uri tiddlers
#3

Thank you @buggyj . This will help me getting started. I want to add more features to image widget which are suited for my workflow. I need to experiment a little more.

#4

Is there any way to make this custom image widget display images from fields other than _canonical_uri

#5

I am not sure. It would be more flexible to use a procedure or a template.

#6 
\widget $image(source)
<$parameters $params="all">
<$list filter="[<currentTiddler>has[images]!has[label]]" variable="img-tids"> 
    <$genesis   $type="$image"  $remappable="no" source={{{ [<currentTiddler>get[images]] }}}/>
</$list>
<table><tr><td>
<$list filter="[<currentTiddler>has[images]has[label]]" variable="labelled-img-tids"> 
    <$genesis   $type="$image"  $remappable="no" source={{{ [<currentTiddler>get[images]] }}}/>
</$list>
</td>
</tr>
<tr>
<td>
    <$text text=`${[<currentTiddler>get[label]]}$`/>
</td></tr></table>
</$parameters>
\end

With the above code for the image widget, I was able to display the images stored in the images field of a tiddler using this image widget in the viewtemplate. Test this code in https://tiddlywiki.com/. Create a new tiddler with tag$:/tags/Macro/View/Body and the above given code in the text field.

Then use the below given code to create a image tiddler based on the images field rather than the _canonical_uri field and see it working.

<$button>
<$action-sendmessage $message="tm-new-tiddler" title="Blurry Lawn" images="./images/Blurry%2520Lawn.jpg" text="""<$image/>""" label="Blurry image with green grass with flowsers."/>
Create new Tiddler
</$button>

Now I want to include multiple images in the images field and display them. Is it possible to modify the code to support multiple images as shown in this post by @etardiff