Jump to content

Template talk:Clickable button: Difference between revisions

Page contents not supported in other languages.
From Wikipedia, the free encyclopedia
Browse history interactively
← Previous editNext edit →
Content deleted Content added
VisualWikitext
Escalatr (talk | contribs)
22 edits
→‎Difference between this and Template:Clickable button 2: listing differences between the similar templates
Line 90: Line 90:


It's not clear what the difference is. Can we add something to the documentation on that? [[User:Sdkb|Sdkb]] ([[User talk:Sdkb|talk]]) 19:37, 16 January 2020 (UTC)
It's not clear what the difference is. Can we add something to the documentation on that? [[User:Sdkb|Sdkb]] ([[User talk:Sdkb|talk]]) 19:37, 16 January 2020 (UTC)
* Good point, let´s try to collect something, here my experiences --[[User:Escalatr|Escalatr]] ([[User talk:Escalatr|talk]]) 09:48, 9 June 2020 (UTC)
** {{tlc|Clickable button}} creates a clickable button in the first place (without a function by default, can be misleading), {{tlc|Clickable button 2}} always creates a '''link''' styled like a button
** {{tlc|Clickable button 2}} is done through Lua Module (more elegant solution)
** {{tlc|Clickable button 2}} has a parameter for URLs, no need to wrap in a wikilink, better handling of links (in my opinion)
*** Example internal link: <br /><code><nowiki>[[Main Page | {{Clickable button| Main Page}} ]]</nowiki></code> → [[Main Page | {{Clickable button| Main Page}} ]] ''and some additional text'' <br />'''vs.''' {{tlc| Clickable button '''2'''| Main Page}} → {{Clickable button 2| Main Page}} ''and some additional text''
*** Example external link: <br /><code><nowiki>[https://en.wikipedia.org/wiki/Main_Page {{Clickable button| External link}} ]</nowiki></code> → [https://en.wikipedia.org/wiki/Main_Page {{Clickable button| External link}} ] ''and some additional text'' ('''notice:''' there is no blank space after the link icon!)<br />or {{tlc| Clickable button| <nowiki>[https://en.wikipedia.org/wiki/Main_Page External link]</nowiki>}} → {{Clickable button| [https://en.wikipedia.org/wiki/Main_Page External link] }} ''and some additional text'' ('''notice:''' now the link text is styled as normal wiki link!) <br />'''vs.''' {{tlc| Clickable button '''2'''| External link| url{{=}}<nowiki>https://en.wikipedia.org/wiki/Main_Page</nowiki>}} → {{Clickable button 2| External link| url=https://en.wikipedia.org/wiki/Main_Page}} ''and some additional text''

Revision as of 09:48, 9 June 2020

Untitled 2012 comment

You should wrap the link around the button. Otherwise parts of the area won't direct the user to the target, which can be very confusing. -- Rillke (talk) 12:11, 9 September 2012 (UTC)[reply]

The template accepts a piped link in one parameter:
{{Clickable button|[[Talk:Main Page|Main page talk page]]}}

The above produces Main page talk page

If it's called with a piped link then I don't know a way to wrap the link around the button and display the link text inside. If the link target and text were in separate parameters then the system at Wikipedia:Teahouse/Questions#Clickable button (permanent link) could be used. Here are fully clickable buttons formatted with a url in the first and a wikilink in the second:

Main page talk page [[Talk:Main Page|Main page talk page]]

PrimeHunter (talk) 12:34, 9 October 2012 (UTC)[reply]
Please check User:Vanischenu/sandbox. I hope it is solved.


Arikkulam Grama Panchayat is in Perambra State Assembly constituency. Its coordinates is 11°29'19.07"N, 75°43'35.33"E


Arikkulam Grama Panchayat is in Perambra State Assembly constituency. Its coordinates is 11°29'19.07"N, 75°43'35.33"E

···Vanischenu「m/Talk」 14:56, 11 October 2012 (UTC)[reply]
It depends what is wanted from the template. It works with one page name, or two page names as separate parameters. It doesn't work for a piped link in one parameter, or an external link in one or two parameters:


Arikkulam Grama Panchayat is in Perambra State Assembly constituency. Its coordinates is 11°29'19.07"N, 75°43'35.33"E


Arikkulam Grama Panchayat is in Perambra State Assembly constituency. Its coordinates is 11°29'19.07"N, 75°43'35.33"E


Arikkulam Grama Panchayat is in Perambra State Assembly constituency. Its coordinates is 11°29'19.07"N, 75°43'35.33"E

The current {{Clickable button}} accepts piped links and external links as in the first and second example above:
  • {{Clickable button|[[Talk:Main Page|Main page talk page]]}} ---> Main page talk page
  • {{Clickable button|[http://en.wikipedia.org/wiki/Talk:Main_Page Main page talk page]}} ---> Main page talk page
I don't know a way to make those two work for a fully clickable button. The third could be made to work if the template is told (or can figure out) whether the first parameter is a url or a page name. PrimeHunter (talk) 15:40, 11 October 2012 (UTC)[reply]
My response follows your enquiry. Yes, you'll have to use 2 params which would break backward compatibility if you use unnamed params. And it should also support external URLs. Therefore I made some more complicate stuff at commons:Template:Clickable button (from the beginning on). Nice idea this template. Before I used the raw HTML markup but it looked always messy. Thx -- Rillke (talk) 15:42, 11 October 2012 (UTC)[reply]
Check out Template:Clickable button/sandbox. Perhaps we could move that to {{Clickable button 2}} which could be fully clickable and wouldn't break old cases. Ryan Vesey 12:45, 12 October 2012 (UTC)[reply]
Does not work of external URIs, or do I miss something: Create this page -- Rillke (talk) 15:52, 12 October 2012 (UTC)[reply]
Hope this can help, User:Valchemishnu/sandbox
Thank you.···Vanischenu「m/Talk」 18:34, 12 October 2012 (UTC)[reply]

Care to create clickable button 2 with the content from that? We can link it from the doc page here. Ryan Vesey 18:42, 12 October 2012 (UTC)[reply]

As you wish, Sir.···Vanischenu「m/Talk」 19:55, 12 October 2012 (UTC)[reply]
Created it >>···Vanischenu「m/Talk」 05:26, 13 October 2012 (UTC)[reply]
A better/alternate version is available at Template:Clickable button 2/sandbox···Vanischenu「m/Talk」 04:41, 14 October 2012 (UTC)[reply]

Support the semantic button styles (mw-ui-{progressive,destructive})

Hey, thanks for using mw:Agora styles! By design this default Neutral button style doesn't stand out, so that you can have

This That Something else Do it

and have [Do it] as the "Call to action". So maybe the template could support a parameter for the additional semantics. Someone could and should update templates like {{Blue button}}, but the semantic styles are more future-proof. The underlying CSS styles are in a living style guide. -- S Page (WMF) (talk) 23:38, 3 July 2014 (UTC)[reply]

Updated example to reflect outcome of https://phabricator.wikimedia.org/T110555 resulting in consolidation into one primary, "advancing" button style (progressive) --VEckl (WMF) (talk) 23:04, 14 March 2016 (UTC)[reply]

OOjs UI

Could this button be rewritten into OOjs UI style, which is supposed to replace old and unmaintained MediaWiki UI? E.g. cswiki already made the change. There is a nice conversation between me and mediawiki dev MatmaRex, where I found out MWUI is deprecated and there is a new OOUI (classes oo-ui-*) instead, which is intended to replace that old MWUI (classes mw-ui-*) and oldest UI (classes ui-*). --Dvorapa (talk) 09:12, 21 November 2015 (UTC)[reply]

Colors

Are there more colors except red, green, blue and white? Wetit🐷 0 22:54, 7 September 2016 (UTC)[reply]

No, you have to edit the template. If someone could explain how to, it would be interesting to understand code and for testing purpose, or to create user template. — Preceding unsigned comment added by 2A01:E35:8A8D:FE80:F968:7669:E0B2:AE4A (talk) 12:29, 1 December 2016 (UTC)[reply]

Template on Slovak Wikipedia

Hi, we have similar template on Slovak Wikipedia for clickable button, but it only works in desktop view, not the mobile one. I am not a tech kind of person so can you maybe have a look at it what is missing there? Thanks a lot, --Luky001 (talk) 11:45, 22 March 2019 (UTC)[reply]

@Luky001: In [1] you changed it completely from being a translation of our template. Why did you change it and where did you get all that code? I don't want to track which of all those oo-ui classes does what in desktop versus mobile. PrimeHunter (talk) 11:21, 28 March 2019 (UTC)[reply]
@PrimeHunter: Hi, I took it from Czech Wikipedia because it seemed to me more understandable and thererefore easier to translate into Slovak. I was already solving the issue that the button was working in "Show preview" while editing but normally was displaying just as normal text with a hyperlink. After adding this code to sk:MediaWiki:Common.js it is working on the web.
mw.hook('wikipage.content').add(function() {
    if ((mw.loader.getState('oojs-ui') === 'registered') && ($('.oo-ui-widget').length)) {
        mw.loader.using(['oojs-ui']);
    }
});

I was told that this same code should make template work for mobile versions when added to sk:MediaWiki:Mobile.js, but the user is not sure if it is going to work, so he advised me rather to do some simpler version in sk:MediaWiki:Mobile.css. Note: Template is not working in mobile view on Czech Wikipedia as well. --Luky001 (talk) 16:53, 28 March 2019 (UTC)[reply]

@Luky001: It works when I run the above JavaScript in the Firefox browser console while viewing sk:Šablóna:Klikateľné tlačidlo in the mobile version. But it may not be popular to run extra JavaScript for all mobile users just to style a button. PrimeHunter (talk) 20:01, 28 March 2019 (UTC)[reply]
@PrimeHunter: For me it doesn't work in Firefox. But the question is how you make it work in mobile view here at English Wikipedia. Is it somewhere in the code of the template or are there any outer conditions affecting it? --Luky001 (talk) 21:57, 28 March 2019 (UTC)[reply]
@Luky001: The outer conditions are present in MediaWiki and don't require anything in the wiki. Special:ExpandTemplates shows that
{{Clickable button|Button text|color=white}}
{{Clickable button|Button text|color=blue}}
{{Clickable button|Button text|color=red}}
produces:
<span class="mw-ui-button ">Button text</span>
<span class="mw-ui-button mw-ui-progressive">Button text</span>
<span class="mw-ui-button mw-ui-destructive">Button text</span>
This code also works at Slovak Wikipedia. PrimeHunter (talk) 22:07, 28 March 2019 (UTC)[reply]
@PrimeHunter: That I know and I used this code before having this template. Still, with this template I find it more easy to change the type and size and what is the most important, when having URL link in this code, it will show there the icon of hyperlink, which doesn't look nice when having a button. This template solves these things. --Luky001 (talk) 22:36, 28 March 2019 (UTC)[reply]

Difference between this and Template:Clickable button 2

It's not clear what the difference is. Can we add something to the documentation on that? Sdkb (talk) 19:37, 16 January 2020 (UTC)[reply]

  • Good point, let´s try to collect something, here my experiences --Escalatr (talk) 09:48, 9 June 2020 (UTC)[reply]
    • {{Clickable button}} creates a clickable button in the first place (without a function by default, can be misleading), {{Clickable button 2}} always creates a link styled like a button
    • {{Clickable button 2}} is done through Lua Module (more elegant solution)
    • {{Clickable button 2}} has a parameter for URLs, no need to wrap in a wikilink, better handling of links (in my opinion)
      • Example internal link:
        [[Main Page | {{Clickable button| Main Page}} ]] → [[Main Page | Main Page ]] and some additional text
        vs. {{Clickable button 2|Main Page}} → Main Page and some additional text
      • Example external link:
        [https://en.wikipedia.org/wiki/Main_Page {{Clickable button| External link}} ] → External link and some additional text (notice: there is no blank space after the link icon!)
        or {{Clickable button|[https://en.wikipedia.org/wiki/Main_Page External link]}} → External link and some additional text (notice: now the link text is styled as normal wiki link!)
        vs. {{Clickable button 2|External link|url=https://en.wikipedia.org/wiki/Main_Page}} → External link and some additional text
Retrieved from "https://en.wikipedia.org/w/index.php?title=Template_talk:Clickable_button&oldid=961588299"