Ionic generated splash images chopped in Portrait & iPhone views

Ionic Framework ionic-v3
1

Hi all,

Using Ionic CLI 3.5.0 and @ionic/cli-plugin-cordova 1.4.1, when we run the command:

ionic cordova resources ios -s

The images for the splash screen are generated, but all of the portait and iPhone images have the left/right outer edges cut-off, rather than being re-scaled.

The splash.png is 2732 x 2732 in size and we have also run this command with –verbose, which outputs the following:

[DEBUG] Loading global plugin @ionic/cli-plugin-proxy
[DEBUG] Loading local plugin @ionic/cli-plugin-cordova
[DEBUG] Loading local plugin @ionic/cli-plugin-ionic-angular
[DEBUG] resourceJsonStructure=3
[DEBUG] platformDirContents=.DS_Store,ios,platforms.json
[DEBUG] buildPlatforms=ios
[DEBUG] getProjectPlatforms completed - length=1
[DEBUG] imgResources=12
[DEBUG] createImgDestinationDirectories completed - length=1
[DEBUG] getSourceImages completed - 1
✔ Collecting resource configuration and source images - done!
[DEBUG] uploadSourceImages completed - responses=[
        {}
        ]
✔ Uploading source images to prepare for transformations - done!
[DEBUG] generateResourceImage completed - responses=[
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null
        ]
✔ Generating platform resources: 12 / 12 complete - done!
✔ Modifying config.xml to add new image resources - done!

Could this be a CLI, or other plugin, version incompatibility?

I can happily generate these individual images, but would obviously prefer to be able to call this command to do this more easily / quickly! :O)

Any help / advise is appreciated.

1 Like
2

I think I remember something about “safe to use space” in the template files, but can’t find anything online about it. The automation running on the serve and cropping the files to the correct sizes works in a very specific way to be able to get all sizes required for so many different sizes, ratios and devices. You are probably “out” of that safe zone with your template files, could that be possible?

Edit: Found it! Automating Icons and Splash Screens - Ionic Blog

The splash screen’s artwork should roughly fit within a center square (1200×1200 px). This template provides the recommended size and guidelines about artwork’s safe zone.

Note that the linked article is from 2015, so the sizes mentioned in the article probably changed, but the linked file seems to be current with 2732 x 2732.

1 Like
3

Ah yes, many thanks - I forgot about the ‘safe-zone’ - that sorted it!

Many thanks! :O)