Menu icon Foundation
Where do I put images in Foundation for Apps?

I am super new at developing with Foundation (and frameworks in general) and for the life of me, I can't figure out how to get images to show up! I have an img folder under both client/assets and build/assets, but it continually gives me a 404, so I think I just have it linked wrong or placed wrong. Please help!

foundation for appsimages

I am super new at developing with Foundation (and frameworks in general) and for the life of me, I can't figure out how to get images to show up! I have an img folder under both client/assets and build/assets, but it continually gives me a 404, so I think I just have it linked wrong or placed wrong. Please help!

This post has been closed. No new replies can be added.

Rafi Benkual over 4 years ago

The build folder is where your production styles are outputted to. You don't modify anything there. You want to add the images in the client/assets/images folder. You may need to create an images folder.

Your path should look like assets/images/favicon.png

Michael Compton over 4 years ago

So I added the images folder and it still won't show up, even though I'm pretty sure that I'm referencing it correctly () - it's giving me a 404 error still. Ideas on what I could be doing wrong?

Robert North over 4 years ago

Checkout my thread on the same issue Michael

http://foundation.zurb.com/forum/posts/22144-images-in-apps---where-do-they-go

Not sure if it's right, but you need to tell gulp, with gulpfile.js to copy over your image files when you build the app.

Michael Compton over 4 years ago

I saw your post earlier and followed your directions, Robert, but still no go - I'm not sure if I'm just not referencing it correctly or if there's some other issue. I noticed there are additional commands for file watching at the bottom of the gulpfile.js, but seeing as how this is referencing an image, I don't know that gulp needs to check to see if the image is there or not.

This is really frustrating.

Robert North over 4 years ago

I feel your pain man. I spent half a day working this out.

I did also add, which I didn't mention in the last thread, something to the gulp.watch task down the bottom.

Checkout my gulpfile.js

 // FOUNDATION FOR APPS TEMPLATE GULPFILE
// -------------------------------------
// This file processes all of the assets in the "client" folder, combines them with the Foundation
// for Apps assets, and outputs the finished files in the "build" folder as a finished app.

// 1. LIBRARIES
// - - - - - - - - - - - - - - -

var gulp           = require('gulp'),
    rimraf         = require('rimraf'),
    runSequence    = require('run-sequence'),
    frontMatter    = require('gulp-front-matter'),
    autoprefixer   = require('gulp-autoprefixer'),
    sass           = require('gulp-ruby-sass'),
    uglify         = require('gulp-uglify'),
    concat         = require('gulp-concat'),
    connect        = require('gulp-connect'),
    path           = require('path'),
    modRewrite     = require('connect-modrewrite'),
    dynamicRouting = require('./bower_components/foundation-apps/bin/gulp-dynamic-routing');

// 2. SETTINGS VARIABLES
// - - - - - - - - - - - - - - -

// Sass will check these folders for files when you use @import.
var sassPaths = [
  'client/assets/scss',
  'bower_components/foundation-apps/scss'
];
// These files include Foundation for Apps and its dependencies
var foundationJS = [
  'bower_components/fastclick/lib/fastclick.js',
  'bower_components/viewport-units-buggyfill/viewport-units-buggyfill.js',
  'bower_components/tether/tether.js',
  'bower_components/angular/angular.js',
  'bower_components/angular-animate/angular-animate.js',
  'bower_components/ui-router/release/angular-ui-router.js',
  'bower_components/foundation-apps/js/vendor/**/*.js',
  'bower_components/foundation-apps/js/angular/**/*.js',
  '!bower_components/foundation-apps/js/angular/app.js'
];
// These files are for your app's JavaScript
var appJS = [
  'client/assets/js/app.js'
];

// 3. TASKS
// - - - - - - - - - - - - - - -

// Cleans the build directory
gulp.task('clean', function(cb) {
  rimraf('./build', cb);
});

// Copies user-created files and Foundation assets
gulp.task('copy', function() {
  var dirs = [
    './client/**/*.*',
    '!./client/templates/**/*.*',
    '!./client/assets/{scss,js}/**/*.*',
    './client/assets/img/*.*',
    'client/assets/js/*.*'
  ];

  // Everything in the client folder except templates, Sass, and JS
  gulp.src(dirs, {
    base: './client/'
  })
    .pipe(gulp.dest('./build'));

  // Iconic SVG icons
  gulp.src('./bower_components/foundation-apps/iconic/**/*')
    .pipe(gulp.dest('./build/assets/img/iconic/'));

  // Foundation's Angular partials
  return gulp.src(['./bower_components/foundation-apps/js/angular/components/**/*.html'])
    .pipe(gulp.dest('./build/components/'));
});

// Compiles Sass
gulp.task('sass', function() {
  return gulp.src('client/assets/scss/app.scss')
    .pipe(sass({
      loadPath: sassPaths,
      style: 'nested',
      bundleExec: true
    }))
    .on('error', function(e) {
      console.log(e);
    })
    .pipe(autoprefixer({
      browsers: ['last 2 versions', 'ie 10']
    }))
    .pipe(gulp.dest('./build/assets/css/'));
});

// Compiles and copies the Foundation for Apps JavaScript, as well as your app's custom JS
gulp.task('uglify', function() {
  // Foundation JavaScript
  gulp.src(foundationJS)
    .pipe(uglify({
      beautify: true,
      mangle: false
    }).on('error', function(e) {
      console.log(e);
    }))
    .pipe(concat('foundation.js'))
    .pipe(gulp.dest('./build/assets/js/'))
  ;

  // App JavaScript
  return gulp.src(appJS)
    .pipe(uglify({
      beautify: true,
      mangle: false
    }).on('error', function(e) {
      console.log(e);
    }))
    .pipe(concat('app.js'))
    .pipe(gulp.dest('./build/assets/js/'))
  ;
});

// Copies your app's page templates and generates URLs for them
gulp.task('copy-templates', ['copy'], function() {
  return gulp.src('./client/templates/**/*.html')
    .pipe(dynamicRouting({
      path: 'build/assets/js/routes.js',
      root: 'client'
    }))
    .pipe(gulp.dest('./build/templates'))
  ;
});

// Starts a test server, which you can view at http://localhost:8080
gulp.task('server:start', function() {
  connect.server({
    root: './build',
    middleware: function() {
      return [
        modRewrite(['^[^\\.]*$ /index.html [L]'])
      ];
    },
  });
});

// Builds your entire app once, without starting a server
gulp.task('build', function() {
  runSequence('clean', ['copy', 'sass', 'uglify'], 'copy-templates', function() {
    console.log("Successfully built.");
  })
});



// Default task: builds your app, starts a server, and recompiles assets when they change
gulp.task('default', ['build', 'server:start'], function() {
  // Watch Sass
  gulp.watch(['./client/assets/scss/**/*', './scss/**/*'], ['sass']);

  // Watch JavaScript
  gulp.watch(['./client/assets/js/**/*', './js/**/*', './client/assets/js/*.*'], ['uglify']);

  // Watch static files
  gulp.watch(['./client/**/*.*', '!./client/templates/**/*.*', '!./client/assets/{scss,js}/**/*.*', './client/assets/js/**/*', './client/assets/img/*.*'], ['copy']);

  console.log("Copied some files");

  // Watch app templates
  gulp.watch(['./client/templates/**/*.html'], ['copy-templates']);
});

Specifically this bit:

// Watch static files
  gulp.watch(['./client/**/*.*', '!./client/templates/**/*.*', '!./client/assets/{scss,js}/**/*.*', './client/assets/js/**/*', './client/assets/img/*.*'], ['copy']);

Now with mine when I create a new image and put it in /assets/client/img I stop and start my server again and it copies it over.

Again, I'm like you and don't fully understand if I've done it correctly. Ideally what I would like is to not restart the server every time but this works for now.

See if that helps.

Michael Compton over 4 years ago

I want to thank you so much for your help - unfortunately, still throwing a 404 error at me. I don't know what else to do - I've never had to fight this hard just to get a freaking image show up.

EDIT: Nevermind, I took your code, used it, then went back and started looking at how other code on the page lined up and mimic'd it - and suddenly, I have images! Thank you so much, Robert.

And whoever is running Foundation? Seriously, write better docs. That's some ridiculous shit 2 of your users had to go through because of a lack of thorough documentation.

Robert North over 4 years ago

Just a note, I added some additional stuff in there you don't need, like the following:

  // Copy my special javascripts
  gulp.src('./client/assets/js/svg.js')
    .pipe(gulp.dest('build/assets/js'));

That is a custom script of mine so probably best to delete it. (Edited the script earlier so it is omitted)

Glad you got it working!