Once you have those three tiddlers in your TiddlyWiki, save and reload. Add the macro from "For the view template" to the top your view template tiddler.
- Now everytime you edit and save a tiddler, the excerpt field will be auto-populated. - The macro in the view template will help generate the appropriate attribute on the html of every link to support tippy.js The missing piece then is adding tippy.js to your static site and initializing it. Good night! On Tuesday, April 21, 2020 at 1:24:10 AM UTC+2, Anne-Laure Le Cunff wrote: > > You should get some sleep! :) I'm super grateful for your help, thank you! > > On Tuesday, April 21, 2020 at 12:17:59 AM UTC+1, Saq Imtiaz wrote: >> >> I am running on not much sleep which probably isn't helping with writing >> the most coherent explanations :) >> >> Have a look at https://saqimtiaz.github.io/sq-tw/tooltips-tippyjs.html >> >> Of the open tiddlers examine and import to your TW the following (after >> backing up your data). >> >> $:/config/ui/EditTemplate >> $:/MyEditTemplate >> $:/sq/LinkWidgetTweak >> >> from the tiddler "For the view template" copy the macro >> tv-wikilink-excerpt to the top of your custom view template (which you >> posted in the thread earlier). >> >> Lastly, in the tiddler "For the view template" inspect the html for the >> link to HelloThere. >> >> >> >> On Tuesday, April 21, 2020 at 1:07:25 AM UTC+2, Anne-Laure Le Cunff wrote: >>> >>> Thanks Saq! I probably didn't understand step 2 properly, since this is >>> what I get when I click the "+" to create a new tiddler: >>> >>> [image: Screenshot 2020-04-21 at 12.05.40 AM.png] >>> >>> >>> On Monday, April 20, 2020 at 11:57:44 PM UTC+1, Saq Imtiaz wrote: >>>> >>>> Anne-Laure: No. Create a new tiddler with any title (e.g >>>> MyCustomEditTemplate) , and paste the contents I provided into it. No tag >>>> needed. >>>> >>>> Step 2, where we edit $:/config/ui/EditTemplate and replace the >>>> contents with the title you used in Step 1 (MyCustomEditTemplate), tells >>>> TiddlyWiki to use an entirely different EditTemplate instead of the >>>> default >>>> one. >>>> >>>> The tag $:/tags/EditTemplate is used when you want to add something to >>>> the existing template, we are replacing it entirely, so as to override the >>>> macro that dicatates what happens when we save a tiddler. So do not tag >>>> the >>>> tiddler you create in step 1. >>>> >>>> Regards, >>>> Saq >>>> >>>> >>>> >>>> On Tuesday, April 21, 2020 at 12:47:56 AM UTC+2, Anne-Laure Le Cunff >>>> wrote: >>>>> >>>>> Hi Saq, >>>>> >>>>> Thanks so much for this! >>>>> >>>>> Sorry for the newbie question, but can you confirm creating an Edit >>>>> Template consists in tagging the Tiddler with $:/tags/EditTemplate >>>>> <https://tiddlywiki.com/static/SystemTag%253A%2520%2524%253A%252Ftags%252FEditTemplate.html> >>>>> ? >>>>> >>>>> Thank you! >>>>> Anne-Laure. >>>>> >>>>> On Monday, April 20, 2020 at 8:58:06 PM UTC+1, Saq Imtiaz wrote: >>>>>> >>>>>> Try the following: >>>>>> >>>>>> 1) Backup your data, this is untested. >>>>>> >>>>>> 2) Save this as a custom Edit Template, say with title MyEditTemplate: >>>>>> >>>>>> \define save-tiddler-actions() >>>>>> <$action-sendmessage $message="tm-add-tag" $param={{{ >>>>>> [<newTagNameTiddler>get[text]] }}}/> >>>>>> <$action-deletetiddler $tiddler=<<newTagNameTiddler>>/> >>>>>> <$action-sendmessage $message="tm-add-field" $name={{{ >>>>>> [<newFieldNameTiddler>get[text]] }}} $value={{{ >>>>>> [<newFieldValueTiddler>get[text]] }}}/> >>>>>> <$action-deletetiddler $tiddler=<<newFieldNameTiddler>>/> >>>>>> <$action-deletetiddler $tiddler=<<newFieldValueTiddler>>/> >>>>>> <$wikify name="tooltip" text={{!!text}}> >>>>>> <$action-sendmessage $message="tm-add-field" $name="excerpt" >>>>>> $value={{{ [<tooltip>split[]first[120]join[]] }}} /> >>>>>> </$wikify> >>>>>> <$action-sendmessage $message="tm-save-tiddler"/> >>>>>> \end >>>>>> <div data-tiddler-title=<<currentTiddler>> data-tags={{!!tags}} >>>>>> class={{{ tc-tiddler-frame tc-tiddler-edit-frame >>>>>> [<currentTiddler>is[tiddler]then[tc-tiddler-exists]] >>>>>> [<currentTiddler>is[missing]!is[shadow]then[tc-tiddler-missing]] >>>>>> [<currentTiddler>is[shadow]then[tc-tiddler-exists tc-tiddler-shadow]] >>>>>> [<currentTiddler>is[system]then[tc-tiddler-system]] [{!!class}] >>>>>> [<currentTiddler>tags[]encodeuricomponent[]addprefix[tc-tagged-]] >>>>>> +[join[ >>>>>> ]] }}}> >>>>>> <$fieldmangler> >>>>>> <$vars storyTiddler=<<currentTiddler>> newTagNameTiddler=<<qualify >>>>>> "$:/temp/NewTagName">> newFieldNameTiddler=<<qualify >>>>>> "$:/temp/NewFieldName">> newFieldValueTiddler=<<qualify >>>>>> "$:/temp/NewFieldValue">>> >>>>>> <$keyboard key="((cancel-edit-tiddler))" message="tm-cancel-tiddler"> >>>>>> <$keyboard key="((save-tiddler))" actions=<<save-tiddler-actions>>> >>>>>> <$list >>>>>> filter="[all[shadows+tiddlers]tag[$:/tags/EditTemplate]!has[draft.of]]" >>>>>> variable="listItem"> >>>>>> <$set name="tv-config-toolbar-class" >>>>>> filter="[<tv-config-toolbar-class>] >>>>>> [<listItem>encodeuricomponent[]addprefix[tc-btn-]]"> >>>>>> <$transclude tiddler=<<listItem>>/> >>>>>> </$set> >>>>>> </$list> >>>>>> </$keyboard> >>>>>> </$keyboard> >>>>>> </$vars> >>>>>> </$fieldmangler> >>>>>> </div> >>>>>> >>>>>> 3) edit $:/config/ui/EditTemplate and replace its content with the >>>>>> title of the template tiddler you created in #2 above, so that our new >>>>>> edit >>>>>> template is used >>>>>> >>>>>> 4) Try editing and saving any tiddler, an excerpt should get saved >>>>>> into a field called "excerpt" >>>>>> >>>>>> 5) use the excerpt field for the tooltip, you could also rename to >>>>>> caption. >>>>>> >>>>>> 6) if all the above steps work reliably (and I believe they should), >>>>>> next step could be to look into outputting html that would support >>>>>> dropping >>>>>> in a library like tippy.js in the static version to control the display >>>>>> of >>>>>> the tooltip. Tippy.js expects an attribute >>>>>> data-tippy-content >>>>>> on links that contains the tooltip text to display. >>>>>> >>>>>> Hope this helps, >>>>>> Saq >>>>>> >>>>>> On Monday, April 20, 2020 at 9:39:54 PM UTC+2, Anne-Laure Le Cunff >>>>>> wrote: >>>>>>> >>>>>>> @Saq - thank you for confirming! Didn't realise these were generated >>>>>>> on demand. That explains why it doesn't work with the static website. >>>>>>> >>>>>>> @Diego - totally missed that previous message. Thank you! Yes this >>>>>>> is exactly what I want. >>>>>>> >>>>>>> So, just to recapitulate where I'm at, I used a couple of solutions >>>>>>> that more or less worked once exported as a static website: >>>>>>> >>>>>>> *1)* Old school iframe which works on static website but doesn't >>>>>>> look great (see here <https://notes.nesslabs.com/about>, hover your >>>>>>> mouse on "Other Minds") >>>>>>> *2)* Transclude caption into "tooltip" (which unfortunately uses >>>>>>> the default "title tooltip" from the browser so takes a long time to >>>>>>> show >>>>>>> up) >>>>>>> >>>>>>> *\define tv-wikilink-tooltip()* >>>>>>> *<$transclude field="tooltip"><$transclude >>>>>>> field="caption"/></$transclude>* >>>>>>> *\end* >>>>>>> >>>>>>> *Here is a link to [[Title of Tiddler]] with a custom tooltip.* >>>>>>> >>>>>>> And I added a "caption" field to each Tiddler. Works once exported >>>>>>> to static website. Pretty happy with this except that the tooltip takes >>>>>>> a >>>>>>> long time to appear. I much prefer the look and speed of the ones in >>>>>>> Tobi >>>>>>> Beer's plugin. >>>>>>> >>>>>>> --- >>>>>>> >>>>>>> *3)* Use Tobi Beer's plugin >>>>>>> <http://tobibeer.github.io/tw5-plugins/#preview>, which transcludes >>>>>>> the whole target article (see demo >>>>>>> <https://ybalkind.github.io/tryingtiddlywiki/#How%20I%20use%20this%20blog>, >>>>>>> >>>>>>> maybe a bit over the top). Works great on TW itself but doesn't work >>>>>>> (as >>>>>>> Saq confirmed) when exported to a static website. >>>>>>> >>>>>>> So my question is... Do you think there's a way to implement #2 >>>>>>> (display caption field in tooltip) with the look and speed of #3 (Tobi >>>>>>> Beer's plugin)? >>>>>>> >>>>>>> Sorry for the rambling, and thanks so much for your help! >>>>>>> >>>>>>> >>>>>>> On Monday, April 20, 2020 at 8:26:17 PM UTC+1, Diego Mesa wrote: >>>>>>>> >>>>>>>> Anne-Laure, >>>>>>>> >>>>>>>> For reference/completion, Tobi Beer's plugin was also the solution >>>>>>>> I proposed in this thread you started about "how to show link preview >>>>>>>> on >>>>>>>> hover in static websites" not that long ago: >>>>>>>> >>>>>>>> https://groups.google.com/d/msg/TiddlyWiki/_7ozNvkpPVg/vHXL1Ae4AgAJ >>>>>>>> >>>>>>>> Diego >>>>>>>> >>>>>>>> On Monday, April 20, 2020 at 2:03:12 PM UTC-5, Anne-Laure Le Cunff >>>>>>>> wrote: >>>>>>>>> >>>>>>>>> I found this amazing plugin >>>>>>>>> <http://tobibeer.github.io/tw5-plugins/#preview> by Tobi Beer >>>>>>>>> which does almost exactly what I want — thanks Yoni for sharing the >>>>>>>>> link! >>>>>>>>> >>>>>>>>> Does anyone have a guide / any clue as to how the same behaviour >>>>>>>>> could be preserved when exporting to a static website? (I have the >>>>>>>>> Node.js >>>>>>>>> version of TW installed) >>>>>>>>> >>>>>>>>> Thanks so much. >>>>>>>>> >>>>>>>>> On Monday, April 20, 2020 at 5:39:53 PM UTC+1, Anne-Laure Le Cunff >>>>>>>>> wrote: >>>>>>>>>> >>>>>>>>>> That's a great idea, thank you! >>>>>>>>>> >>>>>>>>>> On Monday, April 20, 2020 at 3:18:08 PM UTC+1, Saq Imtiaz wrote: >>>>>>>>>>> >>>>>>>>>>> If you would like to automate generating the caption, perhaps >>>>>>>>>>> look into generating and saving and excerpt in the caption field >>>>>>>>>>> when a >>>>>>>>>>> tiddler is saved? >>>>>>>>>> >>>>>>>>>> -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/66477f31-a708-4487-b3cb-05fe16226f95%40googlegroups.com.
