Courtesy State Library of NSW

When you have a group of images that you want to use for your cordova app’s splash screen, it can be tedious to get their dimensions and then add them to the cordova.xml file.

You have to examine every image, get the height and width, then create the entry for it:

<splash src="" width="#" height="#" />

The Scenario

I was recently faced with doing just this for a mobile app, which had group of 18 icons. The Rule of Three comes right into play here, so a short while later, I banged out a one-liner using sed, of course!

The Solution

for i in *.png; do 
    identify $i|sed -e 's/^/<splash src="/' -e 's/png[^ ]*/png"/' -e 's/ PNG / width="/' -e 's/x[0-9]* [0-9]*x/" height="/' -e 's/+.*/" />/g' 


The code assumes you have imagemagick installed and available in your path, specifically the identify utility.

It also only works against PNGs as that’s what I use for mobile apps. It shouldn’t be too hard to change this by examining the output of the identify utility and adjusting the sed commands accordingly.


The output looks like this:

<splash src="bitmoji1272828.png" width="398" height="398" />
<splash src="flag_final.png" width="229" height="146" />
<splash src="line_guy.png" width="302" height="455" />
<splash src="ikcron_92.png" width="128" height="128" />


See Also