Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[QUESTION] How to change flags size in newer version #1928

Open
Bartek20 opened this issue Jan 11, 2025 · 3 comments
Open

[QUESTION] How to change flags size in newer version #1928

Bartek20 opened this issue Jan 11, 2025 · 3 comments

Comments

@Bartek20
Copy link

Bartek20 commented Jan 11, 2025

Plugin version

latest code from github (v25.2.1)

Question

What files do I have to modify to build flag images with changed sizes?
Documentation on website looks outdated (https://intl-tel-input.com/examples/large-flags.html).
Files described in it doesn't exist in latest source code.

  • grunt/responsive_images.js - missing (is it grunt/generate-sprite.js now?)
  • update the width/height for the retina task - which file is it
  • src/css/intlTelInput.scss - it takes width, height from _metadata.scss - which one do I modify?
@Bartek20
Copy link
Author

Also side note:
npm run build fails on typescript declaration generation with following error:

Running "shell:genTsDeclaration" (shell) task
sed: can't read : No such file or directory
Warning: Command failed: tsc --p tsconfig.json && sed -i "" -e "s/\/index\"/\"/g" build/js/intlTelInput.d.ts
sed: can't read : No such file or directory
Use --force to continue.

Aborted due to warnings.

And here's what happens with npm run build -- --force (finishes build with errors):

Running "shell:genTsDeclaration" (shell) task
sed: can't read : No such file or directory
Warning: Command failed: tsc --p tsconfig.json && sed -i "" -e "s/\/index\"/\"/g" build/js/intlTelInput.d.ts
sed: can't read : No such file or directory
 Used --force, continuing.

Running "shell:genReactTsDeclaration" (shell) task
sed: can't read : No such file or directory
Warning: Command failed: tsc --p react/tsconfig.json && sed -i "" -e "s/\/index\"/\"/g" react/build/IntlTelInput.d.ts
sed: can't read : No such file or directory
 Used --force, continuing.

@Bartek20
Copy link
Author

Ok after some searching in code commits I found that I have to change flag height in grunt/generate-sprite.js and that generates new scss file.

Now the problem is that error:

Running "generate-sprite" task
1x combined images saved as build/img/flags.webp and build/img/flags.png
Error: Error: Processed image is too large for the WebP format
    at Sharp.toFile (/workspaces/intl-tel-input/node_modules/sharp/lib/output.js:90:19)
    at createSprite (/workspaces/intl-tel-input/grunt/generate-sprite.js:162:28)
    at generateFlagMetadataAndSprite (/workspaces/intl-tel-input/grunt/generate-sprite.js:103:15)

Warning: Processed image is too large for the WebP format Use --force to continue.

Aborted due to warnings.

It appears when flag height is bigger than 24px. (--force ignores error and finishes build without generating new images).

@jackocnr
Copy link
Owner

Sorry the info on the demo page is out of date. Please see discussion here: #1926

As for the error you're seeing, I'm afraid I don't know about that - if you find a solution please share it here, or submit a pull request, thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants