Loading...
 
Skip to main content

Custom Share Module 0.1dev

Features / Usability

Features / Usability

Forum List Topic List

Forums » Features / Usability » [SOLVED] Bug in PluginIcon preventing correct re-sizing?
 
Thread actions
Print this page
  • Print all pages

    • [SOLVED] Bug in PluginIcon preventing correct re-sizing?

    Posted by Mike Finko posts: 228 Ukraine

    Hi,

    The FontAwesome icons in PluginIcon are tiny and do not re-size correctly ('button width' 'button height') - only the transparent box (or 'area') around the icon get bigger, but the icon stays the same size. Here you can see an example:
    Screenshot From 2024 02 16 12 04 59

    The first 'WhatsApp' PluginIcon on the left is tiny, about 15px x 15px, the second one, about 50px x 50 px, is PluginImage.

    Here is the code for the first two:

    Copy to clipboard
    {button href="https://wa.me/xxxxxxxxxx" _icon_name="whatsapp" _type=" "  _target="_blank"}    {img type="fileId" fileId="1719" link="https://wa.me/xxxxxxxxxx"}


    Could this be due to PluginIcon using a .png instead of .svg, where if you increase the size of the .png it would not look good so it was coded to only increase the size of the area surrounding the icon? Also interesting is that the size of the WhatsApp icon (and probably most others) when downloaded to my local environment (entire library, not individual) is about 50px x 50px., so maybe there is a bug that is making it smaller to start with?

    In any case, an image with a link works fine, I just thought I'd give a heads up should this be an 'Easy first contribution' for someone.

    br,
    Mike

    Reads: 401
    Posted by Gary Cunningham-Lee posts: 4662 Japan

    Hi, Mike,

    To be sure what we are talking about here, PluginIcon uses syntax like

    Copy to clipboard
    {icon name="whatsapp" size="3"}
    . This produces


    The size of an icon in a button is determined by the CSS rule for that particular button (.btn, .btn-sm, .btn-lg, etc.), which is based on font sizes. This is why the icon in your button is small.

    I tried making a larger button with a big icon and text, with syntax like this:

    Copy to clipboard
    {button href="Make_a_call" _text="Call me maybe" _icon_name="whatsapp" _style="font-size: 3rem"}
    , which produces


    Call me maybe

    So that looks like it might do the job for you.


    -- Gary

    Posted by Mike Finko posts: 228 Ukraine

    ok, my bad. After preparing the question for a long time, I realized I completely mixed up PluginIcon and PluginButton 🙄

    So, yes, I was referring to PluginButton where you can use the FontAwesome icons. The standard 'height/width' options in the gui do not change the size of the icon, only the size of the 'button', which makes sense.

    I see you added: _style="font-size: 3rem"
    which, of course, does change the size of the actual icon (there's a lot of info about em vs. rem sizing on the web).

    So, no bug, But it's good Tiki has other options (like an image with a link) so users can find workarounds (like in my case, if I don't know css).

    Thanks Gary, hope all is well,
    Mike


    Upcoming Events

    1)  19 Sep 2024 14:00 GMT-0000
    Tiki Roundtable Meeting
    2) 
    Tiki birthday
    3)  17 Oct 2024 14:00 GMT-0000
    Tiki Roundtable Meeting
    4)  21 Nov 2024 14:00 GMT-0000
    Tiki Roundtable Meeting
    5)  19 Dec 2024 14:00 GMT-0000
    Tiki Roundtable Meeting