jQuery Masonry for SharePoint 2010

This slideshow requires JavaScript.

jQuery Masonry http://masonry.desandro.com/  is a page layout feature involving the use of Divs, CSS and jQuery and I thought that would look great for web parts on a SharePoint page.  So using my SharePoint design/hacking skills, I created a Page Layout to work with jQuery Masonry.

No need to position web parts according to the default templates provided out-of-the-box, just add your web parts to the individual web part zones and let the users browser position them dynamically.

I find positioning web parts on a page tedious and time-consuming, trying to fit them in a 1024×768 area without scrolling horizontally can be frustrating, so when I stumbled on jQuery Masonry, I had to get this working in my environment.

I’ve adjusted jQuery Masonry to function with Web Part Zones on a SharePoint 2010 Publishing Page Layout. (code below).  All you need to do is place the most relevant or important web parts at the top of the page and the users browser would do the rest.

1: Instructions to add jQuery Masonry to your SharePoint environment:

2: Download jQuery Masonry files from link above

3: Open SharePoint Designer 2010

4: Copy Masonry Files to a Document Library, ie: scripts

5: Create new Page Layout at the top-level site collection.

6: Copy this code to a text editor and update the Masonry file paths.

7: Paste this code after this line: <asp:Content ContentPlaceholderID=”PlaceHolderMain” runat=”server”>

<WebPartPages:SPProxyWebPartManager runat="server" id="spproxywebpartmanager"></WebPartPages:SPProxyWebPartManager>

<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="../../scripts/masonry-site/css/ie7.css" />
<![endif]-->

 <style type="text/css">

.col1 { width: auto; }

.box {
 margin: 2px;
 padding: 2px;
 background: #D8D5D2;
 float: left;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}

 .clearfix { zoom: 1; }
 </style>

 <div id="container" class="clearfix">

<div class="box col1">

 <WebPartPages:WebPartZone id="g_A08B0D214A4D4D2AAA747A4FC19941FB" runat="server" title="Zone 1"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>

 </div>

<div class="box col1">

 <WebPartPages:WebPartZone id="g_DC055C5704EF427DA2E38F851900937B" runat="server" title="Zone 2"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>

 </div>

<div class="box col1">

 <WebPartPages:WebPartZone id="g_F7B0518D8025480F931833EEFCA92129" runat="server" title="Zone 3"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>

 </div>

<div class="box col1">

 <WebPartPages:WebPartZone id="g_7BCF356FE81A427BB4EDC8EB36FCB10F" runat="server" title="Zone 4"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>

 </div>

<div class="box col1">

 <WebPartPages:WebPartZone id="g_F379EB375FC143F292F52CD1393E2544" runat="server" title="Zone 5"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>

 </div>

<div class="box col1">

 <WebPartPages:WebPartZone id="g_94E95467DCA3410381D64A184F3A5716" runat="server" title="Zone 6"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>

 </div>

<div class="box col1">

 <WebPartPages:WebPartZone id="g_0C39484DF210480884A8ECD0828AD1C5" runat="server" title="Zone 7"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>

 </div>

<div class="box col1">

 <WebPartPages:WebPartZone id="g_90C8F765302B4D45942E22B8D90E7B77" runat="server" title="Zone 9"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>

 </div>

<div class="box col1">

 <WebPartPages:WebPartZone id="g_EBBDA9C3986C4388875859746F01C1E7" runat="server" title="Zone 10"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>

 </div>

<div class="box col1">

 <WebPartPages:WebPartZone id="g_4535738D283D4533AB249BFF19FFB200" runat="server" title="Zone 8"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>

 </div>

<div class="box col1">

 <WebPartPages:WebPartZone id="g_6A1674E0E7894655A6C92E84D1747A7D" runat="server" title="Zone 11"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>

 </div>

<div class="box col1">

 <WebPartPages:WebPartZone id="g_F1A07AFC0DBD466889A24252A531C7D3" runat="server" title="Zone 12"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>

 </div>

<div class="box col1">

 <WebPartPages:WebPartZone id="g_E48F91568389441083A17C4BA841CA39" runat="server" title="Zone 13"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>

 </div>

<div class="box col1">

<WebPartPages:WebPartZone id="g_956FE13F1AA04B748DC75A4192BBFC96" runat="server" title="Zone 14"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>

</div>

<div class="box col1">

 <WebPartPages:WebPartZone id="g_2AB70C79E55A4354976FE591C9D356BA" runat="server" title="Zone 15"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>

 </div>

<div class="box col1">

 <WebPartPages:WebPartZone id="g_EF783A5A11AA456D807BB9DD5F1E2B12" runat="server" title="Zone 16"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>

 </div>

</div> <!-- #container -->

<script src="/scripts/masonry-site/js/jquery-1.7.1.min.js"></script>
<script src="/scripts/masonry-site/jquery.masonry.min.js"></script>
<script>
 $(function(){

 $('#container').masonry({
 itemSelector: '.box',
 columnWidth: 10,
 isAnimated: true
 });

 });
</script>

8: Save, check in, publish.

9: Create a new Publishing Page

Publishing Page Layout
For IE7 Users add the follwing CSS, because of the way IE7 uses width: 100% inside Width: Auto, the web part zones will expand to 100% of the page.

.s4-ca table {
 width: auto; !important
}
.box {
 margin: 0px;
 padding: 0px;
}
/* toolpane */
.ms-ToolPaneOuter {
 position: relative;
}

This is how I achieved jQuery Masonry for SharePoint 2010 Publishing Page Layout.
Any questions or ideas for improvement, please comment.

Advertisements

Post a Comment

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s