Display images in modal using custom image widget

#1

I have image tiddlers with images field storing the relative path of the images to be displayed. Images are displayed in the image tiddlers using viewtemplate cascade and a custom image widget.

Then I am using these image tiddlers in another note tiddler using custom image widget (with source parameter being the title of the image tiddler). I am planning to add a modal button to the custom image widget to open the image tiddler in a modal window from within the note tiddler. I tried soo much but the image is not getting displayed, only the title of the image tiddler is shown in the modal.

Here is the example note tiddler - My TiddlyWiki — a non-linear personal web notebook

Here is the custom image widget - My TiddlyWiki — a non-linear personal web notebook

\widget $image(source)
<$parameters $params="all">
<$list filter="[<currentTiddler>!has[images]]"> 
<table style="border:none;"><tr style="border:none;">
<td style="border:none;">
<$list filter="[<source>get[images]splitregexp[\n]] +[unique[]]" variable="tids-imgs" >
<$genesis   $type="$image"  $remappable="no" source=<<tids-imgs>> />
</$list>
</td>
</tr>
<tr style="border:none;">
<td style="border:none;">
<$transclude $tiddler=<<source>> $field="label" $mode="block"/>
<br>
<$link to=<<source>> ><$transclude $tiddler="$:/core/images/link" size="10px"/></$link>
<$button tooltip=<<source>>>
<$action-sendmessage $message="tm-modal" $param=<<source>> />
{{$:/images/phosphor-icons/light/airplay-light}}</$button>
</td></tr></table>
</$list>
<$list filter="[<currentTiddler>has[images]!has[label]]" variable="img-tids"> 
<$list filter="[<img-tids>get[images]splitregexp[\n]] +[unique[]]" variable="img-tids-field"> 
    <$genesis   $type="$image"  $remappable="no" source=<<img-tids-field>>/>
</$list>
</$list>
<$list filter="[<currentTiddler>has[images]has[label]]" variable="labelled-img-tids"> 
<table style="border:none;"><tr style="border:none;"><td style="border:none;">
<$list filter="[<labelled-img-tids>get[images]splitregexp[\n]] +[unique[]]" variable="labelled-img-tids-field"> 
    <$genesis   $type="$image"  $remappable="no" source=<<labelled-img-tids-field>>/>
</$list>
</td>
</tr>
<tr style="border:none;">
<td style="border:none;">
<$transclude $tiddler=<<currentTiddler>> $field="label" $mode="block"/>
</td></tr></table>
</$list>
</$parameters>
\end

I have put all the relevant tiddlers in the storyriver of this wiki - https://modal-for-custom-image-widget.tiddlyhost.com/

#2 
<$button tooltip=<<source>>>
<$action-sendmessage $message="tm-modal" $param=<<source>> />
{{$:/images/phosphor-icons/light/airplay-light}}</$button>

This is the specific part of the code concerned with modals. Can someone help ?

#3

Since the modal $param=<<source>>, it uses the <<source>> value (the name of the image tiddler) as the default modal title, the text field content from that image tiddler as the modal body, and a modal footer with a default “close” button.

For your “image-1” tiddler, the text field has no content, so the modal window does not show any content.

To have the modal display some content, edit the “image-1” tiddler and add the following text content:

<$image width="100%" height="100%" source={{!!images}}/>

-e

#4

Is there any way to use a template instead of adding the content to the text field

#5

I made a little more advancement in this

I created a image-widget-modal-template tiddler with the following contents

        "text": "<<img-text>>",
        "title": "image-widget-modal-template",
        "footer": "<$button message=\"tm-close-tiddler\">Close</$button>",
        "subtitle": " <<img-title>>",

I modified the modal portion of the code like this

<$list filter="[<source>get[images]splitregexp[\n]] +[unique[]]" variable="tids-imgs" >

<$action-sendmessage $message="tm-modal" $param="image-widget-modal-template" img-title={{{ [<source>get[title]] }}} img-text=`<$image source=<<tids-imgs>>/>` />

Now the title of the image tiddler is getting rendered correctly in the modal, but image part is still buggy

Here is another code tested

<$action-sendmessage $message="tm-modal" $param="image-widget-modal-template" img-title={{{ [<source>get[title]] }}} img-text=`<$image source=<<source>> />` />
#6 
<$action-sendmessage $message="tm-modal" $param="image-widget-modal-template" img-title={{{ [<source>get[title]] }}} img-text=`<$image source="${ [<source>get[images]splitregexp[\n]] +[unique[]] }$"/>` />

This solved the problem atleast partially. Now only one thing is left- if the images field of the image tiddler contain image-path of more than one images, only one image is displayed in the modal

#7

I have now incorporated @telumire lightbox macro into the custom image widget. So if you just click on the image, the lightbox like modal opens with the label at the top.

image
image1920Ă—1085 210 KB

1 Like