• Resolved SJF

    (@sjf)


    Great plugin! The only caveat I’ve discovered is the inability to disable the glossary in edge-case areas. For instance, I have a term as the text of a button on a page where I do not want to disable the glossary for the entire page, but simply the button (or, entire row of buttons).

    My not-so-elegant approach, which seemed to work until this button scenario, was an ugly jQuery bandaid:

         $('.disable-glossary').find('.glossary-link a').contents().unwrap().unwrap().unwrap();
         $('.disable-glossary').find('.glossary-tooltip-content').remove();

    Is there a way, even in my functions.php file, to say “Hey Glossary Plugin, ignore anything inside of elements with the class .disable-glossary”? Ideally there’d be a setting where you could add selectors to ignore (such as by ID, class, or element) but a simple ignore-by-class-name fix would work for me.

    Thoughts? Thanks!

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author Eugenio Petulla’

    (@igenius)

    Hello SJF, thank you for reporting this.

    I can suggest another tweak in order to avoid this behaviour, just wrap the term between an anchor like this:

    <button><a>DoNotLinkThis</a></button>

    This will prevent the spawn of the term. Obviously is just a tweak and we’ll have to work on this in order to fix it and detect also button elements but for the moment could be a good go-to option ??

    I’m going to open an issue on our tracker and probably this fix will be in the next release.

    Thread Starter SJF

    (@sjf)

    Thanks @igenius for the workaround! We’ll try to use this for the time being but would really love it if there was a way to just add a class to a parent element to disable the glossary plugin from affecting anything within that element.

    The workaround you’ve given us will work as we develop our site but most likely can’t be a permanent fix. We’re welcome to the idea of a custom function, too, which could extend the functionality of glossary using our functions.php – if that’s something you can provide. I’m unsure exactly how that would work, but maybe there’s a way for us to hook a command that says “Hey Glossary – as you’re scoping the site, skip anything inside of .disable-glossary” – is this something you might be able to lead us in the right direction with as well?

    Thanks for your support, and we look forward to this update / a possible code to add this functionality!

    Plugin Author Eugenio Petulla’

    (@igenius)

    @sjf I think that a class is not a viable option because people are not used to put HTML attributes directly in the content and generally it’s not a good practice to do it. We are discussing on our internal tracker about implementing a specific shortcode in order to ignore terms in the content.

    Eg. [glossary-ignore]TERM TO IGNORE[/glossary-ignore]

    For your last request I think it’s not possible to provide you a filter or something similar in order to be used in your functions.php because of the nature of our “term search engine” that is a very complex Regex that parses the content.

    Feel free to report here all the edge cases you found and we will be happy to work on the regex in order to catch those exceptions with the engine. I hope the new shortcode will easily do the rest of the work ??

    Thread Starter SJF

    (@sjf)

    I can appreciate the best practice approach, for sure. I’m just unsure if the [glossary-ignore] shortcode approach will work for actual use-cases out there. It really just depends on the logic the shortcode uses.

    Let’s use your 3-column pricing table on your site as an example. Let’s say you have the word “tooltip” in your glossary, and you do not want the entire page to disable the glossary… but you also do not want to have to put [glossary-ignore] around every… single… instance… of “tooltip”, right? So, would the shortcode be able to surround a group of elements?

    For instance… let’s say this was how the code was, in the site editor, where you lay out the pricing table, text, images, etc:
    [glossary-ignore]
    <div>A bunch of other stuff here</div>
    [maybe even="a shortcode] or two [/maybe]
    [/glossary-ignore]

    Given that scenario… would your proposed [glossary-ignore] work in ignoring all terms in between? If so, fantastic!

    Thread Starter SJF

    (@sjf)

    Here’s an actual use case, which will give an example of what I mean.

    Figure 1
    Inside of our editor, there’s a spot to place text (denoted by the red arrow here). You can also see, right below it, the HREF for the “button”, which is really just <a class="x-btn">Button</a>

    Figure 2
    On the front-end, you can see how this renders in the source code. The term here is “phases”. For the heading above the button (Training Phases) I put <a>Training Phases</a> as a temporary workaround… since that’s bad practice… but still, you can see how when it affects the “phases” term in the button, since it’s already in an <a> tag, it unwraps itself of it and breaks the button <a> tag.

    Figure 3
    Here’s the <a> tag fix in the back-end. You can see what happens is the link hops out of the button link, since WordPress detects two anchor tags and unwraps itself.

    Figure 4
    And here you can see the front-end view of what happens when we surround the text with <a>

    Plugin Author Eugenio Petulla’

    (@igenius)

    It will work excatcly like you described in the post, if you wrap some content with the shortcode our search engine will ignore ALL the content inside it. We are planning to implement it as a shortcode just because this kind of markers are easy to detect if mixed in HTML (and this is the reason why not only WordPress used square brackets for this purpose).

    Better Eg. [glossary-ignore]A lot of text mixed with some terms that we have to ignore and some HTML <a href="#" target="_blank" rel="nofollow">tags</a> that I don't want to pass to our plugin's parser[/glossary-ignore]

    Talking about the workaround, I’m honestly confused because I can’t recognize this editor. Is it some sort of page builder? How the content is passed to front-end? Is it a shortcode based editor?

    It looks like the builder passes the values you put inside it to front-end using shortcodes. This is not a great solution in my personal opinion, our engine actually avoids to parse links and <a> tags if you put it in the content directly (you can try with the classic WordPress editor) so it’s a very strange behavior. In first instance I thought that you had a simple <button> tag to ignore but now I understood that you have an anchor with a button class.
    This depends a lot on your page builder. Page builders are the evil in my opinion because you lose control on filters priority, specially the builders that make an intensive use of shortcodes in order to render the content.

    By the way, let us know what builder is so we can try to find a specific solution (if it’s open source and free) or just wait for our wrapping shortcode so you can use what you want in the page without any hassle. ??

    Thread Starter SJF

    (@sjf)

    This is X theme by Themeco with their editor Cornerstone. While Cornerstone and X Theme are REALLY amazing, I completely get where you’re coming from with the opinion that “page builders are the evil”. There are definitely times when I wish there was more control, but unfortunately there’s no turning back for this particular project (deadlines will be deadlines!)

    I’ve extracted Cornerstone’s output for that “Training Phase” column so I can show you what I’m working with. Now… don’t freak out… there’s a lot of evil in store here!
    [cs_column bg_color="hsl(0, 0%, 93%)" fade="false" fade_animation="in" fade_animation_offset="45px" fade_duration="750" type="1/3" class="cs-ta-center" style="padding: 0 4em 2em;"][x_icon type="sitemap" icon_color="" bg_color="" icon_size="50px" bg_size="" bg_border_radius=""][x_custom_headline level="h3" looks_like="h4" accent="false"]Training Phases[/x_custom_headline][cs_text]Quisque velit nisi, pretium ut lacinia in, elementum id enim.[/cs_text][x_button size="global" block="false" circle="false" icon_only="false" href="/new-users/training-phases/" title="" target="" info="none" info_place="top" info_trigger="hover" info_content=""]View Phases[x_icon type="angle-double-right" class="mvn mls mrn"][/x_button][/cs_column]

    Now, this is automagically rendered out into the screenshot I shared above, and like I said – while I definitely agree with your opinion about editors, they’re unfortunately a necessary evil out in the realm of WP. So some sort of compatibility w/ shortcodes and front-end editors is a must for plugins in general to be successful. I think the trick here is somehow parsing the other plugins’ shortcodes without executing them (yet) OR first execute the shortcodes and THEN add the glossary code.

    I tried this code out, for fun:

    function returnContent($atts, $content = null){
      return '...Start content:::   '.$content.'   :::End content...';
    }
    add_shortcode('return_content', 'returnContent');
    

    …and that didn’t really work when I placed the opening and closing tags as separate elements surrounding the row. (page-builder view & front-end view)

    I’m wondering what the trick would be to ignore the page-builder’s (Cornerstone’s) shortcodes until the glossary is done doing it’s thing… and then executing them, or rendering the built page before Glossary and then having Glossary do its thing?

    Thank you very much for your time & feedback!

    I am studing with experiment and unit tests for it.
    The issue that glossary is executed before the shortcode to avoid conflicts with other output so we cannot use a shortcode. At the same time I’m evaluating a way to wrap the content and ignore by the regex but I am working on it ??

    Thread Starter SJF

    (@sjf)

    @mte90 any update on this? ??

    I done different experiments but without success because regex are not done to parse HTML.
    Actually for us is impossible to ignore tags or shortcodes with specific classes as output in html so we put a low priority on that until we define if to do a new engine or maintain this one.

    Plugin Author Daniele Scasciafratte

    (@mte90)

    The next version 1.5 will have a shortcode [glossary-ignore]your text[/glossary-ignore] that will enable to ignore the text inside.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Disable Glossary from affecting terms inside of an element with specified class?’ is closed to new replies.