====== button Plugin ======
---- plugin ----
description: Create buttons for links
author : Rémi Peyronnet
email : remi+dokuwiki@via.ecp.fr
type : syntax
lastupdate : 2023-08-18
compatible : Adora Belle, Weatherwax, Binky, Ponder Stibbons, Hrun, Detritus, Elenor Of Tsort, Frusterick Manners, Greebo, Hogfather, Igor, Jack Jackrum
depends :
conflicts : siteexport
similar : bootswrapper, mikioplugin, wrap
tags : button, links
downloadurl: https://github.com/rpeyron/plugin-button/archive/master.zip
bugtracker : https://github.com/rpeyron/plugin-button/issues
sourcerepo : https://github.com/rpeyron/plugin-button
screenshot_img : http://rpeyron.github.io/plugin-button/dokuwiki_button_button.png
----
===== Installation =====
Search and install the plugin using the [[plugin:extension|Extension Manager]]. Refer to [[:Plugins]] on how to install plugins manually.
===== Examples/Usage =====
Below is a screenshot of a basic resulting button:
{{http://rpeyron.github.io/plugin-button/dokuwiki_button_main.png?recache|}}
===== Syntax =====
The full syntax is:
[[{namespace:image|extra css}wiki page|**Title** of the link]]
Where:
* ''namespace:image'' is the location of the image to use in the media manager
* ''extra css'' is some css code to add to the button, or the name of a style defined with ''conf.styles'' (see below)
* ''wiki page'' is the targetted id page;
* targets with %%://%% or %%mailto:%% are treated as external URI;
* you may also use ''!'' prefix to force an external URI (for instance: %%!apt:package%% );
* protocol has to be allowed in dokuwiki, check [[:urlschemes]]
* ''**Title** of the link'' is the name that will be displayed on the button, with formatting support ('\\' will break the line in the button, '%%**%%' for bold, etc.)
All fields are optional, so the minimal syntax is:
[[{}Simple button without image]]
You may configure some styles to use in your buttons without repeating all the css:
[[{conf.styles}style|css]]
Where:
* ''conf.styles'' is the keyword to set the styles
* ''style'' is the name of the style you want to set;
* if ‘default’, it will be added to all buttons
* ''css'' is the css code you will assign to that style
You may then use the ''style'' in your button, example:
Style declaration:
[[{conf.styles}default|font-family: "Times New Roman", Times, serif;]]
[[{conf.styles}mystyle|color:green; width:15em;]]
Style use:
[[{|mystyle}Button in times new roman]]
[[{}Button in green and in times new roman]]
You may also add styles that will be available for all pages in the plugin section of the configuration page. You will have to add one line per style:
default|font-family: "Times New Roman", Times, serif;
mystyle|color:green; width:15em;
Note that the CSS part is a bit tricky due to the selectors used in the template CSS and the layout needed for the button. By default, the style of the links is not repeated (just external links icon). See comments in style.css file for more information.
You may also configure the target of the link with the use of conf.target:
[[{conf.target}style|target]]
Example:
[[{conf.target}default|_blank]]
A button is added to the toolbar to add the template button.
Compatible with move plugin.
===== Troubleshooting =====
* If you experience display problems with Internet Explorer, please check the "Compatibility Mode" setting.
===== Contributions =====
Feel free to contribute to this plugin source on GitHub: [[https://github.com/rpeyron/plugin-button]]
Thank you to:
* Xavier Decuyper (toolbar button)
* lisps (global config, internal media link support, escaping of userinput)
* ThisNameIsNotAllowed (support for [[move]] plugin)
===== Changelog =====
* 19/05/2013 : Initial release
* 20/04/2014 : Added target support (feature request from Andrew St Hilaire)
* 07/06/2014 : Added formatting support in description link text (but not in page link section) (feature request from Willi Lethert)
* 30/08/2014 : Added toolbar button (contribution from [[http://www.savjee.be/|Xavier Decuyper]]) and fixed local anchor (bug reported by Andreas Kuzma)
* 06/09/2014 : Refactored to add backlinks support (feature request from Schümmer Hans-Jürgen); you will need to update cache
* 28/04/2015 : Refactored global config handling, add internal media link support, add escaping of userinput (contribution from lisps [[https://github.com/lisps/plugin-button]])
* 05/08/2015 : Merged lisps default style option and added french translation
* 12/09/2015 : Fixed PHP error with some versions
* 07/02/2016 : Applied PHP7 patch
* 19/11/2016 : Merged pull request from ThisNameIsNotAllowed adding support for move plugin
* 05/03/2017 : Merged PR form lisps fixing some move plugin bugs
* 28/07/2018 : Fixed bug with move plugin (Issue #5)
* 10/01/2019 : Documentation update (Issue #6)
* 07/03/2020 : Fixed PHP warning (Issue #9)
* 11/05/2020 : Improved CSS configurability & regex (Issue #10 and #12)
* 09/07/2020 : Added '!' prefix in URI to allow to force non internal URI (apt: prefix for instance)
* 04/08/2020 : Hack to fix issue with Hogfather (see Issue #13 for details)
* 07/02/2022 : Added Português do Brasil translation (PR by mac-sousa)
* 26/11/2022 : Fixed some warnings for PHP8.1 and fix filename of br translation
* 13/12/2022 : Fixed PHP7 with str_contains polyfill
* 29/05/2023 : Fixed require deprecated warning (thanks to #28)
* 18/08/2023 : Fixed more deprecation warnings (thanks to nerun with #33)
===== Request =====
If you have any request, please add an issue to [[https://github.com/rpeyron/plugin-button/issues]]
Older requests:
* For the plugin to recognize white space so buttons can all be the same size \\ -> //The best way to do that is to add a 'width' in the style section : %%[[{buttons:fbreader.png|width: 25em}vlc|Bouton vlc]]%% ; if you want all your buttons with the same size, you may also want to modify default style : %%[[{conf.styles}default|color:green; width:15em;]]%%//
* Button Color can be changed with a hex code \\ -> //This can already be done by specifying the color in the style section : %%[[{buttons:fbreader.png|width: 25em; color: #20FE55; background-color: #7780F0;}color|Button with specific colors]]%%//