ExternalLinks

Summary: Configure external links to open in a new window, have a "tooltip title", or use other CSS classes
Version: n/a
Prerequisites: 2.0
Status: Stable
Maintainer: Pm
Discussion: ExternalLinks-Talk
Categories: Links

Questions answered by this recipe

  • How can I make all external links open in a new window?
  • How can I include a title in an external link that will show up as a tooltip?
  • How can I add an icon to external links?
  • How can I change the CSS-class of links to attachments, links to pages on the same site (but not on the wiki), links to other groups?

Open external links in a new window

The $UrlLinkFmt variable specifies the HTML to be output when an external link is generated by PmWiki. The following line in local/config.php (or a local customization file) adds target='_blank' to the HTML so that each external link is opened in a new window.

$UrlLinkFmt = "<a class='urllink' href='\$LinkUrl' rel='nofollow'
  target='_blank'>\$LinkText</a>";

To disable this behavior for specific links, use %target=_self% in front of the link to cause it to open in the current window.

Note that target= is not longer allowed for links in XHTML and your website may fail to validate, however target is a valid attribute for HTML5.

Include a "tooltip title"

This feature is built-in since PmWiki version 2.2.14 (2010-02-27) See PmWiki:Links.

Icons after external links

To add a small graphic on the right of external links like the Wikipedia fashion :
In your CSS style sheet (e.g, pub/css/local.css), add the following:

#wikibody a.external {
   background: url(external.png) center right no-repeat;
   padding-right: 13px;
   color: #2f6fab;
}
#wikibody a.external:visited {color: #006699;}

Simply put the small external.png image, which is 13px wide, in the folder where your CSS style sheet is. The one used on Wikipedia is available from upload.wikimedia.org commons.wikimedia.org.

Now change the above $UrlLinkFmt in your local/config.php to:

$UrlLinkFmt = "<a class='external' href='\$LinkUrl' rel='nofollow'>\$LinkText</a>";

To have this apply only to http: links, set the value of $IMapLinkFmt instead:

$IMapLinkFmt['http:'] = 
  "<a class='external' href='\$LinkUrl' rel='nofollow'>\$LinkText</a>";

Note that this adds an arrow also to Attach: and Path: links which are somehow external to the wiki but possibly internal for the website. See below for a fix.

As an alternative way of showing external links and better indicating where such links are pointing to, you might want to add external sites' own favicons next to each link.
There is/was a service which was/is provided by Google and
should work rather easy (although not always) with this syntax:

 http://www.google.com/s2/favicons?domain=example.com&.png

like in

 http://www.google.com/s2/favicons?domain=pmwiki.com&.png

Examples

  • Pmwiki
  • Wikipedia
  • Yahoo!
  • example.com

Where/when the right picture is not available or not working, a standard internet icon is shown instead. Added by Luigi 27-Jul-2011

Q: Can this be integrated so instead of using external.png it uses the linked websites own favicon without having to specify it every time? Also this doesn't seem to be working with tooltips.

Yes it can be integrated and works with tooltip titles, see Cookbook:ExternalLinksFavicons. --Petko November 28, 2020, at 10:09 AM

Styles for Attach: and Path: links

Q: I find Wikipedia style ext-links great, but unfortunately it transforms the attachments links into external links (check it out at MonobookSkin). Is there a way to disable it for internal links to attachments downloads? Petko

  • for links to the current website but outside of the wiki, you can use the Path:/path/to/page.html intermap; to style them differently than other external links, set in config.php:
    $IMapLinkFmt['Path:'] = "<a class='sitelink' href='\$LinkUrl'>\$LinkText</a>";
  • for links to the attached files, to style them differently than other external links, set in config.php:
    $IMapLinkFmt['Attach:'] = "<a class='attachlink' href='\$LinkUrl'>\$LinkText</a>";

and then, define the styles a.sitelink and a.attachlink in your CSS file.

Added by --Petko.

20120916: Thank you, Petko. I can confirm this is working on my wiki's. Icons now appear after external links but do not appear for Attach links. Ian MacGregor

Changing styles of links to other WikiGroups

To change the CSS-class of links to other Groups, add this to config.php:

