mahnunchik / gulp-responsive

gulp-responsive generates images at different sizes
https://npmjs.com/gulp-responsive
MIT License
502 stars 62 forks source link

Better usage examples #16

Closed petulla closed 8 years ago

petulla commented 9 years ago

Hi Could you provide some better examples? It's not clear to me how you would take, say, a directory of images with similar file names and generate responsive images from a template of sizes. I am planning to test a bit, but it would be great to have better docs.

patlux commented 9 years ago

+1

herrschuessler commented 9 years ago

+1

stevesloan commented 8 years ago

+1

silvenon commented 8 years ago

What do you want to achieve exactly? Could you give an example?

petulla commented 8 years ago

This is the Gulp code I ended on:

gulp.task('responsify', function() {
  return gulp.src('./src/assets/images/photos/slideshow_raw/*.JPG')
    .pipe(responsive({
      '*.JPG': [
        { width:400,
        rename: {
          suffix:'-400'
        }},{
        width:800,
        rename: {
          suffix:'-800'
        }},{
        width:1500,
        rename: {
          suffix:'-1500'
        }
      },{
        width:2200,
        rename: {
          suffix:'-2200'
        }
      },{
        width:3000,
        rename: {
          suffix:'-3000'
        }
      }]
    }))
    .pipe(gulp.dest('./build/assets/images/photos/responsive/jpg/'));
});
silvenon commented 8 years ago

What was unclear about the usage?

petulla commented 8 years ago

It didn't explain the suffix syntax.

silvenon commented 8 years ago

The readme says:

Renaming is implemented by rename module. Options are correspond options of gulp-rename module.

So it links to the resources where you can see the rename syntax. Maybe it should be mentioned earlier, though.

petulla commented 8 years ago

It's buried. A concrete example is useful.

mahnunchik commented 8 years ago

Hi @petulla @patlux @herrschuessler @stevesloan @silvenon

Usage examples: https://github.com/mahnunchik/gulp-responsive/tree/master/examples

Feedback welcome :wink: