Is there a way to show anchors in the visual editor (e.g., with a glyph)? Then I could look at the existing anchors to determine where there might be missing anchors. Otherwise, I have to look at the code to check everywhere for possible missing anchors.
Thanks,
Don C.
RobM –
See the yellow anchor glyphs in front of “Cross references” and “Nomenclature”, corresponding to the
code. (This is from Dreamweaver CS6.) Then if any topic doesn’t have an anchor, it is easy to spot in the visual editor, rather than having to comb through the code.
Hi @dculp,
There isn’t anything like that built into Pinegrow, but you can use the search box at the top of the Tree panel to find all of the links. Just enter $a into the box. You could then step through all of the search results to see if any need an anchor.
Alternatively, you could write some temporary styling that would add a before element to all of the links to show the glyph.
Cheers,
Bob
Can you explain (perhaps show some short code).
To clarify – I only want to show existing anchors so that I can do a quick visual scan to find missing anchors that I know should be there (for example, topic headings that should correspond to a table of contents).
I wouldn’t want to manually add temporary styling since this would defeat the benefit of doing an easy quick scan. Also, this should be available on existing pages, not just new pages, so that these pages could also be checked, if desired. Therefore, I assume that this would have to be part of a style sheet. Perhaps there could be some kind of conditional statement that could be added to a page to enable/disable the temporary styling (default to disable).
Hey @dculp,
Hmmm, not sure there is an easy solution. The styling itself is minimal
a::before {
content: "\2022";
color: red;
}
Or something similar.
The tough part is to make it conditional AND applied to multiple pages. You can use a script for the conditional part, but then that script would have to be added to every page you wanted to check.
You could do it with a plugin that extends Pinegrow, but I can’t figure out another way.
Cheers,
Bob
Hi Again @dculp,
I’m an idiot!! I was thinking about ways to modify the page and forgot about other tools built into Pinegrow! If you go into the search box at the top of the Tree panel and type $a it will select all of the anchors on the page and highlight them both on page and in the Tree. That should make scanning fairly easy.
Cheers,
Bob
RobM –
These anchors are highlighted in the tree panel but I don’t see any difference in the page editor. For instance, look at “Overview” and “Interpretation”, both of which have anchors. Maybe there’s a switch or option?
Sorry - click on the square/circle icon just to the right of the search box.
Do you have the visual helpers turned off? If not, then I would have to see a snippet of your actual HTML code to troubleshoot.
They show up after I turned on “Selected element border & controls”.
In the tree panel search, is there a way to exclude href links? For example –
<a class="_dict_link" title="" href="loss1_dict.html">loss</a>
This isn’t a major problem but it would be helpful for my particular purpose.
Hmmm… I don’t think so. The search is powered by jQuery, so you might be able to find what you need with Google. Basically you need elements with a “#” in the href, correct?
Yes, only highlighting either of the following example types. The second is more critical in order to check for missing topic anchors.
<a href="#overview">Overview</a>
<!-- typically in a table of contents -->
or
<a id="overview"></a>
<!--
typically from a topic heading as -
<h1><a id="overview"></a>Overview</h1>
-->