0

I have a Glossary channel on my site, with Term and Definition fields. I would like Terms to display their definitions throughout the site...whenever so assigned by the content editor.

I currently have Rich Text fields allowing editors to create links from Terms to their Definitions by using Link to an Entry. This is not great in terms of UX as it forces sends site visitors to the main Glossary index page to view the Definitions; I'd like to implement a hover text for the Terms that shows the Definition right there, wherever the visitor is reading.

How can I filter these rich text fields in the templates to check for links to Glossary entries and output a hover text instead of a link? I haven't written any custom plugins or filters (yet), so I'm looking for pointers in the right direction.

Any other approaches that might solve my problem are welcome.

Thanks in advance for your help.

1

Not really a craft solution — but easiest might be jquery/ajax. Since you know the base URI, you can just create a selector for the route, and work from there.

$("a[href*='route/to/definitions/']").each(function(){
    var $element = $(this);

    // ajax load content and place content in DOM somewhere
    $.get( $element.attr('href'), function(data) {
        $element.attr('data-definition') = data;
    });

    // click handler to prevent default link behavior
    $element.on('click', function(event){
        event.preventDefault()
    });

    // hover handler to display/hide definition
    $element.hover(displayDefinition, hideDefinition);
});

You could also potentially do a search/replace in twig, but it is not nearly as easy to manipulate as in js.

|improve this answer|||||
  • Thanks...interesting idea. I'm going to try it and see what I come up with. As a JS programmer, I should've thought of this one! ;-) – userAW Feb 20 '18 at 14:01
  • I'm waiting to see if anyone else comes up with a Twig solution before marking the correct answer...thanks. – userAW Feb 20 '18 at 14:01
  • Hmm, I'm looking at this again and don't really like it. This is really a back-end task, as JS is meant to be reserved for only user manipulations, not data cleaning. I'll have to think about this more. Still on the lookout for a good Twig answer :-) – userAW Feb 20 '18 at 23:43
  • @userAW The options are pretty limited when it comes to rich text fields unless you write your own redactor plugin. The only options that come to mind is either: 1) storing the reference url in the href link (as above), or 2) creating a separate relation list, and adding reference markers in the text (i.e. [1],[2],etc... similar to how markup links are defined). Either way you would need to use javascript to prep/clean html afterwards. The only advantage of using option 2, is that you could preload all the definitions in twig. But who knows, maybe someone else has a good idea. – Douglas McDonald Feb 21 '18 at 0:44
  • Can you direct me as to how to write my own Redactor plugin? – userAW Feb 21 '18 at 4:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.