function OtherGroupCss($group)
{
	global $pagename;
	$current = PageVar($pagename, '$Group');
	if($group == $current) return "";
	return " othergroup";
}
$FmtPV['$OtherGroupCss'] = 'OtherGroupCss($group)';
$LinkPageExistsFmt = 
   "<a class='wikilink{\$OtherGroupCss}' 
   href='\$LinkUrl'>\$LinkText</a>";
$LinkPageCreateFmt = 
   "<a class='createlinktext{\$OtherGroupCss}' rel='nofollow'
   href='{\$PageUrl}?action=edit'>\$LinkText</a>";

And then, define the style a.othergroup in your CSS file. Note: this will *add* another class to the link, together with "wikilink" or "createlinktext", you can only set the color.

Added by --Petko

Changing CSS and other tweaks

We can do this and a few other tweaks. The following modification will result in:

  • icons on external links and mailto links
  • no icon if the text of the external link is itself an image
  • suppress Attach: once a file has been uploaded, so linktext=filename

The php code is:

$LinkFunctions['http:'] = 'TxtLinkIMap';
$LinkFunctions['https:']  = 'TxtLinkIMap';
$LinkFunctions['mailto:']  = 'MailLinkIMap';
$LinkFunctions['Attach:'] = 'TxtLinkUpload';
SDV($EnableUploadOverwrite,1);
$IMapLinkFmt['Attach:'] =
    "<a class='urllink' href='\$LinkUrl' rel='nofollow'>\$UploadText</a>";
if ($EnableUploadOverwrite)
    $IMapLinkFmt['Attach:'] .=
    "<a class='createlink' href='\$LinkUpload'>&nbsp;&Delta;</a>";
$UrlLinkTxtFmt = "<span class='url'>$UrlLinkFmt</span>";
$MailLinkTxtFmt = "<span class='mailto'>$UrlLinkFmt</span>";
$UrlLinkFmt    = $UrlLinkTxtFmt;
$UrlLinkImgFmt =
    "<a class='urllinkimg' href='\$LinkUrl' rel='nofollow'>\$LinkText</a>";

function TxtLinkIMap($pagename,$imap,$path,$title,$txt,$fmt=NULL) {
  global $UrlLinkImgFmt, $UrlLinkTxtFmt;
  if (!$fmt)
      $fmt = preg_match('/^<img/',$txt) ? $UrlLinkImgFmt : $UrlLinkTxtFmt;
  return LinkIMap($pagename,$imap,$path,$title,$txt,$fmt);
}

function TxtLinkUpload($pagename, $imap, $path, $title, $txt, $fmt=NULL) {
  global $FmtV;
  $FmtV['$UploadText'] = str_replace('Attach:','',$txt);
  return LinkUpload($pagename,$imap,$path,$title,$txt,$fmt);
}

function MailLinkIMap($pagename,$imap,$path,$title,$txt,$fmt=NULL) {
  global $UrlLinkImgFmt, $MailLinkTxtFmt;
  if (!$fmt)
      $fmt = preg_match('/^<img/',$txt) ? $UrlLinkImgFmt : $MailLinkTxtFmt;
  return LinkIMap($pagename,$imap,$path,$title,$txt,$fmt);
}

Put the icon files where the css file resides and add the following to the css (some may prefer to use padding in pixels, in which case the space for the icon remains fixed if the page text is scaled):

span.url {
	background: url(external.png) top right no-repeat;
	padding-right: 0.9em;
}
span.mailto {
	background: url(mail_icon.gif) bottom right no-repeat;
	padding-right: 1.1em;
}

If you put the code into a pub/skins/skinname/skinname.php file, add a global statement to make the fmt variables accessible:

  global 
  $LinkFunctions, $UrlLinkFmt, $UrlLinkTxtFmt, $UrlLinkImgFmt, $IMapLinkFmt,
  $MailLinkTxtFmt, $EnableUploadOverwrite;

Contributed by jr on 2008-06-06.

Changing styles of links to media files

The following tweak will give external links a general 'medialink' class name, and a class name of the media extension name (i.e 'mp3', 'mov', etc.), defined with a $MediaExtPat variable. Set the css properties for these classes separately, for instance in a pub/css/local.css file.

$MediaExtPat = "mp3|ogg|aif|wav|mov|avi|mp4|m3u|doc|rtf|ods|txt|pdf";

$LinkFunctions['http:'] = 'MediaLinkIMap';

