Flag image size

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;
}

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.

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.

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

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

Same problem here as well.

• This reply was modified 3 years, 2 months ago by binaertom.

i have the same problem, looks like a bug.

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

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.

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 2 years, 11 months ago by vertigoxxl.

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.

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?

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 2 years, 7 months ago by marimarjm.

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?

SOLVED

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