Skip Navigation

Home › Support › English Support › [Resolved] Custom Flag Issues

[Resolved] Custom Flag Issues

This thread is resolved. Here is a description of the problem and solution.

Problem:
The client is experiencing an issue where a custom Quebec flag added to the fr-CA language option appears much larger than expected.
Solution:
Ensure your custom Quebec flag is in PNG or JPG format, as WPML automatically resizes these to 18x12 pixels. If using an SVG, set its source dimensions to 18x12 pixels. For more details, see the Using Custom Flags in WPML documentation.

If this solution does not resolve your issue or seems outdated, we recommend checking related known issues at https://wpml.org/known-issues/, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If needed, please open a new support ticket for further assistance.

This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

Tagged: 

This topic contains 3 replies, has 1 voice.

Last updated by elliotN-2 1 day, 6 hours ago.

Assisted by: Otto.

Author Posts
February 11, 2025 at 3:45 pm #16692709

elliotN-2

Background of the issue:
I am trying to add a Quebec flag to my custom fr-CA language option. The issue can be seen on this page: hidden link

Symptoms:
I expected to see a flag sized like the English flag, but instead, I got a giant Quebec flag.

Questions:

February 11, 2025 at 3:46 pm #16692713

elliotN-2

I'm still having an issue.
February 11, 2025 at 3:46 pm #16692716

elliotN-2

the flag sizes are not resolved.

1.png
3.png
2.png
February 11, 2025 at 4:09 pm #16692870

Otto
Supporter

Languages: English (English ) Spanish (Español )

Timezone: America/Argentina/Buenos_Aires (GMT-03:00)

Hello,

Please try the following:
❌ Please make a full website backup before proceeding ❌

  • Verify Flag Image Format and Dimensions: Ensure your custom Quebec flag is a PNG or JPG file. WPML automatically resizes these formats to 18x12 pixels for consistency. If you're using an SVG file, make sure its source dimensions are set to 18x12 pixels. For more details, refer to the Using Custom Flags in WPML documentation.
  • Adjust Flag Size in Language Switcher Settings: Navigate to WPML > Languages and click the pencil icon next to your language switcher. In the settings, specify the desired width and height for your flags to ensure they display correctly. Guidance can be found in the same documentation linked above.
  • Disable Automatic Flag Resizing (if necessary): If the flag is still displaying incorrectly, you can disable WPML's automatic resizing feature. Add the following line to your wp-config.php file, just before the line that says /* That's all, stop editing! Happy publishing. */:
    <pre>

    define( 'WPML_DO_NOT_RESIZE_UPLOADED_FLAGS', true );

    </pre>
    After making this change, re-upload your flag image in WPML > Languages > Edit Languages. More information is available in the Using Custom Flags in WPML documentation.

  • Clear Caches: After implementing these changes, clear any caching mechanisms you have in place, including your browser cache, to ensure the updates take effect.

If the issue persists, please provide your debug information so I can look at some of your configurations. We have an excellent article on how to locate it here: https://wpml.org/faq/provide-debug-information-faster-support/.

Best Regards,
Otto
February 14, 2025 at 2:45 pm #16706906

elliotN-2

Thanks for your help. The issue was with the SVG file itself. If opened in notepad, the SVG file was missing an explicit width="18px" height="12px". I added both, which fixed the problem.