Adding a link with a external image OR how to remove the [[ from the link

#1

Hi
I’m creating “redirect” tiddler for fun. If the tiddler has a certain field, it will get the first line of the tiddler content (that is a link):
[[Redirect or Ref Link]]

I need to extract or find a way to place the link. I have tried (following endless AI examples), but I’m not getting there.
The end goal is very simple :

<$link to=<<link>>>
      <$image source="https://site.xyz/image.jpg"  />
</$link>

So now the issue:
1 - Get the tiddler first line = OK
2 - the <<link>> #1 it’s in fact the tiddler link
3 - How do I place it ? Using <$link to=<<link>> #1 it’s a literal [[link]]
4 - Convert it to a string ?

Don’ t know.

Tiddler content:

[[Redirect or Ref Link]]

<$let link={{{ [<currentTiddler>get[text]splitregexp[\n]first[]] 
}}}>

* <<link>> (OK: link `http://192.168.1.8:4444/#Redirect%20or%20Ref%20Link`)

<$vars textlink=<<link>>>

* string: <$text text=<<textlink>>/> (it's a string)
	
<$let clean_string={{{ [<textlink>removeprefix<x>removesuffix<y>] }}} x="[[" y="]]">

* string: <$text text=<<clean_string>>/> `(Didn't remove the [[]])`
</$let>
	
<$link to=<<textlink>>>
      <$image source="https://site.xyz/image.jpg"  />
</$link>

* the ''textlink'' is now`http://192.168.1.8:4444/#[[Redirect%20or%20Ref%20Link]]` 

</$vars>
</$let>

Any help would be great ! Thanks

[edited] #1 to make code visible by wrapping in backticks

#2

You need to define x and y before referencing them!
<$let x="[[" y="]]" clean_string={{{ [<textlink>removeprefix<x>removesuffix<y>] }}}>

You might also consider using trim instead of removeprefix/removesuffix, like this:
<$let x="[[" y="]]" clean_string={{{ [<textlink>trim<x>trim<y>] }}}>

This allows the filter to work on links even if they are not enclosed by [[ and ]].

-e

1 Like
#3

the amount of pain to do this, just to put an Asterix catapult image… Thanks!

[[Something]]

<$let link={{{ [<currentTiddler>get[text]splitregexp[\n]first[]] 
}}}>
<$vars textlink=<<link>>>
<$let x="[[" y="]]" clean_string={{{ [<textlink>trim<x>trim<y>] }}}>
<$link to=<<clean_string>>>
      <$image source="https://www.olivierandrieu.fr/wp-content/uploads/2023/12/facteurrhesus-1024x341.jpg"  />
</$link>
</$let>
</$vars>
</$let>
#4

This can be simplified:

[[Something]]

<$let x="[[" y="]]">
<$link to={{{ [{!!text}splitregexp[\n]first[]trim<x>trim<y>] }}}>
[img[https://www.olivierandrieu.fr/wp-content/uploads/2023/12/facteurrhesus-1024x341.jpg]]
</$link>
</$let>

-e

1 Like
#5

Or if the first line of the text field is always a link, further simplified with enlist-input…

[[Something]]

<$link to={{{ [{!!text}splitregexp[\n]first[]enlist-input[]] }}}>
[img[https://www.olivierandrieu.fr/wp-content/uploads/2023/12/facteurrhesus-1024x341.jpg]]
</$link>

Alternatively… @mesnitu, does the link need to be in the first line of the text field for other (display?) reasons? If not, a much simpler alternative would be to give each tiddler a separate field (perhaps link) and put your (unbracketed) link destination there. Then you could do the following:

<$link to={{!!link}}>
      <$image source="https://site.xyz/image.jpg"  />
</$link>

Or if you do want to keep the text link visible in the tiddler body:

<$link to={{!!link}} />

<$link to={{!!link}}>
      <$image source="https://site.xyz/image.jpg"  />
</$link>
#6

Thanks! The “idea” is to play with the fields also. But as I have to search for the link most of the times, and copy / paste to the extra field, sometimes that’s going to happen, other, just a link it’s quicker, and I’m happy looking at the cartoon… and yeah … can’t really explain it.

So the solution is ok, but I’ll ask something else about this.
How to prevent the image from showing if the tiddler is empty: <%if [<currentTiddler>get[text]!is[blank]] %> should work ?
or because the reveal, the tiddler is never empty?

Thanks and sorry, but this is very new to me.

<$reveal type="match" state="!!entidade-tipo" text="catapulta" tag="div">
  <%if [<currentTiddler>get[text]!is[blank]] %>
    <$let x="[[" y="]]">
      <$link to={{{ [{!!text}splitregexp[\n]first[]trim<x>trim<y>] }}}>
        [img[https://www.olivierandrieu.fr/wp-content/uploads/2023/12/facteurrhesus-1024x341.jpg]]
      </$link>
    </$let>
  <%endif%>
 </$reveal>
#7

This should work, in theory (though you can omit !is[blank], since get automatically discards blank results). However, if you’re putting this image-link code directly into the text field of the tiddler where it will be displayed, then as you said, the text field can’t be empty.

Instead, I’d recommend moving all your above code into a separate tiddler which will serve as a ViewTemplate segment.

  • Give your new tiddler the tag $:/tags/ViewTemplate.
  • In the $:/tags/ViewTemplate tagpill, drag your new segment into the position where you’d like it to appear relative to the other ViewTemplate segments (possibly above or below $:/core/ui/ViewTemplate/body?)

This will have two major advantages:

  1. You won’t have to paste the same code into multiple tiddlers.
  2. Your text field can be truly empty.

However, you may not actually want the image to be displayed everywhere — perhaps only on tiddlers with a given field…

In that case, you may want to further modify the conditional so its contents is only displayed if the tiddler has a non-blank text field and whatever other field you’re using for this category of tiddler:

<%if [<currentTiddler>has[myfield]has[text]] %>

Like get, has (by default) only returns a value if the field in question isn’t blank. The difference is that get returns the contents of that field, while has returns the title of the tiddler — in this case, <<currentTiddler>>. For a conditional like this one, you don’t necessarily need the field value, so has should be fine.