function MediaLinkIMap($pagename,$imap,$path,$title,$txt,$fmt=NULL) {
  global $UrlLinkTxtFmt,$MediaExtPat;
  if (!$fmt)
      $fmt = (preg_match("/($MediaExtPat)$/", $path, $m)) ? 
      "<a class='medialink {$m[1]}' href='\$LinkUrl' rel='nofollow'>\$LinkText</a>" 
      : $UrlLinkTxtFmt;
  return LinkIMap($pagename,$imap,$path,$title,$txt,$fmt);
}

Added by HansB on 2009-10-16

Hi. The MediaLinkIMap function works great, but I just realized it doesn't apply to files that are linked via Attach:. here's what to add to config.php if you want to have these styled too:

$MediaExtPat = "mp3|ogg|aif|wav|mov|avi|mp4|m3u|doc|rtf|ods|txt|pdf";  # if not already included above
# For Attach: -- the MediaLinkIMap function only works for http:, but not for Attach:
# this function is taken from the upload.php recipe in the scripts/ folder
$LinkFunctions['Attach:'] = 'MediaLinkIMap';
function MediaLinkUpload($pagename, $imap, $path, $alt, $txt, $fmt=NULL) {
  global $FmtV, $UploadFileFmt, $LinkUploadCreateFmt, $UploadUrlFmt,
    $UploadPrefixFmt, $EnableDirectDownload, $MediaExtPat;
  if (preg_match('!^(.*)/([^/]+)$!', $path, $match)) {
    $pagename = MakePageName($pagename, $match[1]);
    $path = $match[2];
  }
  $upname = MakeUploadName($pagename, $path);
  $filepath = FmtPageName("$UploadFileFmt/$upname", $pagename);
  $FmtV['$LinkUpload'] = 
    FmtPageName("\$PageUrl?action=upload&amp;upname=$upname", $pagename);
  $FmtV['$LinkText'] = $txt;
  if (!file_exists($filepath)) 
    return FmtPageName($LinkUploadCreateFmt, $pagename);
  $path = PUE(FmtPageName(IsEnabled($EnableDirectDownload, 1)
				    ? "$UploadUrlFmt$UploadPrefixFmt/$upname"
				    : "{\$PageUrl}?action=download&amp;upname=$upname",
				  $pagename));
  if (!$fmt)
	$fmt = (preg_match("/($MediaExtPat)$/", $path, $m)) ? 
	"<a class='medialink {$m[1]}' href='\$LinkUrl' rel='nofollow'>\$LinkText</a>"
	: $fmt;
  return LinkIMap($pagename, $imap, $path, $alt, $txt, $fmt);
}

overtones99 January 29, 2010, at 06:54 PM

Selectively disable Nofollow attribute

PmWiki creates external links with the Nofollow attribute to fight wiki spam. This may not be desired if your wiki is write-protected and you link to quality websites (read Nofollow for more information). To disable the nofollow attribute in all external links, place this in config.php:

$UrlLinkFmt = "<a class='urllink' href='\$LinkUrl'>\$LinkText</a>";

(This is the standard variable $UrlLinkFmt with "rel=nofollow" removed.)

If you wish to be able to select links with Nofollow removed, use this code in config.php:

$IMap['_http:'] = 'http:$1'; $IMap['_https:'] = 'https:$1';
$IMapLinkFmt['_http:'] = $IMapLinkFmt['_https:'] =
 "<a class='ext' href='\$LinkUrl' title='\$LinkAlt'>\$LinkText</a>";
$LinkFunctions['_http:'] = $LinkFunctions['_https:'] = 'LinkIMap';

This way, you can prefix a link with underscore "_" to have its nofollow attribute removed, like this:

[[_http://pmwiki.org/ | PmWiki ]] or
[[ (_)http://en.wikipedia.org ]]

Added by --Petko December 02, 2008, at 06:11 PM

Notes

See Also

Cookbook /
ExternalLinks2  Add an icon to external links and make them automatically open in a new window
FixURL  Encode special characters in link addresses (Beta)
LinkIcons  Add icons to your links according to their extensions.
PITS /
00985  Same group link formatting (Open)

Contributors

  • Pm - 2004-07-10, 2004-12-21

Comments

See discussion at ExternalLinks-Talk

User notes +1: If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Cookbook listings and will help newcomers browsing through the wiki.