My first roots project : a minimalist responsive portfolio using masonry

1

Hi guys !

I am very excited about this project and I would like to build my own project.

Before I explain my problem I would like to describe this project.
It’s a minimalist portfolio that displays one image by project, as Hans Philip Eide did for mir.no

So the idea is to create a Custom Post Type named ‘Projects’ with 4 fields : Image, Title, Subtitle & Year (I will maybe use some custom fields with Advanced Custom Fields Plugin).

Each projects will be displayed in a CPT ‘Projects’ Template, which is basically a full width container with all ‘.projects’ class articles organized with masonry.js.
In order to make it responsive, I would like to have differents article size according to devices (for example, 100% for smartphone, 50% for tablet and 25% for computers).

Once someone have loaded the page, a preloader is displayed while the 10 first images are loaded. When it’s done, they appears with a fade-in effect.
When you arrive at the bottom of the page, the browser supports the following 10 pictures, etc…

By clicking on an image, a lightbox displayed the full-width image, with title, subtitle, year.
By clicking anywhere, it closes.

Ok, I think use these scripts :

  • Masonry.js
  • Picturefill.js (So, I will have several formats for each image)
  • Fitvids.js for video post
  • imageloaded.js
  • lightbox
  • infinitescroll.js

Here is for the theoretical part,
Now the first step for me is to load these script by using the Gruntfile.js file.
I added this :

grunt.initConfig({
jshint: {
  options: {
    jshintrc: '.jshintrc'
  },
  all: [
    'Gruntfile.js',
    'assets/js/*.js',
    '!assets/js/scripts.min.js',
	'!assets/js/plugins/masonry.pkgd.min.js',
	'!assets/js/plugins/picturefill.js',
	'!assets/js/plugins/jquery.fitvids.js',
	'!assets/js/plugins/imagesloaded.js'
  ]
},

Lightbox and infinite scroll aren’t loaded yet.
When I save the file, grunt watch says "Done, without errors."
But when I load my page on Chrome, I have an error :
“Uncaught TypeError: undefined is not a function”

Unfortunately, I have no idea where it may come.

I apologize in advance for any English mistakes,
and if you have some advices to tell me about this project, it will be welcome.

Greetings from France,
Damien

2

I think there’s a packaged version of images loaded. Try using that instead.

3

Same issue with the packaged version,
What is weird is if I remove

		'!assets/js/plugins/masonry.pkgd.min.js',
	'!assets/js/plugins/picturefill.js',
	'!assets/js/plugins/jquery.fitvids.js',
	'!assets/js/plugins/imagesloaded.pkgd.min.js'

… and save the file, the error is still here

4

The snippet from your Grunfile is where the jshint options are set. The concatenation is done with uglify and it will include anything ending .js from the plugins folder: so you may be adding more than you’ve bargained for.

These types of errors are often a colon missing from the end of a plugin file. Try enqueuing the scripts separately; if that works you’ll have to debug.

5

You were right, the problem is with imagesloaded.
Restart from scratch with packaged version,
it’s now OK !
I can now go into _main.js to insert some custom js…

6

I’ll just point out that since (I assume) you’re using Bootstrap, their modal or lightbox window is pretty easy to use and set up. It also works pretty well with Masonry style layouts. I just set up a large project with Bootstrap 3 and Isotope for the masonry-style images, and it works pretty well.

7

Cool. And if you have some advices, docs or example, I’m interested… Because i’m pretty new in javascript :smile: