This thread is resolved. Here is a description of the problem and solution.
Problem: The client is trying to build a custom language switcher menu with custom flags and is experiencing issues with the flags being cropped and distorted in quality. Additionally, the client is inquiring about creating a combined language and currency switcher. Solution: To prevent WPML from resizing uploaded flag images, we recommend the following steps: 1. Access the root directory of your website and open the
wp-config.php
file. 2. Insert the following line of code just before the "/* That's all, stop editing! Happy publishing. */" line:
3. Go to "WPML > Languages → Edit Language" and re-upload the flag image. 4. Save changes and clear any caches. 5. If necessary, adjust the flag size in "WPML > Languages > Custom Language Switcher → Customize". Regarding the combined language and currency switcher, WPML does not have built-in functionality for this. It requires custom coding. If using WooCommerce Multilingual for multi-currency, set up currencies for each language as per the guide: Multi-currency support with WooCommerce. Customize the language switcher by using hooks to change language names, which will also adjust the currency:
I am trying to: build a language switcher menu with custom flags
Link to a page where the issue can be seen: hidden link
I expected to see: hidden link
Instead, I got: hidden link
I'm building a custom language switcher (which should also include the currencies btw, but that will be the next step)
I uploaded custom flags by the size of 34x34 pixels each
the flags get cropped, even in the WPML preview, see: hidden link
also the image quality of the round flag looks distorted.
I tried the CSS you suggest in one of the threads, it affects the whole box, or make the image taller but does not uncrop it.
I've reviewed your site and identified the issue. The natural size of the flag image you uploaded is too small, measuring only 18 x 12 pixels. You can see this in the screenshot I've attached.
Additionally, I opened the uploaded image in a new tab and noticed it appears to be pre-cropped, with the image resolution being less than ideal. To resolve this, could you please upload a higher resolution version of the flag image, with dimensions of 34 x 34 pixels?
Once the high-resolution image is added, you can use the following CSS code to make the language switcher appear as you want.
.wpml-ls-legacy-dropdown a {
padding: 10px !important;
border-radius: 10px;
}
.wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:after{
right: 20px !important;
}
Please feel free to let me know if you need further assistance in this matter. I will be happy to help.
Hi Prosenjit,
I had replied to your email right away, but it seems you have never received my email. Here it is again.
WPML is modifying the flag size, while uploading it to the site!
The images are indeed 34x34 pixels, see attached. The images get cropped by the WPML plugin. The file upload does not allow to choose a file from the library, but only direct file upload.
I have added the files through the media library and there is no distortion. But WPML > Languages > Edit Languages does not allow me to pick from the media library.
Please be informed that if a specific size isn't set for the flag, WPML will by default resize the flag images to 18 x 12 pixels. This might be the cause of the issue you're experiencing. To address this, you can try the following steps, which should help resolve the problem:
1. Access the root directory of your website either through the CPanel File Manager or by using an FTP client, and then open the "wp-config.php" file in an editor.
2. Insert the following constant just before the "/* That's all, stop editing! Happy publishing. */" line.
3. Navigate to "WPML > Languages → Edit Language" and re-upload the flag image.
4. Save your changes, clear any caches, and then check the front end of your site.
5. If needed, you can also adjust the flag size directly from the "WPML > Languages > Custom Language Switcher → Customize" section.
Please let me know if that helps to solve the issue or if you need further assistance in this matter. I will be happy to help.
Hello Prosenjit,
Thank you very much for the tips, it worked! how the flag is shown round without getting cropped.
I would like to make a combined language and currency switcher.
EN / EUR
EN / USD
EN / GBP
DE / EUR
DE / CHF
etc.
Is this possible in WPML?
If it is not and I have to build my own menu in Elementor, how can I find the link to switch the site to a different language?
Regarding your request to create a combined language and currency switcher, I'm sorry to inform you that there is no built-in functionality that allows you to display the currency and language switcher together. Achieving this will require custom coding to meet your specific requirements.
Once the currency setup is complete, you can customize the language switcher by taking a custom coding approach to change the way the language names appear (e.g., EN / EUR). Since the currency is configured for each language, changing the language will also automatically adjust the currency.
Please be informed that offering support for custom coding falls outside the scope of our standard support. Therefore, our assistance will be limited to providing guidance and suggestions related to this matter. You can refer to our hook guide to understand which hooks can assist you in customizing the name in the language switcher:
