Add general url reference functionality

[metallikat36]

I want to link to a lot of articles, but want them to also appear as inline citations like the PMID inline citations your plugin produces. I think it looks sloppy to have a mixture of normal text links and numerical superscript citations. I want everything to be numerical supercripts - both links to articles, and links to PMID references. I notice that you can already manually add references to the ordered list, and then cite those references with your numerical inline citation option. So that half of the picture is already done. The other half of the picture that needs implementation is adding a dialogue box to add a url to the references ordered list.

I don't know the best practices for references a url, but things that would be desired are as folllows. And note that most of these could conceivable be parsed automatically from the target url.

• the title of the site (or maybe the domain name?)
• the title of the article (note that this may not always apply. There are other things on the web to link to besides articles, but articles will generally be the case.)
• the date (also does not always apply. And some articles intentionally remove the date too because they want the article to seem timeless.

It seems conceivable to me that the only input the user would need to give is the url.

And like my previous thread, tooltips for such url references should also be clickable and take you to a new url. And of course all clickable tooltip links should be target=blank.

[dsifford]

@metallikat36 Just to clarify: You'd like the plugin to automatically format references to webpages and blogs with just an input url?

That should be doable (for most, but probably not all, urls). I'll look into implementing it when I get some spare time. 👍

[metallikat36]

Yes, you got it. Like for example, you are adding a formatted reference, but now you add an option to choose whether you are entering a PMID or whether you are entering a url. If you input a url, the plugin automatically adds a formatted reference for that url to your post.

I would say that the plugin algorithm might go something like this for a general url:

1. Try to get the relevant info from the url (i.e. site title, article title, date, maybe author name, or whatever else some "authority" says is the "right" way to reference a website).
2. If you can't get site title, just get the domain name instead. If you can't get any of the other info, just get what you can, and skip the rest.
3. Print whatever you get as the reference. At the very worst case, you will not have gotten anything except the domain name. And that to me is fine and a way to accommodate all possible urls.

Of course, there would also need to be something in this reference that is a clickable link. Since the worst case scenario is that domain name is all the info you have, it might make sense to have that as the clickable part of the reference. Or perhaps what is best is just to generically add a clickable word at the end of such all url references like "View Link" or something. I don't know.

[dsifford]

@metallikat36 This is going to have to be part of a much larger update. I tagged it for release 2.4.0..

2.3.0 was just released so you should see the changes from your other threads applied.

[metallikat36]

Sounds good. I'll wait.

All your improvements on the tooltip work great as far as I can tell. Thanks a lot. This is really good.

Z-index issue is a relative thing. In my case, hardcoding 20 does not fix it because I hardcoded my social media icons to like 1 million or something. Nothing you can do to forsee something like that. Maybe the best thing is to just include a note about z-index in some documentation and let people do it themselves in the CSS. 20 should solve any issues for most everyone else though.

I would also include a note in some documentation about what the CSS selector is for the new arrow you added to the tooltip.

[dsifford]

@metallikat36 I'm super close to being done with 2.4.0... You're gonna dig it I think.

Please, please let me know if I added something that doesn't feel right. I greatly appreciate the awesome feedback.

[metallikat36]

It's all great so far. A couple nit picky details I don't really care about, but you may want to be aware of:

1. When you apply a background color to a tooltip, the little arrow no longer seemlessly blends in with the rest of the background, since it does not change color:
   http://www.earthmedresearch.org/wordpress-resources-at-siteground/
   To perfectly fix this three things would need to happen:
   a) The triangle is a little too tall. You can see if does not terminate flush with the tooltip's border.
   b) When a background is applied to abt_tooltip, it should automatiically apply to the triangle as well
   c) When a border is applied to abt_tooltip, it should automatically apply only to the left and right sides of the triangle, but not the top/bottom side.
2. On a mobile test site, I noticed that although the tooltip box itself does a great job resizing and repositioning itself, the little arrow does get repositioned along the horizontal axis too. This makes it so the arrow is no longer pointing to the inline citation.

[dsifford]

@metallikat36 Good tips -- I'll make the necessary changes prior to pushing out the update.

To respond directly to some of the suggestions:

When you apply a background color to a tooltip, the little arrow no longer seemlessly blends in with the rest of the background, since it does not change color

I'll have to rethink how that is written. Currently, you can't override it because depending on where the tooltip is in relation to the page, the tooltip (and arrow) are placed either above or below the citation.

This is tricky because the color of the tooltip arrow is just a fancy css trick using border colors, and it differs depending if the arrow is needed to be pointed upwards or downwards... For example:

/* Upwards */
.abt_tooltip_arrow {
    border-color: transparent transparent <whatever-color-you-want>;
}

/* Downwards */
.abt_tooltip_arrow {
    border-color: <whatever-color-you-want> transparent transparent;
}

Not to worry though, I think I can fix it by applying two separate classes.

the little arrow does get repositioned along the horizontal axis too.

That's partly correct. It actually does get repositioned, however when the citation numbers wrap lines, it doesn't know what to do. I fixed this already and you'll be seeing it in 2.4.0 (see issue #13 )

As always, thanks again for the feedback! 👍