I'm intending to use the Masonry grid across all pages in my portfolio site. At the moment I'm copying the code across from page to page. Will this give me any issues with speed or SEO? It's just images at the moment. So it's loading on every new page, is there a way to have it load just the once?

 

Many thanks for your time

Use CSS.

 

Your site isn't loading so can't see what you are doing but putting all the repeating images in your CSS mean they only need to be loaded once (if the CSS is in an external file).

Use CSS.

 

Your site isn't loading so can't see what you are doing but putting all the repeating images in your CSS mean they only need to be loaded once (if the CSS is in an external file).

 

Masonry grid isn't CSS only, that kind of layout is only possible using JavaScript, which is exactly what the Masonry package does (with the combination of a CSS grid).

 

To the OP. I recommend you bundle your Masonry JavaScript along with your other scripts and serve it to all your pages. Assuming you are using some kind of backend that allows for templating then you can just put the script referencing your bundle in a shared footer file.

 

Your users browsers will cache this bundled script. We can get more complex by generating chunked bundles and asynchronously load them on demand but this is beyond the scope of your project it seems.

Edited November 6, 20169 yr by rbrtsmith

Thanks for the feedback folks, much appreciated. Sorry, my web page link was old and the new site isn't live yet.

 

This is the code I have top and bottom of each page. Is this what you mean rbrtsmith? Yes, the css I'm using is external.

 

In the head:

 

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="http://imagesloaded.desandro.com/imagesloaded.pkgd.js"></script>

<script src="http://masonry.desandro.com/masonry.pkgd.js"></script>

Script a the bottom:

<script src="js/masonry.js"></script>

<script type="text/javascript">

var $grid = $('.grid').imagesLoaded( function() {

// init Masonry after all images have loaded

$grid.masonry({

// options...

});

});</script>

At some stage I'd like the ability to filter images on the page and paginate through them but that's another story.

Edited November 6, 20169 yr by skippers

Masonry grid isn't CSS only, that kind of layout is only possible using JavaScript, which is exactly what the Masonry package does (with the combination of a CSS grid).

I do it with just CSS. No JS required.

 

For example: http://onepage.aerin.co.uk/support-topics/

 

(There is JS on the page but it's not needed for the masonry layout).

 

There are loads of tutorials on how to do this. This is just one of them: http://w3bits.com/css-masonry/

I do it with just CSS. No JS required.

 

For example: http://onepage.aerin.co.uk/support-topics/

 

(There is JS on the page but it's not needed for the masonry layout).

 

There are loads of tutorials on how to do this. This is just one of them: http://w3bits.com/css-masonry/

 

 

Those examples are not the same. They are simply vertical grids, nothing complex at all there. Masonry JS arranges horizontal grids in this fashion which is much more complex and only possible with JavaScript. (Columns are also vertical)

 

Vertical grid:

1 | 3 | 5 | 7
2 | 4 | 6 | 8

Horizontal:

1 | 2 | 3 | 4
5 | 6 | 7 | 8

Edited November 6, 20169 yr by rbrtsmith

I had seen that css grid before, I may be tempted after seeing it again, although I've built the masonry screens now (haven't tested all browsers though). Thanks for the links.

 

If my images have rollover text then I'm duplicating copy over pages so I was wondering if this will affect SEO?

It depends on the text and how it is used.

 

As an aside, the preponderance of touch screen devices to browse the internet means rollovers aren't very effective. Use captions and alt text on the images instead and Google will love you long time.

Those examples are not the same. They are simply vertical grids, nothing complex at all there. Masonry JS arranges horizontal grids in this fashion which is much more complex and only possible with JavaScript.

OK - but we don't know what @@skippers is trying to achieve so the CSS only option may be sufficient.

Good point about the touch screens.

 

Something similar to this is what I'm after: http://www.erikjohanssonphoto.com/

 

So when you click on a project image the grid is still viewable below the project details on each screen. Curious to how the grid loads on each page.

 

I do like how the css grid doesn't create gaps as you resize. The advantage of Masonry I can use Isotope to filter the images, guess you can do this anyway.

Correct rbrtsmith, I would prefer to keep the horizontal order

With hover states I would only put non-critical information in there, use them as an enhancement, for the most part they might be some kind of preview / CTA to the article that the user is hovering - it is an enhancement nothing more. When that link is followed all devices will see the full content of that article / product.

Edited November 6, 20169 yr by rbrtsmith

OP: You want to concatenate your scripts into a single bundle and place it in the footer of your document. Those requests to different CDN domains will hurt your page load.

Many thanks rbrtsmith, looks like I had a repeat in there too