ExternalLinks
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'> Δ</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&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&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.
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.