installing splash screens and icons about generator-ionic HOT 15 CLOSED

Updated the copy:dist task to copy the app/res directory to www/res. Go ahead and download the newest version with npm install -g generator-ionicjs and rerun yo ionicjs, letting it overwrite your Gruntfile.js.

According to Cordova docs this is the convention to follow so that when you run grunt build (which runs cordova build as its last task), the assets are properly distributed into their respective platforms.

Here's the documentation http://cordova.apache.org/docs/en/3.2.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens

from generator-ionic.

this does not really address the issue since tit appears to be copying the entire directory over irregardless of the platform and I also noticed that the images are still not getting included in the build.

I am in the middle of trying to complete a release, but will provide more information shortly.

from generator-ionic.

Yes, please provide more details when you get the chance.

What does your project structure look like inside of your app folder?

from generator-ionic.

@aaronksaunders alternatively, you can use the Cordova after_prepare hook to copy the assets over to the platform locations. Look at this link: https://gist.github.com/hartman/9784684

from generator-ionic.

@niiamon Also this: https://github.com/cdibened/cordova-hooks
Or, here's a grunt-based approach to solve this: https://gist.github.com/dixonj16/7418730

I've started to add a solution, but I had to leave it in the middle due to a near deadline... (and just copied+renamed the PNGs manually...).
see last commits: https://github.com/oori/generator-ionic/commits/resources

from generator-ionic.

@oori thanks for those links! I had began doing rolling into my local Gruntfile, a task to do the PNG icon and splash copies. Glad to see that it's coming up in the near future. If you need any help with that just let me know.

For now, I am incorporating some elements from the Gruntfile at @dixonj16 's link.

from generator-ionic.

Running into this same issue, is there a best practice for solving? Just generated a new app, tried to update the images in the res folder, ran grunt build && grunt emulate:ios, and I'm still getting the standard icon/splash screens.

from generator-ionic.

FYI to those that may come after (and those who've had this problem and solved it in ways they didn't like), according to the latest PhoneGap documentation, the folders should be named res/icons and res/screens rather than res/icon and res/screen.

from generator-ionic.

Unfortunately I think including the res/icons and res/screens without delving deeper into how Cordova manages these assets has caused some confusion. I've read contradictory information on their docs:

When working in the CLI you can define app icon(s) via element (config.xml). If you do not specify an icon then the Apache Cordova logo is used.
<icon src="res/ios/icon.png" platform="ios" width="57" height="57" density="mdpi" />

and

Use the Splashscreen API to enable display of an app's introductory splash screen on many platforms. When working in the CLI, splash screen source files are located within the project's www/res/screens subdirectory.

But then on the same page:

Copy splash screen images into the iOS project's Resources/splash directory. Only add those images for the devices you want to support, such as iPad or iPhone.

The only way I was able to get this to work was actually copying the files to their correct platforms/ directory using a script. @niiamon and several others commented on this one https://gist.github.com/LinusU/7515016.

@jbender I took a look at your PR, but unless I'm mistaken, simply renaming the folder doesn't magically make everything work with the current Cordova release (3.4.1-0.1.0) published on NPM. I'm testing out their yet unpublished 3.5.0-0.2.2 version because this commit seemed promising: apache/cordova-cli@bc86dc6

Ultimately this issue seems like it should be resolved in a newer release of the Cordova CLI. In the meantime, making use of the after_prepare hook seems to be the way to go. I'll report my findings with their new version when I get a chance.

from generator-ionic.

You are correct in that it doesn't "magically" fix the splash screens, however you should see your icons transferring correctly (mine are working properly on 3.4.1-0.1.0). That being said, the docs have referenced screens and icons since the beginning, so I'm not really sure where the harm is in putting those directories where they're expected to be, even if it doesn't quite solve all the issues at the moment. At least this way you'll only need the transfer script for your splash screens and not the icons as well.

from generator-ionic.

Thanks for pointing this out. When I initially created this project, I copied over these assets from https://github.com/driftyco/ionic-angular-cordova-seed/tree/master/www/res since it served as inspiration.

Would be nice if the cordova create command this generator runs could handle creating the asset structure for icons and screens altogether. I think it still might make sense to remove the res/icons and res/screens from this project though, since at the end of the day the build system is copying over all of the images in these two directories, unnecessarily bloating the final application with icons and splash screens for platform assets that are not being utilized.

As Adobe's @hollyschinsky points this out on her blog post about Cordova Hooks:

Having custom icons and splashscreens is required for a professional mobile app. Unfortunately, Cordova CLI doesn’t support this key functionality yet. (Don’t be deceived by the icon images under www–they don’t do anything except increase the size of the final app and confuse newcomers).

Hoping 3.5 addresses this.

from generator-ionic.

I just got all my icons and splash screens implemented. This Gist shows my /hooks/after_prepare/010_resource_files.js for Cordova 3.5:
https://gist.github.com/jimthedev/36922801126eafd4d28b

It is working well.

from generator-ionic.

Thanks for verifying that hook implementation is working well @jimthedev

Moving this conversation to #72. I'm hoping to incorporate a modified version of this script, since ultimately it doesn't make sense to keep all the files in app/res because right now that directory is taking up 7.5 MB, which, by default, is getting bundled into the final distribution version and significantly increasing the size of newly scaffolded projects.

from generator-ionic.

Added support for this in version 0.5.0 - https://github.com/diegonetto/generator-ionic#icons-and-splash-screens

from generator-ionic.

Before automatically create the icon and splash
Is it possible to customize the icon and splash, so it would be different from the default? or is it possible to change the default size?

from generator-ionic.