javascript

Gulp imagemin with the pngquant plugin

I found it hard to find an example of how to use gulp-imagemin with a plugin, specifically in my case, the imagemin-pngquant plugin .
The difference seen between using compressing a .png with the default compressor that is included in gulp-imagemin and pngquant was substantial.
I was converting a 100px x 100px 21.3KB .png. The png compressor that comes with gulp-imagemin (optipng) produced a file that was 19KB, but using pngquant produced a file that was 3.63KB. Quite a large difference.
Obviously it is worth using, but examples I found on the interwebs all seems to be wrong. After a bit of trial and error I got it working and though I would post it here for future reference.
Keep in mind, I did not set any of the options for each case.
In the future I will probably look at using gulp-image instead as it seems to also support pngquant and there is actually some decent documentation..

 var imagemin = require('gulp-imagemin'); 
var pngquant = require('imagemin-pngquant');

var inFiles = "src/images/*.png";
var outFiles = "build/images";

// Standard imagemin
gulp.task('compressStandard', function(){
return gulp.src(inFiles)
.pipe(imagemin())
.pipe(gulp.dest(outFiles))
});

// Standard imagemin with imagemin options
gulp.task('compressStandard', function(){
return gulp.src(inFiles)
.pipe(imagemin())
.pipe(gulp.dest(outFiles))
});

// imagemin using pngquant plugin
gulp.task('compressQuant', function(){
return gulp.src(inFiles)
.pipe(imagemin([pngquant()]))
.pipe(gulp.dest(outFiles))
});

// Using quant plugin and sending options
// Send the pngquant options object directly to the function
// the second argument send to the imagemin function is the imagemin options object
gulp.task('compressQuantOptions', function(){
...

Javascript snippet for "jump to" functionality in Owl Carousel

Putting this here for my own future reference.
It adds an input textfield under an owl carousel (2.0.0-beta.2.4) to jump to a certain item.
Dots must be on to use the "to" method.
It also includes some stuff for lazy loading as it did not seem to work when using the "to" method of the OwlCarousel.

  var container = $('.view-collection-item-viewer-new .view-content', context); 
var carousel = container.owlCarousel({
items: 2,
lazyLoad: true,
loop: false,
nav: true,
//dots: false,
margin: 10,
mouseDrag: false,
responsive : {
200 : {
items: 2,
},
600 : {
items: 3,
//dots: true,
},
900 : {
items: 4,
//dots: true,
}
},
callbacks: true,
onInitialized: function(){
var carousel = this;
var jumpcon = $('<div class="owl-jump"/>');
var jumpform = $('<form>go to page <input type="text"/></form>').submit(function(e){
var num = e.target[0].value;
if($.isNumeric(num) && num >= 1 && num <= carousel._items.length){
try{
var oneachpage = carousel._items.length / carousel._plugins.navigation._pages.length;
var newpage = Math.ceil(num / Math.ceil(oneachpage));
carousel.to(newpage - 1);
}catch(e){}
}
return false;
});
jumpform.append(' of '+carousel._items.length+' <input type="submit" value="Go">');
jumpcon.append(jumpform);
carousel.$element.find('.owl-controls').append(jumpcon);
},
onTranslated: function(){
// Lazy loading doesn't work well when using owl carousel 'to' method, so we do it here manually after the transition has ended.
var carousel = this;
$('.owl-item', carousel.$element).each(function(index,
...