|
Cookbook /
ExternalLinksSummary: Configure external links to open in a new window, have a "tooltip title", or use other CSS classes
Version:
Prerequisites: 2.0
Status: Stable
Maintainer: Pm
Categories: Links
Questions answered by this recipe
DescriptionThe $UrlLinkFmt = "<a class='urllink' href='\$LinkUrl' rel='nofollow' target='_blank'>\$LinkText</a>"; To disable this behavior for specific links, use To include a "tooltip title" in an external link, the following line in local/config.php (or a local customization file) adds $UrlLinkFmt = "<a class='urllink' href='\$LinkUrl' rel='nofollow' title='\$LinkAlt'>\$LinkText</a>"; Then, to set a tooltip title, use this markup: [[http://somesite/"Tooltip title"| link text]] which will link to http://somesite/ and will have as tooltip the words in the quotes, if the user's browser is capable of it.
To add a small graphic on the right of external links like the Wikipedia fashion
#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 Now change the above $UrlLinkFmt = "<a class='external' target='_blank' href='\$LinkUrl'>\$LinkText</a>"; To have this apply only to http: links, set the value of $IMapLinkFmt['http:'] = "<a class='external' target='_blank' href='\$LinkUrl'>\$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. Changing CSS stylesQ: 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 Seems like this might be complex, but it would also be nice to figure out how to take out external link images when the link itself is an image, for example, or take them out using markup for a given page or group. - JonHaupt
Answer: from this thread on the mailing list:
and then, define the styles 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 Changing CSS and other tweaksWe can do this and a few other tweaks. The following modification will result in:
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, Contributed by jr on 2008-06-06. NotesSee AlsoContributors
|