Transclusion of a image tiddler not retaining the lightbox style added via custom image widget

#1

This is a image tiddler with lightbox effect added via custom image widget.

\widget $image(source:"", width:"", height:"")
<$parameters $params="all">
<$list filter="[<currentTiddler>type[image/png]] [<currentTiddler>type[image/jpeg]]" variable="img-tids"> 
<$list filter="[<img-tids>get[_canonical_uri]splitregexp[\n]] +[unique[]]" variable="img-tids-field"> 
<$button tooltip=<<img-tids-field>> class="lightbox tc-btn-invisible" actions=<<image-widget-actions-img-tids>>>
    <$genesis   $type="$image"  $remappable="no" source=<<img-tids-field>>/>
</$button>
</$list>
</$list>
</$parameters>
\end

\procedure image-widget-actions-img-tids(img-tids)
<$list filter="[<modifier>match[normal]]" variable=nul>
<$action-sendmessage $message="tm-modal" $param="image-widget-modal-template" img-title={{{ [<img-tids>get[title]] }}} img-text=`<$image source="${ [<img-tids>get[_canonical_uri]splitregexp[\n]] }$"/>` img-label={{{ [<img-tids>get[label]] }}}/>
</$list>
<$list filter="[<modifier>match[alt]] [<modifier>match[meta]]" variable=nul>
<$action-navigate $to=<<img-tids>>/>
</$list>
\end

I use a custom viewtemplate body cascade to display the images using this custom image widget. What should I do to get the same lightbox effect of this custom image widget even when the image tiddler is transcluded in another tiddler like in this. May be use another viewtemplate body cascade ? How to create template for this cascade so that only the transcluded images are replaced with the custom image widget while rest of the contents of the tiddler remain the same ?

#2

I tried this viewtemplate cascade based on another code given by @etardiff previously. It works for tiddlers with single image transclusions. But duplication occurs if there are more than one image transclusion. Click on the image to see the lightbox effect.

Here is the code I tried.

<$list filter="[<currentTiddler>transcludes[]suffix[.jpg]] [<currentTiddler>transcludes[]suffix[.png]]" variable="image-tids">
<$let
	new=`<$image source="${ [<image-tids>get[title]] }$"/>`
	old=`{{$(image-tids)$}}`
  new-text={{{ [<currentTiddler>get[text]search-replace:g<old>,<new>] }}}
>
<$transclude $variable="new-text" $mode="block"/>

</$let>
</$list>
1 Like
#3

I think it’s not the right way to use the view-template cascade, since it only can detect the image with the tiddler type. If the tiddler is transcluded, this info is gone.

Since you already have a template that is used by the cascade, IMO you can use a transclusion with a template, which does not need a cascade.

You still can use the very first cascade you had in your wiki, to show the lightbox if the image tiddler is open.

If the below transclusion with a template is used, it should work.

{{second-test.jpg||$:/arsheth/cards-ui/viewtemplate/image}}
#4

My intention is to use this with the file uploads plug in. I don’t think the plug in support transclusions like this {{second-test.jpg||$:/arsheth/cards-ui/viewtemplate/image}}

I just want the regular transclusion of image tiddlers to have lightbox effect of the original image tiddler. Since my code works with single image transclusion within a single tiddler, I was thinking it might work with multiple image transclusions within a single tiddler with slight tweak in the code. Here is the original code given by @etardiff - Bulk conversion of embedded image tiddlers into _canonical_uri tiddlers - #5 by etardiff

I have a custom layout which uses another custom viewtemplate cascade. I will using this image cascade with that custom viewtemplate cascade. It will be confusing to others if I post the my custom layout and cascade. That’s why posted a simplified version here.

I use two different view-template cascades for image tiddlers and regular text tiddlers.
Did you checked these two examples - single-transclusion
and dual-transclusion

#5

I need to clarify that in tiddlers with multiple transclusion also lightbox effect is working, but such tiddlers show extra images for each transclusion that have no lightbox effect. I just need to tweak the code to remove those extra images. I don’t how to do that

#6 
<$let
   image-tids={{{ [<currentTiddler>transcludes[]suffix[.jpg]] [<currentTiddler>transcludes[]suffix[.png]] }}}
	new=`<$image source="${ [<image-tids>get[title]] }$"/>`
	old=`{{$(image-tids)$}}`
  new-text={{{ [<currentTiddler>get[text]search-replace:g<old>,<new>] }}}
>
<$transclude $variable="new-text" $mode="block"/>

</$let>

I removed the outer list widget from the first code. This prevent the duplication of content. However only one image transclusion is getting replaced with a custom image widget with this code. How can I make each image transclusion to be replaced with image widget ?

#7

The underlying issue here is that transcluding an image tiddler does not create an image widget. This is on my radar to address for v5.4.0

1 Like
#8

Hope to see this soon in the core.

For the time being I am thinking of splitting the tiddler text at the end of each image transclusion so that each portion contains only one image transclusion. Then to do search-replace for the image transclusion and join together the replaced split portions together. Hope that will solve the issue. I will return after testing that idea.

#9 
<$let
     lf={{{ [charcode[10]] }}}
	 png-rb=".png}}"
	 jpg-rb=".jpg}}"
     lb="{{"
     rb="}}"
>
<$list filter="[<currentTiddler>get[text]split<lf>]" variable="eachline">
<$list filter="[<eachline>suffix<jpg-rb>]" variable="jpg-eachline">
<$let
    jpg-image-tids={{{ [<jpg-eachline>removeprefix<lb>removesuffix<rb>] }}}
	old-jpg=`{{$(jpg-image-tids)$}}`
	new-jpg=`<$image source="${ [<jpg-image-tids>get[title]] }$"/>`
    new-jpg-eachline={{{ [<jpg-eachline>search-replace:g<old-jpg>,<new-jpg>] }}}
>

<<new-jpg-eachline>> 
</$let>
</$list>
<$list filter="[<eachline>suffix<png-rb>]" variable="png-eachline">
<$let
    png-image-tids={{{ [<png-eachline>removeprefix<lb>removesuffix<rb>] }}}
	old-png=`{{$(png-image-tids)$}}`
	new-png=`<$image source="${ [<png-image-tids>get[title]] }$"/>`
    new-png-eachline={{{ [<png-eachline>search-replace:g<old-png>,<new-png>] }}}
>

<<new-png-eachline>> 
</$let>
</$list>
<$list filter="[<eachline>!suffix<jpg-rb>!suffix<png-rb>]" variable="non-img-eachline">

<<eachline>> 
</$list>
</$list>
</$let>

This seems to solve the issue

#10

But there is one issue. This wont work if there is formatting like unordered list. How to make it work with such wikitext formatting also ?

#11 
     lb="{{"

How to modify this part of the code so that it covers all possibilities like {{ , * {{ , ** {{ , ** {{
Can any filter or regexp expert comment on this part ?