Flag image size

  • Resolved cathyx

    (@cathyx)


    5 years, 2 months ago

    Hi there

    I’m using custom flag images by using your method here: https://translatepress.com/docs/developers/replace-default-flags/
    However my flags are quite a bit bigger, which makes it blurry when I amend it with CSS. How can I amend the size of the flag image?
    <img src="http://custom.url" width="18" height="12" alt="en_GB" title="English">

    • This topic was modified 5 years, 2 months ago by cathyx.
    • This topic was modified 5 years, 2 months ago by cathyx.
    • This topic was modified 5 years, 2 months ago by cathyx.

    The page I need help with: [log in to see the link]

Viewing 14 replies - 1 through 14 (of 14 total)
  • Plugin Support Alex

    (@alexcozmoslabs)

    5 years, 2 months ago

    Hi,

    You can edit the flag size using a bit of CSS, that can be added in Appearance –> Customize –> Additional CSS:

    .trp-with-flags img{
	width:30px !important;
	height: 30px !important;
}
    Denis

    (@sdenis)

    5 years, 2 months ago

    Since more than 6 days have passed since my colleague answered this ticket, we will close it and if you encounter other problems or have a question regarding TranslatePress, please create another ticket with the problem in question.

    meemyr

    (@meemyr)

    4 years, 11 months ago

    I do not believe this has been solved. The flags still look like they are 8×8 pixels, no matter which flags I use, the default or my own 512px x 512px version. Even if I just install the standard plugin without any customizations the flags frankly look really, really ugly.

    Daniel

    (@skylayer)

    4 years, 10 months ago

    I have the same problem. For some reason TranslatePress uses a thumbnail of the uploaded custom flag.

    en_GB

    Even with CSS this would look blurry. How can we solve this?

    binaertom

    (@binaertom)

    4 years, 8 months ago

    Same problem here as well.

    • This reply was modified 4 years, 8 months ago by binaertom.
    pressiwordi

    (@pressiwordi)

    4 years, 7 months ago

    i have the same problem, looks like a bug.

    dreamsight

    (@dreamsight)

    4 years, 5 months ago

    Same issue, flags look rubbish. Upsetting as I just upgraded to the paid version and find this out

    Thread Starter cathyx

    (@cathyx)

    4 years, 5 months ago

    Hi Alex & Dennis

    This topic has not been resolved.

    My guess here is that the flag icons has been set to be a certain size in WordPress. Ex, thumbnail size. CSS can change the height and width but it still displays the thumbnail quality.

    Since I was under a deadline and it’s been a couple of months since my post I made a different plan and don’t have a site to reference anymore. But there are a lot of people posting in this post with the same issue. Perhaps this can be added as a request for the next update.

    vertigoxxl

    (@vertigoxxl)

    4 years, 5 months ago

    I have the same problem.
    Looks like the size is hard-coded somewhere, as it shows me this line:
    <img src="https://xxxx.xxx/wp-content/uploads/2021/12/flat-en-12x12.png" width="18" height="12" alt="en_GB" />
    So, no matter what I do with CSS the image is still 12×12

    • This reply was modified 4 years, 5 months ago by vertigoxxl.
    assafco

    (@assafco)

    4 years, 4 months ago

    I do agree with vertigoxxl. The size of 12×12 is added to the provided flag url so that a very small icon is used. So even if the size is adjusted with CSS the image is enlarged but pixelized due to small original file.

    Nate

    (@goseongguy)

    4 years, 3 months ago

    Can we not use SVGs instead? In the Advanced tab where it lets you specify a custom flag URL, I tried using an SVG that I uploaded to my server but it didn’t work. I was hoping the SVG would overcome blurriness. Maybe I’m missing something, did anyone else try an SVG?

    marimarjm

    (@marimarjm)

    4 years, 1 month ago

    Hello, i encounter the same problem and i saw the issue wasn’t solved on any of the support forums, so i searched for a way to fix it and ifound this worked:

    On your functions.php you have to remove the image_size given by the plugin to the flags that makes them crop.

    function wpdocs_remove_plugin_image_sizes() {
    remove_image_size( ‘trp-custom-language-flag’);
    }
    add_action(‘init’, ‘wpdocs_remove_plugin_image_sizes’);

    After you do that you have to regenerate your thumbnails, you can use a plugin to do that.

    And last you’ll have to give some css to make it look the way you like on your site:

    img.trp-flag-image 
{
	width: 55px!important;
	height: 30px!important;
}

    and that’s all, it worked for me, i hope it works for you.

    • This reply was modified 4 years, 1 month ago by marimarjm.
    alezucchi

    (@alezucchi)

    4 years ago

    I’ve found this line in class-language-switcher.php in TP’s folder

      // HTML code to display flag image
        $flag_html = '<img class="trp-flag-image" src="'. esc_url( $flags_path . $flag_file_name ) .'" width="18" height="12" alt="' . esc_attr( $language_code ) . '" title="' . esc_attr( $language_name ) . '">';

    how can i override this?

    alezucchi

    (@alezucchi)

    4 years ago

    SOLVED

    i missed
    add_theme_support( 'post-thumbnails' ); in functions.php

Viewing 14 replies - 1 through 14 (of 14 total)

The topic ‘Flag image size’ is closed to new replies.

Tags