Potential CSS relative path error in Kobocat bower_components/datatables-plugins/integration/bootstr

[Roger Hunwicks]

I'm using WhiteNoise for serviing static files, although I will look at dj_static too.

When I run ./manage.py collectstatic for kobocat I get the following error:

whitenoise.django.MissingFileError: The file 'bower_components/datatables-plugins/integration/bootstrap/images/sort_both.png' could not be found with <whitenoise.django.GzipManifestStaticFilesStorage object at 0x7fdbbd21d150>.

The CSS file 'bower_components/datatables-plugins/integration/bootstrap/2/dataTables.bootstrap.css' references a file which could not be found:

  bower_components/datatables-plugins/integration/bootstrap/images/sort_both.png

Please check the URL references in this CSS file, particularly any

relative paths which might be pointing to the wrong location.

In that CSS file:

table.table thead .sorting { background: url('../images/sort_both.png') no-repeat center right; }

table.table thead .sorting_asc { background: url('../images/sort_asc.png') no-repeat center right; }

table.table thead .sorting_desc { background: url('../images/sort_desc.png') no-repeat center right; }

table.table thead .sorting_asc_disabled { background: url('../images/sort_asc_disabled.png') no-repeat center right; }

table.table thead .sorting_desc_disabled { background: url('../images/sort_desc_disabled.png') no-repeat center right; }

But those images are all actually in the static/images directory. So for me, I have to replace '../images/' with '../../../../../images/'

[Roger Hunwicks]

Similarly:

whitenoise.django.MissingFileError: The file 'css/img/glyphicons-halflings.png' could not be found with <whitenoise.django.GzipManifestStaticFilesStorage object at 0x7fcd6fdab150>.

The CSS file 'css/phaseout/bootstrap.min.css' references a file which could not be found:

  css/img/glyphicons-halflings.png

Please check the URL references in this CSS file, particularly any

relative paths which might be pointing to the wrong location.

This error is in kobocat-template/static/css/. There are many ways to solve this, but I have kept kobocat-template independent, and assumed that the phaseout subdirectory name means you don't want to pollute the main directory with the Bootstrap files. Therefore, I copied kobocat/onadata/apps/main/static/img into phaseout and changed the paths in phaseout/bootstrap.min.css from ../img/ to ../img/

[Roger Hunwicks]

Similarly:

whitenoise.django.MissingFileError: The file 'bower_components/leaflet-dist/images/layers.png' could not be found with <whitenoise.django.GzipManifestStaticFilesStorage object at 0x7f47f77d4150>.

The CSS file 'bower_components/leaflet-dist/leaflet.css' references a file which could not be found:

  bower_components/leaflet-dist/images/layers.png

Please check the URL references in this CSS file, particularly any

relative paths which might be pointing to the wrong location.

Similar fix as sort_both, replace 'images/' with '../../leaflet/images/'

I notice that there are two copies of the leaflet css in the static folder - one in bower_components and one ins static/css. Is one of them actually not being used?

I also assume that the files were originally installed by bower, because of the name, but have since been customized because they are excluded in bower.json.

Are these errors occuring because the relative references are all correct AFTER collectstatic has run?

[Roger Hunwicks]

Still going, for the sake of completeness:

whitenoise.django.MissingFileError: The file 'css/images/sort_both.png' could not be found with <whitenoise.django.GzipManifestStaticFilesStorage object at 0x7fb183203150>.

The CSS file 'css/screen.css' references a file which could not be found:

  css/images/sort_both.png

Please check the URL references in this CSS file, particularly any

relative paths which might be pointing to the wrong location.

The css/images directory seems to have copies of lots of other files, so I just copied the missing files into that directory

cp ./src/kobocat/onadata/apps/main/static/images/sort_* ./src/kobocat/onadata/apps/main/static/css/images

Also:

whitenoise.django.MissingFileError: The file 'css/blank.gif' could not be found with <whitenoise.django.GzipManifestStaticFilesStorage object at 0x7ff47c355150>.

The CSS file 'css/wax-controls.css' references a file which could not be found:

  css/blank.gif

This file isn't anywhere in the source tree that I can find, so for now I've removed the background: url(blank.gif); line that refers to it.